这是代码完成的效果,按下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. adb常用命令大全——查看手机设备信息

    查看手机型号 adb shell getprop ro.product.model 查看电池状况 adb shell dumpsys battery 其中 scale 代表最大电量,level 代表当 ...

  2. LeetCode-268-丢失的数字

    丢失的数字 题目描述:给定一个包含 [0, n] 中 n 个数的数组 nums ,找出 [0, n] 这个范围内没有出现在数组中的那个数. 进阶: 你能否实现线性时间复杂度.仅使用额外常数空间的算法解 ...

  3. VirtualBox--修改虚拟硬盘大小

    学习:Oracle VM VirtualBox做好虚拟硬盘后,如何进一步修改虚拟硬盘的大小 修改为50G,修改后在虚拟机中查看:Machine→Settings→Storage VBoxManage ...

  4. Hadoop3.x完全分布式搭建(详细)

    环境准备 vm虚拟机(自行安装Centos7系统) hadoop3.x安装包(linux版本) java1.8安装包(linux版本) 为了能够按照教程顺利操作,需要注意几点细节 不要不看文字直接复制 ...

  5. 几行代码把Chrome搞崩溃之:HTML5 MP3录音由ScriptProcessorNode升级成AudioWorkletNode采坑记

    关键词: STATUS_ACCESS_VIOLATION AudioContext AudioWorkletNode audioWorklet addModule resume suspended c ...

  6. 10、mysql的调优

    mysql的调优 调优的最终目的:节省系统资源.提高响应速度下面从6个维度对mysql进行优化. 第一步:对服务器的参数进行调优 通过show profile命令分析,如果sql语句在执行过程中等待时 ...

  7. BSOJ5086题解

    题意略. 我们设 \([x^k]G_n(x)\) 代表深度为 \(n\) 的树,距离为 \(k\) 的点对数量,\([x^k]F_n(x)\) 为深度为 $ n $ 的树中,深度为 \(k\) 的节点 ...

  8. CF1385G口胡

    只能说很神秘??? 首先观察题面,假设给出的第一个序列为 \(a\),第二个序列为 \(b\).对于 \((a_i,b_i)\) 我们连一条边. 得到的是一个 \(n\) 个点 \(n\) 条边的不一 ...

  9. Net中委托之二多播委托

    本篇主要讲解多播委托 1.多播委托的实例 public class MyDelegate { private delegate int NoParameterWithReturn();//1.声明委托 ...

  10. huawei 华为 ubuntu mysql 访问不了的原因

    标签:服务器   ins   查看   tar   安全组   service 一. 首先将3306端口添加至安全组, 确保端口没有被封掉 二. 开启服务器上的mysql 权限, 步骤如下 1.mys ...