这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果。

简单的介绍下代码思路,html和css部分就不多说了。

重要的是js部分。

大致是这样的,

首先获取到所有的按钮为一个数组,然后遍历整个数组,增加监听函数,如果按钮的其一被按下,就会播放相应的声音。

<script>
function removeTransition(e) { if (e.propertyName !== 'transform') return; //如果当前的元素变化的属性名称不是transform,return如果if条件成立的话,return并终止运行,如果条件不成立会运行下一行代码。
e.target.classList.remove('playing'); //移除每个名playing class
} function playsound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); //es5的获取元素的方法并不推荐,并不是说不好,而是es6的办法的却更简单一些,其中使用了es6的模板字符串。
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return; //同上,if(aduio!=null)=if(!aduio),如果audio不为空的话,同样终止执行,反之会执行下面的代码。 key.classList.add('playing'); //添加class名为playing
audio.currentTime = 0; //播放延迟为0
audio.play(); //播放函数
} const keys = Array.from(document.querySelectorAll('.key')); //获取所有class未key的数组集合
keys.forEach(function(key) { //这段代码可以改成es6的语法的,key => key.addEventListener('transitionend',removeTransition)
key.addEventListener('transitionend', removeTransition);
console.log(key); //为了简单写成es5,监听到每个key执行removeTransition
//key就是每个keys
});
window.addEventListener('keydown', playsound); //addEventListener,监听键盘的动向调用playsound函数
</script>

最后附上github地址 http://link.zhihu.com/?target...

本文转载于:原生js实现架子鼓特效

原生js实现架子鼓特效的更多相关文章

  1. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  2. 原生JS实现雪花特效

    今天在校园招聘上被问到的问题,用JS写出雪花的效果.我打算使用多种方法来试试如何实现雪花. 这是目前按照网上某种思路模仿的第一种雪花,不太好看,但是大致意思清楚. 思路1:该思路直接由JS实现. 雪花 ...

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  5. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  7. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  8. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  9. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

随机推荐

  1. ELK监控nginx日志总结

    ELK介绍 ELK即ElasticSearch + Logstash + kibana ES:作为存储引擎 Logstash:用来采集日志 Kibana可以将ES中的数据进行可视化,可以进行数据分析中 ...

  2. Tableau学习Step5一表计算、详细级别表达式、动作、外接python

    Tableau学习Step5一表计算.详细级别表达式.动作.外接python 本文首发于博客冰山一树Sankey,去博客浏览效果更好. ) Tableau学习Step4一数据解释.异常值监测.参数使用 ...

  3. WPF界面语言切换

    举例中英文切换: 一.静态切换(每次切换需要重启应用) 1. 新建一个WPF APP(.NET Framework)项目,StaticLanguageSelect 2. 右击项目名,添加New Ite ...

  4. egg项目eslint不识别链式操作符的解决方法

    项目用到链式?.结果eslint一直提示 const permissionHandleArr = positionPermissionHandle.map(item => item.permis ...

  5. DOS命令基础

    DOS命令 打开CMD win+R,输入cmd. 桌面任何地方按住shift+鼠标右键 ,点击powershell. 我的电脑文件路径前cmd+空格. 开始+系统. 关闭CMD alt+空格+C. 常 ...

  6. 金蝶 K3 WISE 服务器必须登陆到桌面以后用户才能正常使用解决!

    我们单位K3的系统,由当地的服务商安装完以后就出现各种蛋疼的问题.做技术支持的小伙他总是会给一个小工具来解决,问他是什么原因要么说我的网络有问题,要么说我们的服务器有问题. K3所有客户端无法登陆一键 ...

  7. 工程师计划3 -> 项目管理2 | 项目组织与团队管理

    前几天才收到这门课的教材,发现网课的周和课本的章节不完全对应,我以教材的章节为单位进行总结和思考.这篇就是对于第二章的梳理. 0317附:这篇压了很久了,已经落后课程进度了.整理下来觉得有些偏理论,后 ...

  8. dotnet 委托的实现解析(2)开放委托和封闭委托 (Open Delegates vs. Closed Delegates)

    前言 这是个人对委托的理解系列第二篇,部分翻译自 Open Delegates vs. Closed Delegates – SLaks.Blog,好像还没人翻译过,加上部分个人理解.希望能对大家理解 ...

  9. Java基础——System类

    System包含几个有用的类字段和方法,因为成员都是静态的所以不能被实例化,可以直接通过类名调用 System类的常用方法: 方法名 说明 public static void exit(int st ...

  10. FatFs知识点总结[多篇转载]

    一.实用简单的fatfs基础知识点总结: https://my.oschina.net/u/274829/blog/282135 二.深入点的FAT表解析: http://blog.chinaunix ...