JavascriptES5 / ES6 / ES7 / ES8

伍-酷狗歌词文字粒子效果JS实现

前言废话 听歌时偶然发现了酷狗音乐APP的歌词增加了粒子效果。感觉很酷。然后就尝试着用JS在前端实现了一下。细节和酷狗还有差距。主要是尝试一下实现思路。 先看效果: 录屏效果太差了,直接看在线演示好一些...
48

肆-Web Components

整体介绍 用过Vue, React等现代前端框架的,对此概念会很熟悉: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的 web 应用中使用它们。 与框架不同的是,它是原生,无任何依赖的组件方案。 先来看下Web Components的三个要素。 一、Custom elements(自定义元素)...
78

Canvas中的文字居中和宽度

一直以来我都认为Canvas API中,文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现,有相关的API。真的是有种 “难道我一直是个SB ?”。 获取文本宽度 measureText() measureText(text) 方法参数为需要测量的文本, 返回一个关于被测量文本TextMetrics 对象包含的信息(例如它的宽度) 例如,用红色背景完整包裹文字: const canvas = document.querySelecto...
245

Notifications API系统通知

前言 这是HTML5时代(ES6)可以跨过页面,页签。直接从系统层面弹出消息通知的API。 Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。 权限申请 想使用此API需要用户授权。所以需要先申请授权: Notification.requestPermission().then(function(p...
211

[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的语音合成能力了。真的是简单的另人发指啊。...
296

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

Broadcast Channel PostMessage 跨域通信 同源能信

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

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

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

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

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

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

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

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

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

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

^