原生js实现架子鼓特效
这是代码完成的效果,按下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实现架子鼓特效的更多相关文章
- Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
- 原生JS实现雪花特效
今天在校园招聘上被问到的问题,用JS写出雪花的效果.我打算使用多种方法来试试如何实现雪花. 这是目前按照网上某种思路模仿的第一种雪花,不太好看,但是大致意思清楚. 思路1:该思路直接由JS实现. 雪花 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- 原生js实现的效果
原生js实现tooltip提示框的效果 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...
随机推荐
- ELK监控nginx日志总结
ELK介绍 ELK即ElasticSearch + Logstash + kibana ES:作为存储引擎 Logstash:用来采集日志 Kibana可以将ES中的数据进行可视化,可以进行数据分析中 ...
- Tableau学习Step5一表计算、详细级别表达式、动作、外接python
Tableau学习Step5一表计算.详细级别表达式.动作.外接python 本文首发于博客冰山一树Sankey,去博客浏览效果更好. ) Tableau学习Step4一数据解释.异常值监测.参数使用 ...
- WPF界面语言切换
举例中英文切换: 一.静态切换(每次切换需要重启应用) 1. 新建一个WPF APP(.NET Framework)项目,StaticLanguageSelect 2. 右击项目名,添加New Ite ...
- egg项目eslint不识别链式操作符的解决方法
项目用到链式?.结果eslint一直提示 const permissionHandleArr = positionPermissionHandle.map(item => item.permis ...
- DOS命令基础
DOS命令 打开CMD win+R,输入cmd. 桌面任何地方按住shift+鼠标右键 ,点击powershell. 我的电脑文件路径前cmd+空格. 开始+系统. 关闭CMD alt+空格+C. 常 ...
- 金蝶 K3 WISE 服务器必须登陆到桌面以后用户才能正常使用解决!
我们单位K3的系统,由当地的服务商安装完以后就出现各种蛋疼的问题.做技术支持的小伙他总是会给一个小工具来解决,问他是什么原因要么说我的网络有问题,要么说我们的服务器有问题. K3所有客户端无法登陆一键 ...
- 工程师计划3 -> 项目管理2 | 项目组织与团队管理
前几天才收到这门课的教材,发现网课的周和课本的章节不完全对应,我以教材的章节为单位进行总结和思考.这篇就是对于第二章的梳理. 0317附:这篇压了很久了,已经落后课程进度了.整理下来觉得有些偏理论,后 ...
- dotnet 委托的实现解析(2)开放委托和封闭委托 (Open Delegates vs. Closed Delegates)
前言 这是个人对委托的理解系列第二篇,部分翻译自 Open Delegates vs. Closed Delegates – SLaks.Blog,好像还没人翻译过,加上部分个人理解.希望能对大家理解 ...
- Java基础——System类
System包含几个有用的类字段和方法,因为成员都是静态的所以不能被实例化,可以直接通过类名调用 System类的常用方法: 方法名 说明 public static void exit(int st ...
- FatFs知识点总结[多篇转载]
一.实用简单的fatfs基础知识点总结: https://my.oschina.net/u/274829/blog/282135 二.深入点的FAT表解析: http://blog.chinaunix ...