LENTON'S BLOG
[34天] 各种好玩的WEB API
前言
最近读MDN Web API，发现了一些好玩有趣的API，也许在有些场景下十分有用，特此记录分享一下。
Web Speech API 语音识别与合成
语音识别与语音合成功能,
来吧，再控制台输入以下代码并回车，你听到了什么？
window.speechSynthesis.speak(new window.SpeechSynthesisUtterance('你好帅'))
你好帅！，没错这就是Web Speech API的语音合成能力了。真的是简单的另人发指啊。
2022-06-19 13:28:49
773
0
[33天] 不同窗口或iframe通信之Broadcast Channel API
前言
目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel API
Broadcast Channel API 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。
通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息。一个有意思的点
2022-06-18 17:29:23
962
0
[32天] JS保持屏幕换醒状态
前言
坚持写博客第32天： 了解现代Web API之WakeLock保持屏幕换醒状态
WakeLock
这是一个实验中的功能,并不是所有浏览器都支持。当应用程序需要保持运行时，屏幕唤醒锁定API提供了一种防止设备变暗或锁定屏幕的方法。
例子：
navigator.wakeLock.request("screen")
WakeLock.request()
安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。
WakeLock.request
2022-06-17 10:12:12
905
0
[31天] 再探Audio 同步歌词,频谱,进度条控制
使用JavaScript AudioContext相关API实现的音乐播放，同步显示歌词(LRC)，频谱以及进度显示和改变播放进度等。
其中进度相关的实现感觉还是不太对路，暂时也没有查到对路的方法。不清楚为什么context.currentTime不是buffer实时的currentTime。
对于这个问题，后面BufferSource换用HTML5 Audio标签（mediaElement）做为AudioContext就简单多了。。。应该是两者的应用场景不同，我还没搞清楚吧。
注意：以下
2022-06-16 15:47:59
741
0
[30天] CSS Media query几种非常用媒介查询
乍一想，好像媒介查询很简单，已经一直在用的东西，还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用！
我以为我所熟知的：
@media (max-width: 640px) { /* css here */}
就这？
大佬教我的：
一、媒介查询的更多打开方式
媒介查询不只是能用在CSS代码块中，还可以用在引入CSS的链接中，甚至是JavaScript中。
例如：
<link rel="stylesheet" href="default.css"&g
2022-06-15 11:54:16
678
0
[29天] 再探CSS3D
第29天了，不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念，就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方，这样就建立了一个左手坐标系。其中，拇指、食指和其余手指分别代表x，y，z轴的正方向
2022-06-14 18:32:25
762
0
[28天] CSS渐变深度学习
CSS渐变有两种线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。
2022-06-13 15:40:45
778
0
[27天] 一条分割线能耍什么花样
这是一条普通的HTML分割线
<hr class="line1">
两条实线
.line1{
border: 0;
border-bottom: 3px double;
}
一条虚线
.line1{
border: 0;
border-bottom: 1px dotted;
}
一条可控线段长度与间距的虚线
.line1{
border: 0;
padding-top: 1px;
background: re
2022-06-12 17:27:50
818
0
[26天] 页面刷新后滚动条回到顶部
浏览器默认行为
如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。
大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？
不优雅的方式：
在页面加载完成事件中执行：
document.documentElement.scrollTop = 0
原生的 API
浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。
只需在页面中执行：
2022-06-11 17:20:44
1633
0
[25天] 巧用border-radius实现波浪加载
先看看只用了一个div加上css实现的效果：由于录制gif体积较大，所以只录了加载到一半的效果。先帖上完整代码，如果不好读后面有大致的思路说明：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=&qu
2022-06-10 16:55:10
795
0