第七组计时器记录

<!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">

    <style type="text/css">

        body{background-color: black;}

        .nihao{

            color: white;

            font-size: 5px;

        }

        .shuai{

        position: absolute;

        margin: auto;

        top: 0px;

        bottom: 0px;

        left: 0px;

        right: 0px;

        height: 500px;

        width: 300px;

    }

    .xs{

        position: absolute;

        margin: auto;

        top: 100px;

        bottom: 0px;

        left: 0px;

        right: 0px;

        height: 500px;

        width: 300px;

    } 

    span{

        color: cornsilk;

    }

    td{

        width: 100px;

        text-align: center;

    }

    </style>

    <title>timer</title>

</head>

<body οnlοad="time()">

    

 

        <center>

            <div class="shuai">

                <div id="showtime" class="nihao"></div>

            </div>

            <div>时分秒</div>

            <div class="xs">

                <input type="text" value="00:00:00" style="background-color: black;color: white;border: 0px;font-size: 80px;" id="num"><br>

                <div>

                    <table>

                        <tr>

                            <td>

                                <span>时</span>

                            </td>

                            <td>

                                <span>分</span>

                            </td>

                            <td>

                                <span>秒</span>

                            </td>

                        </tr>

                    </table>

                </div>

                <input type="submit" value="暂停" οnclick="stop()" style="background-color: black; color: red; font-size: 30px; border-width: 0px;" >

                <input type="submit" value="重置" οnclick="reset()" style="background-color: black; color: blue; font-size: 30px;border-width: 0px;" id="Reset"> 

                <input type="submit" value="开始" οnclick="start()" style="font-size: 30px;opacity:0.8;color: greenyellow;background-color: black;border-width: 0px;" id="Start"> 

            </div>

        </center>

</body>

<script>

    var n= 0, timer=null;

    var oTxt=document.getElementById("num");

function start() {

    clearInterval(timer);

        timer=setInterval(function () {

            n++;

            var h=parseInt(n/3600);

            var m=parseInt(n/60);

            if(m>=60){

                m=m-(parseInt(n/60)-60);

            }

            var s=parseInt(n%60);

            oTxt.value=toDub(h)+":"+toDub(m)+":"+toDub(s);

        },1000);

    };

function stop() {

        clearInterval(timer);

    }

function reset() {

        oTxt.value="00:00:00";

        clearInterval(timer);

        n=0;

    }

function toDub(n){

        return n<10?"0"+n:""+n;

    }

        function time() {

         var t_div = document.getElementById("showtime");

          var now = new Date()

        t_div.innerHTML ="当前时间:"+now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + "";

          setTimeout(time, 1000);

        }

        </script>

</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值