html5 - 网页上计时器原理

查看:196
本文介绍了html5 - 网页上计时器原理的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

请问怎么知道网页上的计时器原理,

解决方案

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8>
    <title>计时器</title>
    <script>
    window.onload = function(){
        var HH = 0;
        var mm = 0;
        var ss = 0;
        var str = '';
        var timer = setInterval(function(){
            str = "";
            if(++ss==60)
            {
                if(++mm==60)
                {
                    HH++;
                    mm=0;
                }
                ss=0;
            }    
            str+=HH<10?"0"+HH:HH;
            str+=":";
            str+=mm<10?"0"+mm:mm;
            str+=":";
            str+=ss<10?"0"+ss:ss;
            document.getElementById("dtime").innerHTML = str;
        },1000);
    };
    </script>
</head>
<body>
    <div id="dtime">00:00:00</div>
</body>
</html>

原理就是利用setInterval定时器函数一秒执行一次,定义小时,分钟,秒变量,先累加秒,当秒累计到60时,分钟加1同时秒重置成0;分钟加到60时,小时加1同时分钟重置0

这篇关于html5 - 网页上计时器原理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆