(精华)2020年6月28日 JavaScript高级篇 音量调节器
【摘要】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<me...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>日食音量调节</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper" id="wrapperDom">
<audio id="audio" src="./source/holee.mp3" preload="auto"></audio>
<div class="title">拖动地球远近来控制音乐播放~调节声音大小~</div>
<div class="per"></div>
<div class="circle sun"></div>
<div class="circle moon"></div>
</div>
<script>
var objFun = {
bindEvent(boxID){
this.wrapperDom = document.getElementById(boxID);
this.audio = this.wrapperDom.querySelector('audio');
this.moon = this.wrapperDom.querySelector('.moon');
this.sun = this.wrapperDom.querySelector('.sun');
this.perinfo = this.wrapperDom.querySelector('.per');
var flag = false;
var dis;
//鼠标拖拽事件
this.moon.onmousedown = function (e) {
flag = true;
// 计算出鼠标落下点与月亮边界的距离
dis = e.clientX - this.moon.offsetLeft;
}.bind(this);
this.wrapperDom.onmousemove = function (e) {
if (!flag) {
return;
};
// 根据拖拽距离设置当前拖拽元素的位置
this.moon.style.left = (e.clientX - dis) + 'px';
// 调用控制音量的函数
this.getVoice();
}.bind(this);
// 鼠标抬起 结束拖拽事件
this.wrapperDom.onmouseup = function () {
flag = false;
}
},
getVoice(){
//太阳的宽度
var sunW = this.sun.clientWidth;
sunWL = this.sun.offsetLeft,
moonWL = this.moon.offsetLeft;
//月亮与太阳之间的距离
var distance = Math.abs(sunWL-moonWL)/sunW;
// 0 - 1
this.changeVoice(distance);
},
changeVoice(vol){
if(vol>=1){
this.audio.pause()
return;
}
this.audio.play();
// 根据百分比设置音量
this.audio.volume = 1-vol;
// 填充html内容
var str = "Volume: " + (1-vol);
this.perinfo.innerHTML = str;
// 设置背景颜色值
this.moon.style.background = `rgba(${vol}34,12,67,1)`
this.wrapperDom.style.background=`rgba(${vol},53,15,1)`;
}
}
objFun.bindEvent('wrapperDom');
</script>
</body>
</html>
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/106991557
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）