亚伦影音工作室 发表于 2025-2-16 21:35

循环播放按钮设置

本帖最后由 亚伦影音工作室 于 2025-2-17 18:25 编辑 <br /><br /><style>
#loopbnt{
      position:relative;
      width: 25px;
      height: 15px;background:#0000;
      bottom: 8px;border-radius: 0px;
   left: 0%;
      cursor: pointer;
    }

</style>
<audio id="aud" controlsautoplay src="https://img4.oldkids.cn/upload/2025/01/25/blog_260855907_20250125143403551.mp3" ></audio>
    <br>
    <br>
<br>
<img src="https://pic1.imgdb.cn/item/67b1e0bfd0e0a243d4ffdd5f.png"id="loopbnt" onClick="pmc()"/>

<br>

<br>
    <script>
      function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b1e0bfd0e0a243d4ffdd5f.png") {aud.loop =true ;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b1e0b3d0e0a243d4ffdd5e.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b1e0bfd0e0a243d4ffdd5f.png";}
}
    </script>

杨帆 发表于 2025-2-16 22:27

谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2025-2-16 23:51

原来循环按钮可以继续重复播放，交叉的那个符号只播放一次。

红影 发表于 2025-2-16 23:51

欣赏亚伦老师好帖{:4_187:}

庶民 发表于 2025-2-17 08:22

感谢。

亚伦影音工作室 发表于 2025-2-18 06:30


<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>scroll bar</title>
                <style type="text/css">
                        .wrapper{
                                position: relative;
                                width: 500px;
                                height: 40px;
                                /*border: 1px solid black;*/
                                background-color: #92ECF5;

                        }
                        #volumeValue{
                                font-size: 20px;
                                line-height: 40px;
                        }
                        #fix{
                                position: absolute;
                                left: 40px;
                                width: 400px;
                                height: 30px;
                                top: 5px;
                                border: 1px solid black;
                                background-color: black;
                        }
                        #scroll{

                                width: 0px;
                                height: 30px;
                               
                                background-color: blue;
                        }
                        #btn_add button{
                                position: absolute;
                                right: 0;
                                top:0;
                                width: 20px;
                                height: 15px;
                                background-color: red;
                        }
                        #btn_sub button{
                                position: absolute;
                                right: 0;
                                top: 20px;
                                width: 20px;
                                height: 15px;
                                background-color: red;
                        }

                </style>
        </head>
        <body>
                <script type="text/javascript">
                var volume=0;
                function get(id){
                        return document.getElementById(id);
                }
                function addVolume(){                                //按键加音量
                        if (volume==30) {
                                get("volumeValue").innerHTML="max"                //若最大则显示最大       
                               
                        }
                        else{
                                volume++;
                                get("volumeValue").innerHTML=volume;
                        }
                        get("scroll").style.width=(volume/30)*400+"px";
                }
                function subVolume(){                                //按键减音量
                        if (volume==0) {       
                                get("volumeValue").innerHTML="mute"                //若最小则提示最小               
                               
                        }

                        else{
                                volume--;
                                get("volumeValue").innerHTML=volume;
                        }
                        get("scroll").style.width=(volume/30)*400+"px";
                        get("")
                }

               
                </script>
                <body>
                        <div class="wrapper">
                        <div id="volumeValue"></div>
                                <div id="fix">
                                        <div id="scroll"></div>
                                </div>
                                <div id="btn_add"><button type="button" οnclick="addVolume()">+</button></div>
                                <div id="btn_sub"><button type="button" οnclick="subVolume()">-</button></div>
                        </div>
                </body>
        </body>
</html>
页: [1]
查看完整版本: 循环播放按钮设置