简单的html倒计时

最新推荐文章于 2024-04-07 08:25:05 发布

李超22302030413

最新推荐文章于 2024-04-07 08:25:05 发布

阅读量869

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Sreat/article/details/133636355

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="mom">
        <div><p>20</p></div>
        <div><p>工作5分钟</p></div>
        <div><p>休息15分钟</p></div>
        <div><p>零食20分钟</p></div>
        <div><p>午饭事件</p></div>
        <div><input type="text" placeholder="请输入分钟" id="inputMinutes"></div>
    </div>
    <div class="box2">
        <span id="time">时间</span>
    </div>
    <div class="box3">
        <span>休息回来努力工作时间</span>
        <span id="time1"></span>
    </div>

    <script>
        var timer;

        function startTimer(minutes) {
            var totalSeconds = minutes * 60;
            var display = document.getElementById('time');
            var display1 =document.getElementById('time1')
            clearInterval(timer);
            timer = setInterval(function() {
                var minutesRemaining = Math.floor(totalSeconds / 60);
                var secondsRemaining = totalSeconds % 60;

                display.textContent = minutesRemaining + '分' + secondsRemaining + '秒';
                display1.textContent = minutesRemaining + '分' + secondsRemaining + '秒';
                if (totalSeconds <= 0) {
                    clearInterval(timer);
                    display1.textContent = '倒计时结束';
                    return;
                }

                totalSeconds--;
            }, 1000);
        }

        var divElements = document.querySelectorAll('.mom div');

        for (var i = 0; i < divElements.length - 1; i++) {
            divElements[i].addEventListener('click', function() {
                var minutesText = this.querySelector('p').textContent;
                var minutes = parseInt(minutesText.match(/\d+/)[0]);
                startTimer(minutes);
            });
        }

        document.getElementById('inputMinutes').addEventListener('input', function() {
            var minutes = parseInt(this.value);
            startTimer(minutes);
        });
    </script>
<style>
    body{
        background-color:rgb(70,147,219) ;
    }
    .mom{

        display: flex;
        width: 100%;
    }
    .mom div{
        cursor: pointer;
        background-color: rgb(58,120,182);
        flex: 6;
        border-bottom: 1px solid rgb(53,97,141);
        transition: background-color 0.1s  ease-in;
    }
    .mom p{
        color: white;
        text-align: center;
    }

    .mom div:hover{
        background-color: rgb(47,104,159);
    }
    .mom input{
        width: 100%;
        height: 90%;
    }
    .box2{
        margin-top: 10rem;
        height: 45%;
        width: 100%;
    }
    .box3{
        justify-content: center;
        align-items: center;
        display: flex;
        margin-top: 2rem;
    }
    .box2 span{
        font-size: 15rem;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }
    .box3 span{
        font-size: 2rem;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
</style>
</html>