最简时分秒倒计时

Posted 2020-10-22 maoriaty

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最简时分秒倒计时相关的知识，希望对你有一定的参考价值。

代码：单页面

<!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>
    <style>
        #currentTime{
            text-align: right;
            font-size: 20px;
            margin-right: 10px;
        }
        .showTime{
            width: 90%;
            margin: 0 auto;
            font-size: 120px;
            text-align: center;
            margin-top: 10%;
        }
        .setTime{
            width: 750px;
            margin: 0 auto;
            position: absolute;
            bottom: 80px;
            left: 50%;
            margin-left: -375px;
        }
        .setTime .form{
            display: flex;
            justify-content: left;
        }
        .setTime .form div{
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <p id="currentTime">显示实时时间</p>
    <p style="font-size:36px;margin-left: 40px;">您的演讲时间剩余：</p>
    <div class="showTime">
        <span id="showHour">0</span>&nbsp;时
        <span id="showMin">0</span>&nbsp;分
        <span id="showSec">0</span>&nbsp;秒
    </div>
    <div class="setTime">
        <p style="margin-left:30px;">请设置倒计时的时间：</p>
        <div class="form">
            <div>
                <label for="hour">时:</label>
                <input type="text" id="hour" value="0">
            </div>
            <div>
                <label for="min">分:</label>
                <input type="text" id="min" value="0">
            </div>
            <div>
                <label for="sec">秒:</label>
                <input type="text" id="sec" value="0">
            </div>
            <div>
                <button onclick="startCountDown()" id="start">确定</button>
            </div>
        </div>
    </div>
    <script>
        // 设置当前时间
        var currentTime = setInterval(function(){
            var date = new Date();
            document.getElementById(‘currentTime‘).innerHTML = date.getFullYear() + ‘/‘ + checkTime((date.getMonth()+1)) + ‘/‘ + checkTime(date.getDate()) + ‘ ‘ + checkTime(date.getHours()) + ‘:‘ + checkTime(date.getMinutes()) + ‘:‘ + checkTime(date.getSeconds());
        },1000);
        // 设置月/天/时/分/秒等的个位数前加0 
        function checkTime(num){
            if(num < 10) return ("0" + num);
            return num;
        }
        // 设置倒计时
        var startCountDown = function(){
            document.getElementById(‘start‘).disabled = true;
            var endTime = formatTime(document.getElementById(‘hour‘).value, document.getElementById(‘min‘).value, document.getElementById(‘sec‘).value);
            var start = setInterval(function(){
                endTime--;
                // console.log(endTime);
                if(endTime >= 0){
                    document.getElementById(‘showHour‘).innerHTML = checkTime(parseInt(endTime/60/60,10)); // 剩余多少小时
                    document.getElementById(‘showMin‘).innerHTML = checkTime(parseInt(endTime/60%60,10)); // 剩余多少分钟
                    document.getElementById(‘showSec‘).innerHTML = checkTime(parseInt(endTime%60,10)); // 剩余多少秒
                }else{
                    clearInterval(start);
                }
            },1000);
        }
        // 格式化设置时间,返回时间以秒为单位
        var formatTime = function(hour, min ,sec){
            document.getElementById(‘showHour‘).innerHTML = checkTime(parseInt(hour));
            document.getElementById(‘showMin‘).innerHTML = checkTime(parseInt(min));
            document.getElementById(‘showSec‘).innerHTML = checkTime(parseInt(sec));
            return (parseInt(hour*60*60) + parseInt(min*60) + parseInt(sec)); // 返回多少秒
        }
    </script>
</body>
</html>

以上是关于最简时分秒倒计时的主要内容，如果未能解决你的问题，请参考以下文章