js闹钟，到时间后提醒

2021-12-03 网页编程网 网页编程网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .container {
                width: 300px;
                height: 100px;
                margin: 0 auto;
                background-color: pink;
                border: 2px solid #808080;
                display: block;
                padding: 50px;
            }
            
            .box {
                display: inline-block;
                text-align: center;
                color: cornflowerblue;
                font-size: 50px;
            }
            
            .time {
                display: inline-block;
                width: 100px;
                margin: 0 auto;
                text-align: center;
                color: cornflowerblue;
                font-size: 30px;
                margin-top: 10px;
            }
            
            .fl {
                float: left;
            }
            
            .fr {
                float: right;
            }
            
            .set {
                width: 260px;
                color: gray;
                margin-top: 80px;
            }
            
            .container input {
                width: 60px;
                padding: 4px 8px;
                background-color: rgba(246, 192, 242, 0.7);
                outline: none;
            }
            
            .container button {
                margin-top: 6px;
                background-color: pink;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box fl">
            </div>
            <div class="time fl">
            </div>
            <div class="clear"></div>
            <div class="set">
                <input type="text" name="hour" id="hour" value="" placeholder="时" />
                <input type="text" name="min" id="min" value="" placeholder="分" />
                <input type="text" name="sec" id="sec" value="" placeholder="秒" />
                <button class="fr" type="button" id="btn">设置</button>
                <div class="clear"></div>
            </div>
        </div>
        <script>
            //获取元素
            var oBox = document.querySelector(".box");
            var oTime = document.querySelector(".time");

var oHour = document.getElementById("hour");
            var oMin = document.getElementById("min");
            var oSec = document.getElementById("sec");
            var oBtn = document.getElementById("btn");

var h;
            var m;
            var s;

//设置定时器
            var timer;
            timer = setInterval(function() {
                clock();
            }, 500)

//修改时分秒的格式
                if(hour < 10) {
                    hour = '0' + hour;
                }
                if(minute < 10) {
                    minute = '0' + minute;
                }
                if(second < 10) {
                    second = '0' + second;
                }
                //修改innertext
                oBox.innerText = hour + ":" + minute + ":" + second;

oBtn.onclick = function() {
                    //获取value值
                    h = oHour.value;
                    m = oMin.value;
                    s = oSec.value;
                }
                if((hour == h) && (minute == m) && (second == s)) {
                    alert("闹钟响了！");
                    oHour.value = '';
                    oMin.value = '';
                    oSec.value = '';
                }
            }
            clock();
        </script>
    </body>
</html>

阅读原文

阅读 2953

123 显示电脑版