前端笔记网页特效 / 浏览器兼容 / 经验心德

[35天] 阶段性突击收尾牢骚

写与自己的牢骚,并无前端知识。请移步他篇。...
48

[34天] 各种好玩的WEB API

Pointer Lock API Picture-in-Picture_API Battery Status API Vibration API Visual Viewport API

前言最近读MDN Web API,发现了一些好玩有趣的API,也许在有些场景下十分有用,特此记录分享一下。Web Speech API 语音识别与合成语音识别与语音合成功能,来吧,再控制台输入以下代码并回车,你听到了什么?window.speechSynthesis.speak(new window.SpeechSynthesisUtterance('你好帅'))你好帅!,没错这就是Web Speech API的语音合成能力了。真的是简单的另人发指啊...
32

[33天] 不同窗口或iframe通信之Broadcast Channel API

Broadcast Channel PostMessage 跨域通信 同源能信

前言目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel APIBroadcast Channel API 可以实现同 源 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。通过创建一个监听某个频道下的 BroadcastChannel 对象,你可以接收发送给该频道的所有消息。一个有意思的点是,你不需要再维护需...
24

[32天] JS保持屏幕换醒状态

前言坚持写博客第32天: 了解现代Web API之WakeLock保持屏幕换醒状态WakeLock这是一个实验中的功能,并不是所有浏览器都支持。当应用程序需要保持运行时,屏幕唤醒锁定API提供了一种防止设备变暗或锁定屏幕的方法。例子:navigator.wakeLock.request("screen")WakeLock.request()安全上下文: 此项功能仅在一些支持的浏览器的安全上下文(HTTPS)中可用。WakeLock.request(wakeLockT...
32

[31天] 再探Audio 同步歌词,频谱,进度条控制

使用JavaScript AudioContext相关API实现的音乐播放,同步显示歌词(LRC),频谱以及进度显示和改变播放进度等。其中进度相关的实现感觉还是不太对路,暂时也没有查到对路的方法。不清楚为什么context.currentTime不是buffer实时的currentTime。对于这个问题,后面BufferSource换用HTML5 Audio标签(mediaElement)做为AudioContext就简单多了。。。应该是两者的应用场景不同,我还没搞清楚吧。注意:以下内容是&nb...
26

[30天] CSS Media query几种非常用媒介查询

乍一想,好像媒介查询很简单,已经一直在用的东西,还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用!我以为我所熟知的:@media (max-width: 640px) {    /* css here */}就这?大佬教我的:一、媒介查询的更多打开方式媒介查询不只是能用在CSS代码块中,还可以用在引入CSS的链接中,甚至是JavaScript中。例如:<link&nbs...
28

[29天] 再探CSS3D

CSS3D transform perspective

第29天了,不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念,就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方,这样就建立了一个左手坐标系。其中,拇指、食指和其余手指分别代表x,y,z轴的正方向...
31

[28天] CSS渐变深度学习

CSS渐变 linear-gradient radial-gradient

CSS渐变有两种线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型,<gradient>只能被用于<image>可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。...
32

[27天] 一条分割线能耍什么花样

这是一条普通的HTML分割线<hr class="line1">两条实线.line1{   border: 0;   border-bottom: 3px double; }一条虚线.line1{   border: 0;   border-bottom: 1px dotted; }一条可控线段长度与间距...
32

[26天] 页面刷新后滚动条回到顶部

浏览器默认行为如果浏览器不是强制刷新(Ctrl + F5),而是普通刷新(点击刷新按钮,或者按下 F5 刷新),则页面重新载入完毕后,滚动条会调到之前访问的位置。大多数时候,这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理?不优雅的方式:在页面加载完成事件中执行:document.documentElement.scrollTop = 0原生的 API浏览器已经提供了原生的 API,可以轻松实现浏览器滚动后每次都回到顶部的能力。只需在页面中执行:if ...
33

精品模板蓝瞳原创精品网站模板

^