(精华)2020年6月28日 JavaScript高级篇 音量调节器

举报
愚公搬代码 发表于 2021/10/19 00:57:32 2021/10/19
2.3k+ 0 0
【摘要】 <!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

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。