html js（js函数延时执行，屏蔽ctrl+滚轮放缩网页，修改滚动条属性，播放音乐文件）

最新推荐文章于 2022-12-10 15:00:07 发布

我肚子好饿

最新推荐文章于 2022-12-10 15:00:07 发布

阅读量371

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_36780295/article/details/115077101

版权

JavaScript setTimeout 滚轮事件滚动条样式音乐播放控制

关键词由CSDN通过智能技术生成

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、js函数延时执行：

等待600毫秒后执行tab2()这个函数。

setTimeout("tab2()",600);

2、屏蔽ctrl+滚轮放缩网页：

代码来自：https://blog.csdn.net/weixin_45370366/article/details/109216582

实际只是屏蔽了ctrl+滚轮的事件，所以还是可以通过比如360浏览器右下角的放大镜来放缩。

<script>
window.addEventListener('mousewheel', function(event){
        if (event.ctrlKey === true || event.metaKey) {
              event.preventDefault();
        }
      },{ passive: false});

      //firefox
      window.addEventListener('DOMMouseScroll', function(event){
          if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
          }
      },{ passive: false});
</script>

3、修改滚动条属性：

代码来自：https://www.html.cn/qa/css3/14117.html

其他地方把body替换成class或id都可以。

    <style>
        body::-webkit-scrollbar {   /* body滚动条属性 */
            width:5px;    
            height:4px;
        }
        body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);
        }
        body::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
        }
    </style>

运行结果：
在这里插入图片描述

4、播放音乐文件：

使用了fontawesome中的图标：

<i id="back" onclick="Back()" class="fa fa-backward" aria-hidden="true" style="color:rgb(58, 56, 56);cursor:pointer;"></i>
<i id="play" onclick="Play()" class="fa fa-play-circle-o" aria-hidden="true" style="display:inline;margin-left: 10px;color:rgb(58, 56, 56);cursor:pointer;"></i>
<i id="pause" onclick="Pause()" class="fa fa-pause-circle-o" aria-hidden="true" style="display: none;color:rgb(58, 56, 56);margin-left: 10px;cursor:pointer;"></i>
<i id="stop" onclick="Stop()" class="fa fa-stop-circle-o" aria-hidden="true" style="color:rgb(58, 56, 56);margin-left: 10px;cursor:pointer;"></i>
<i id="forward" onclick="Forward()" class="fa fa-forward" aria-hidden="true" style="margin-left: 10px;color:rgb(58, 56, 56);cursor:pointer;"></i>

在这里插入图片描述

<!-- 音乐播放 播放-->
<script>
    var audio = document.createElement("audio");
    audio.src = "./static/music.wav";
    audio.controls = true;
    document.getElementById('divBody').append(audio);   //添加到div
    audio.style.display = "none";       //隐藏原本的播放器

    var playBtn = document.getElementById('play');
    var pauseBtn = document.getElementById('pause');
 
    function Play(){
        playBtn.style.display = "none";      //播放与暂停互斥
        pauseBtn.style.display = "inline";         
        audio.play();  
   }
    //暂停
    function Pause(){
        playBtn.style.display = "inline";
        pauseBtn.style.display = "none";
        audio.pause();  
    }
    //停止播放
    function Stop(){
        playBtn.style.display = "inline";
        pauseBtn.style.display = "none";
        audio.currentTime = 0;
        audio.pause();
    }
    //前进10秒
    function Forward(){
        audio.currentTime += 10;
    }
    //后退10秒
    function Back(){
        audio.currentTime -= 10;
    }
    // 监听播放完成
    audio.addEventListener('ended', function () {  
        playBtn.style.display = "inline";
        pauseBtn.style.display = "none";
    }, false);
</script>