js如何同时调用同一个函数?

自学的js,准备用js写一个倒计时网页,单个倒计时已经写好了,但是多个倒计时遇到了麻烦。

据我观察,我写的js函数只在一个倒计时中调用了,如何同时多次调用呢?

index.html:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>辉夜2</title>
    <style>
        body {
            -webkit-font-smoothing: antialiased;
            font-family: Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
            font-size: 85%;
            margin: 0;
        }
        
        h2 {
            font-size: 220%;
            font-weight: 400;
        }
        
        .content {
            position: absolute;
            width: 100%;
            top: 40%;
            transform: translate(0, -50%);
            text-align: center;
        }
        
        .timer {
            font-size: 180%;
            line-height: 1.5;
            margin: 1em 0;
        }
        
        .timer b {
            color: rgb(253, 99, 125);
        }
    </style>
</head>

<body>
    <div class="content">
        <h2>something</h2>
        <div class="timer">
            <b id="d"></b> Days <b id="h"></b> Hours <b id="m"></b> Minutes <b id="s"></b> Seconds
            <script>
                window.onload = function(){
                    timeee("2020-04-26 00:00:00");//第一次调用
                }
            </script>
        </div>
        <div class="timer">
            <b id="d"></b> Days <b id="h"></b> Hours <b id="m"></b> Minutes <b id="s"></b> Seconds
            <script>
                window.onload = function(){
                    timeee("2020-04-26 10:00:00");//第二次调用
                }
            </script>
        </div>
    </div>

    <script src="qaq.js">
    </script>
    
</body>

</html>

qaq.is(原谅我这么命名,我真是小白):

function timeee(tim) {
    timer(tim);
    setInterval("timer("+'"'+tim+'"'+")",1000);
}
//为了实现每秒刷新,写的很难看...

function timer(time) {
    var start = new Date(time).getTime(); 
    var t = start - new Date().getTime();
    var h = ~~(t / 1000 / 60 / 60 % 24);
    if (h < 10) {
        h = "0" + h;
    }
    var m = ~~(t / 1000 / 60 % 60);
    if (m < 10) {
        m = "0" + m;
    }
    var s = ~~(t / 1000 % 60);
    if (s < 10) {
        s = "0" + s;
    }
    document.getElementById('d').innerHTML = ~~(t / 1000 / 60 / 60 / 24);
    document.getElementById('h').innerHTML = h;
    document.getElementById('m').innerHTML = m;
    document.getElementById('s').innerHTML = s;
}

谢谢各位大神!

阅读 4.2k
2 个回答

window.onload = xxx;这种赋值的方式,后面的会覆盖前面的,所以永远只有最后一个有效
想要多个都生效,使用addEventListener事件监听即可

window.addEventListener('load',function(){ console.log('load3') })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题