我也来做几个音量按钮

最新推荐文章于 2021-06-07 17:13:38 发布

cooljser

最新推荐文章于 2021-06-07 17:13:38 发布

阅读量737

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/oliver940910/article/details/73773963

版权

最近一篇关于“程序员跨界做设计”的文章转载很多，工作闲暇之余，也来做着玩玩。
先贴上效果图

完整代码如下，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>音量调节</title>
<style type="text/css">
    body {
        background-color: #ccc;
    }
    section {
        margin-top: 50px;
        padding: 10px;
        border: 1px solid white;
        border-radius: 6px;
    }
</style>
<script type="text/javascript">
    function getDom(id) {
        return document.getElementById(id);
    }
</script>
</head>
<body>
    <section>
        <div class="container1" id="container1">
            <div id="bar1"></div>
            <span id="btn1"></span>
        </div>
        <label>音量:</label><span id="volume1">0</span>
    </section>
    <style type="text/css">
        .container1 {
            width: 200px;
            height: 8px;
            border-radius: 6px;
            background-color: rgba(0, 0, 0, 0.25);
            box-shadow: inset 0 px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
            position: relative;
            margin-bottom: 10px;
        }

        .container1 div {
            height: 8px;
            width: 0;
            border-radius: 6px;
            background-color: #f27011;
        }

        .container1 span {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: white;
            display: inline-block;
            position: absolute;
            top: -1px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">        
        function init1() {
            var container = getDom('container1');
            var btn = getDom('btn1');
            var bar = getDom('bar1');
            var volume = getDom('volume1');

            btn.onmousedown = function(e) {
                var x = e.clientX;
                var left = this.offsetLeft;
                var btnWidth = this.offsetWidth;
                var max = container.offsetWidth;
                document.onmousemove = function(e) {
                    //计算偏移值
                    //left + e.clientX - x，表示这一次的偏移值，
                    //数据区间为[0, max]
                    var posX = Math.max(0, Math.min(max, left + e.clientX - x));
                    //posX - btnWidth是为了避免posX为0时，btn溢出显示
                    btn.style.left = Math.max(posX - btnWidth, 0) + 'px';
                    bar.style.width = posX + 'px';
                    volume.innerHTML = ~~(posX / max * 100);

                };
                document.onmouseup = function(e) {
                    this.onmousemove = null;
                };
            }; 
        }
        init1();
    </script>

    <section>
        <div class="container2">
            <label>volume:</label><span id="volume2">0</span>
            <button id="btn2">Change volume</button>
        </div>
    </section>
    <style type="text/css">
        .container2 {
            width: 200px;
            text-align: center;
        }
        .container2 button {
            display: block;
            margin: 10px auto;
        }
    </style>
    <script type="text/javascript">
        function init2() {
            var btn = getDom('btn2');
            var timer = null;

            btn.onclick = function() {
                if (timer) {
                    clearInterval(timer);
                    timer = null;
                    btn.innerHTML = 'Change volume';
                } else {
                    timer = setInterval(function(){
                        var volume = getDom('volume2');
                        var value = volume.innerHTML;
                        //volume.innerHTML = value == 100 ? 0 : ++value;
                        //下面这个是生成0~100的随机数
                        volume.innerHTML = ~~Math.round(Math.random() * 100);
                    }, 50);    
                    btn.innerHTML = 'Stop';
                }

            };
        }
        init2();
    </script>

    <section>
        <div class="container3">
            <label>Current volume:</label><span id="volume3">0%</span><br/>
            <label>Please enter pi for volume:</label><input type="text" id="pi"/>
            <span id="msg"></span>
        </div>
    </section>
    <style type="text/css">
        .container3 {

        }
        .container3 input {
            border-radius: 6px;
            outline: none;
            border: 1px solid white;
            margin-left: 10px;
        }
        #msg {
            color: red;
        }
    </style>
    <script type="text/javascript">
        function init3() {
            var PI = '3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679';
            var input = getDom('pi');
            var volume = getDom('volume3');
            var msg = getDom('msg');
            input.onkeyup = function(e){
                var value = e.target.value.toString();
                if (PI.startsWith(value)) {
                    volume.innerHTML = value.length + '%';
                    msg.innerHTML = '';
                } else {
                    msg.innerHTML = 'Failed. Try again';
                    input.value = '';
                    volume.innerHTML = 0 + '%';
                }
            };
        }
        init3();
    </script>
</body>
</html>