(精华)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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/106991557
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）