网页识别用户进入页面开始计时的js计时器源代码-懒人Blog(资源素材网)

思路：
1、将每个时间的id都获取到，因为有零所以一个时间要有两个id。
2、先让后面的递增，之后判断递增多少后，前面的+1。
3、用innerHTML改变他的HTML元素(也就是把时间输出在HTML中)。

HTML+CSS代码:

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>js计时</title>
    <style>
        body {
            text-align: center;
            background: url(https://api.xfyun.club/cos.php) no-repeat;
            background-size: cover;
            color: white;
        }

        .xf {
            width: 80%;
            height: 500px;
            border: 3px solid black;
            border-radius: 30px;
            background-color: rgba(71, 71, 71, 0.383);
            margin: 100px auto;
            font-size: 30px;
            font-family: '微软雅黑', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

        .xf-2 {
            margin-top: 10%;
        }

        #data {
            font-weight: 100;
            font-size: 19px;
        }

        .de {
            font-family: "楷体";
            margin-top: 5%;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>

<body id="body">
    <div class="xf">
        <div class="xf-2">
            从你进来已经过了<span id="d">0</span><span id="dd">0</span> 天
            <span id="h">0</span><span id="hh">0</span> 时
            <span id="m">0</span><span id="mm">0</span> 分
            <span id="s">0</span><span id="ss">0</span> 秒
            <div class="de">现在时间为:  <span id="data"></span></div>
        </div>
    </div>
    <script type="text/javascript">
        var d = document.getElementById('d'),
            dd = document.getElementById('dd'),
            h = document.getElementById('h'),
            hh = document.getElementById('hh'),
            m = document.getElementById('m'),
            mm = document.getElementById('mm'),
            s = document.getElementById('s'),
            ss = document.getElementById('ss'),
            data = document.getElementById('data'),
            wz = document.getElementById('wz');
        data.innerHTML = new Date();
        setInterval(function () {
            ss.innerHTML++;
            if (ss.innerHTML >= 10) {
                s.innerHTML++;
                ss.innerHTML = 0;
            }
            if (s.innerHTML >= 6) {
                mm.innerHTML++;
                s.innerHTML = 0;
            }
            if (mm.innerHTML >= 10) {
                m.innerHTML++;
                mm.innerHTML = 0;
            }
            if (m.innerHTML >= 6) {
                hh.innerHTML++;
                m.innerHTML = 0;
            }
            if (hh.innerHTML >= 9) {
                h.innerHTML++;
                hh.innerHTML = 0;
            }
            if (h.innerHTML >= 2 && hh.innerHTML >= 4) {
                dd.innerHTML++
                h.innerHTML = 0;
                hh.innerHTML = 0;
            }
            if (dd.innerHTML >= 9) {
                d.innerHTML++;
                dd.innerHTML = 0
            }
        }, 1000);
    </script>
</body>

</html>

js代码:

此处内容已隐藏，请评论后刷新页面查看.

👋 感谢您的观看，对您有用就分享出去吧！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END