javascript计时器

浪漫&星空

于 2023-03-20 22:08:16 发布

阅读量111

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_59369671/article/details/129677659

版权

效果展示：

模拟考试专用，可以实现倒计时，最后10秒钟会发出音乐警报

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
    <style>
        #wrap{
            margin: 100px auto;
            width: 500px;
            border: 10px solid blueviolet;
            border-radius: 50px;
            text-align: center;
            padding-bottom: 20px;
            
        }
        #isbling{
            margin: 100px auto;
            width: 500px;
            height: 100px;
            border: 10px solid blueviolet;
            background-color: black;
            opacity: 0.5;
            color: white;
            text-align: center;
            padding-top: 20px;
            display: none;
        }
        input{
            width: 30px;
        }
        .determine{
            margin-top: 20px;
        }
    </style>
</head>
<body>

        <div id="wrap">
            <h1 id="content">00:00:00:00</h1>
            <div class="box">
                <button id="start">开始</button>
                <button id="division">分割</button>
                <button id="reset">重置</button>
                <button id="back">倒计时</button>
            </div>
            <div id="out"></div>
        </div>

    <div id="isbling">
        <input type="text" id="number1" value="0">
        <span>时</span>
        <input type="text" id="number2" value="0">
        <span>分</span>
        <input type="text" id="number3" value="0">
        <span>秒</span>
        <div class="determine">
            <button id="redetermine">确认</button>
            <button id="cancel">取消</button>
        </div> 
    </div>

    <audio id="music" controls autoplay hidden>
        <source id="ss" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3" type="audio/mpeg" />
    </audio>
</body>

<script>
//定义变量保存时间
    var before = 0;
    //定义变量保存计时器时间
    var time = 0;
    //保存点击按钮暂停的时间
    var suspendTime = 0;
    //定义变量存储分割的时间
    var cutting = 0;
 
    //开始按钮
    start.onclick = function(){
        if(start.innerHTML == '开始'){
            start.innerHTML = '暂停';
 
            //获取相对的时间
            before = new Date().getTime();
 
            timer = setInterval(() => {
                //实时时间
                var now = new Date().getTime();
                //计时器时间 = 实时时间 - 相对时间 + 点击暂停按钮时保存的时间
                time = now - before + suspendTime;
                //把处理过的时间显示到content标签中
                content.innerHTML = showTime(time);
            }, 1000 / 60);
 
        }else if(start.innerHTML == '暂停'){
            start.innerHTML = '开始';
 
            //停止计时器
            clearInterval(timer);
 
            //储存点击暂停的时间
            suspendTime = time;
 
            //创建h2标签
            var h2 = document.createElement('h2');
            h2.innerHTML = `<span>实时时间 :</span>${showTime(time)}`;
            out.appendChild(h2);
 
            return;
        }
    }
 
    //分割按钮
    division.onclick = function(){
        //计算点击 分割按钮时  此时距离上一次点击过去了多久
        var present = time - cutting;
        //点击分割按钮的时候保存于此
        cutting = time;
        //创建h2标签
        var h2 = document.createElement('h2');
            h2.innerHTML = `<span>分割时间 : </span>${showTime(present)}`;
            out.appendChild(h2);
    }
    
    //重置按钮
    reset.onclick = function(){
        //重置样式
        //清空out内容
        out.innerHTML = "";
        before = 0;
        time = 0;
        suspendTime = 0;
        cutting = 0;
        clearInterval(timer);
        content.innerHTML = showTime(time);
        timer = null;
    }


    //倒计时
    const back=document.getElementById("back");
    back.onclick=function(){
       document.getElementById("isbling").style.display="block"
       if(back.innerHTML == '倒计时'){
       back.innerHTML = '暂停';
        
        const btn=document.getElementById("redetermine");
        btn.onclick = function(){
        const number1 = document.getElementById("number1").value;
        const number2 = document.getElementById("number2").value;
        const number3 = document.getElementById("number3").value; 
        //字符串转换为整数parseInt(number1)
        var sum = (parseInt(number1)*3600 + parseInt(number2)*60 + parseInt(number3))*1000
        document.getElementById("isbling").style.display="none"

          timer =  setInterval(()=>{
            if(sum>=10000){
                sum-=1000;
                content.innerHTML = showTime(sum)
            }
            if(sum<10000){
                sum-=1000;
                content.innerHTML = showTime(sum)
                var audio = document.getElementById("music")
                audio.play();  //开始播放
            }
            if(sum<1000){
                sum=0;
                content.innerHTML = "00:00:00:00"
                var audio = document.getElementById("music")
                audio.pause(); //停止播放
            }
        },1000)}
       }else if(back.innerHTML == '暂停'){
        back.innerHTML = '倒计时'
        clearInterval(timer);
       }
   }
   const cancel=document.getElementById("cancel");
   cancel.onclick = function(){
    document.getElementById("isbling").style.display="none"
   }


    //时间处理
    function showTime(time){
        //定义变量  小时  分钟 秒 毫秒
        var hour;
        var min;
        var second;
        var msecond;
 
        //分别  获取到小时 分钟 秒 毫秒
        hour = Math.floor(time / (3600 * 1000));
        min = Math.floor(time / 1000 / 60 % 60);
        second = Math.floor(time / 1000 % 60);
        msecond = time % 1000;
 
        //对时间进行处理
        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        second = second < 10 ? "0" + second : second;
        msecond = msecond < 100 ? "0" + msecond : msecond;
        msecond = msecond < 10 ? "0" + msecond : msecond;
 
        return hour + ":" + min + ":" + second;
    }

</script>