JavascriptES5 / ES6 / ES7 / ES8

[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...
25

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

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

[23天] JS各种抽奖效果实践

几种常见的抽奖效果俄罗斯大转盘跑马灯老虎机翻纸牌刮刮乐俄罗斯大转盘效果:实现思路:主要为css transform属性配合 rotate()旋转函数实现效果,加JS计算旋转的角度达到精确控制。实现思路简易Demo代码:俄罗斯大转盘.zip跑马灯效果:实现思路:使用css grid布局加JS控制实现思路简易Demo代码:choujiang-pmd.zip老虎机效果:.实现思路:使用css transform: translateY()控制上滚动画效果实现思路简易Demo代码:c...
41

[21天] 前端开发chrome调试技巧

一、一键重新发起请求前端与后端联调时,最常见的就是后端反复的说:你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。按F12打开控制台选中Network标签找到Fetch/XHR 类型下我们刚发过的请求右键点击 Replay XHR命令 那如果要调整一个参数呢?二、修改请求信息后重新发起请求同上右键请求,选择copy -&g...
30

[19天] IndexedDB初学笔记(一)

前言MDN介绍:IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript...
44

[18天] JS正则表达式复习

前言:什么是正则表达式正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法,以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。正则表达式,又称规则表达式,(Regular Expression,在代码中常简写为regex、regexp或RE),是一种文本模式,包括普通字符(例如,a 到 z 之间...
51

[17天] JS实现Chrome的彩蛋小游戏(一)

Chrome浏览器断网后,会出现一个小恐龙跑跳过障碍的小彩蛋游戏。也想做一个试试。一、先实现一个PNG帧动画小人代码结构:index.html<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv=&quo...
45

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

^