JavaScript Drum kit

【JavaScript Drum kit】的更多相关文章

用 JavaScript 实现网页鼓乐器,相关的初始代码在 JavaScript30 官网和 GitHub 上已经存在.我把 sound 文件夹下的音频全部替换掉了,一些相关解释也直接在注释中标明. 下面是最终成品地址,可能有些卡顿,音频加载也比较慢: 结果展示 index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <…

js & 快捷键

js & 快捷键 demo js-keyboard-shortcuts.html https://codepen.io/webgeeker/pen/MLYrNq let isCtrl = false; document.addEventListener("keyup", () => { // }); document.addEventListener("keyup", function(e) { let key = e.which || e.keyCo…

JavaScript 30 - 1 学习笔记

学习JavaScirpt30的笔记! ...虽然英语不是很好,但是跟着来还是学到了一些东西. 1-------> JavaScirpt Drum Kit 功能是这样的 ,敲击键盘上面的按钮,播放一段打鼓的音乐 . 教程之中是有很多个按键,我的demo只做了4个按钮,实现了就可以啦. 直接贴代码吧. <div class="keys"> <div data-key="65" class="key"> <kbd…

javascript30--day01--Drum kit

相关视频链接:https://www.bilibili.com/video/av8481988/?p=3 Drum kit 做题思路(1)监听键盘事件 addEventListener(‘事件名’,执行函数); window.addEventListener(“keydown”,playSound); (2)当A-L键按下的时候,播放音效 audio.play( ); (3)播放动画 Element.classList.add(“className”); 动画结束之后,移除动画 Element.…

[转载]50个Demo展示HTML5无穷的魅力

Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好.和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页应用和游戏方面永远是不错的选择.下面收集了50个非常酷的HTML5应用实例来展示其无限潜力. 1. Tunneler 2. JuicyDrop 3. Magnetic 4. Trail 5. Sinuous 6. DDD 7. Harmony 8. Lines go all over the pla…

JavaScript资源大全中文版（Awesome最新版）

Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等. 前端MVC框架与库 angular.js - 前端MVVM框架,支持双向绑定,实现MVC架构,增强Web应用 aurelia - A Javascript client framework for mobile, desktop and web. backbo…