js实现一个闹钟 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .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 type="text/javascript">
            //获取元素
            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)

            function clock() {
                var oDate = new Date();
                var hour = oDate.getHours();
                var minute = oDate.getMinutes();
                var second = oDate.getSeconds();
                if(hour >= 12) {
                    oTime.innerText = 'pm';
                    if(hour > 13) {
                        hour = hour - 12;
                    }
                } else {
                    oTime.innerText = "am";
                }

                //修改时分秒的格式
                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>

 

posted @ 2018-10-14 20:25  氧化成风  阅读(2030)  评论(0)    收藏  举报