页面加载问题

浪奔的小三爷 2021-05-11 03:53:41

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

    <title>Document</title>

    <style>

        div{

            width: 410px;

            height: 30px;

            border: 5px solid #F00;

            padding: 15px 10px;

            background-color: #0F0;

            margin: auto;

            text-align: center;

        }

    </style>

</head>

<body>

    <script>

        window.onload=function(){

        var div = document.querySelector('div');

        var DayArray =['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];

        function showTime(){

            var now = new Date();

            var year = now.getFullYear();

            var month = now.getMonth();

            var date = now.getDate();

            var hour = now.getHours();

            var minutes = now.getMinutes();

            var seconds = now.getSeconds();

            var day = now.getDay();

            if(seconds<10){

                seconds='0'+seconds;

            }

            if(minutes<10){

                minutes='0'+minutes;

            }

            var time =year+'年'+month+'月'+date+'日'+'  '+hour+'时'+minutes+'分'+seconds+'秒'+'   '+DayArray[day];

            div.innerHTML='当前系统时间：'+time;

            setTimeout("showTime()",1000);

        }

        showTime();

        }

    </script>

    <div></div>

</body>

</html>

为什么时间不能连续跳转?

...全文

247 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

silent_momo 2021-05-14

打赏
举报

<!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"> <title>Document</title> <style> div { width: 410px; height: 30px; border: 5px solid #F00; padding: 15px 10px; background-color: #0F0; margin: auto; text-align: center; } </style> </head> <body> <script> window.onload = function() { var div = document.querySelector('div'); var DayArray = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; function showTime() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var date = now.getDate(); var hour = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var day = now.getDay(); if (seconds < 10) { seconds = '0' + seconds; } if (minutes < 10) { minutes = '0' + minutes; } var time = year + '年' + month + '月' + date + '日' + ' ' + hour + '时' + minutes + '分' + seconds + '秒' + ' ' + DayArray[day]; div.innerHTML = '当前系统时间：' + time; setTimeout(() => { showTime() }, 1000); } showTime(); } </script> <div></div> </body> </html>

浪奔的小三爷 2021-05-13

打赏
举报

我的window.onload是把script里面的元素都包括进去了啊，是页面加载完成后定义了showTime()，再调用啊

WEB应用开发者 2021-05-13

打赏
举报

你的showTime方法在未定义的时候被使用了。 <!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"> <title>Document</title> <style> div { width: 410px; height: 30px; border: 5px solid #F00; padding: 15px 10px; background-color: #0F0; margin: auto; text-align: center; } </style> </head> <body> <script> function showTime() { var div = document.querySelector('div'); var DayArray = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var date = now.getDate(); var hour = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var day = now.getDay(); if (seconds < 10) { seconds = '0' + seconds; } if (minutes < 10) { minutes = '0' + minutes; } var time = year + '年' + month + '月' + date + '日' + ' ' + hour + '时' + minutes + '分' + seconds + '秒' + ' ' + DayArray[day]; div.innerHTML = '当前系统时间：' + time; setTimeout("showTime()", 1000); } window.onload = function () { showTime(); } </script> <div></div> </body> </html> 改成这样就可以了。

浪奔的小三爷 2021-05-12

打赏
举报

引用 3 楼 LiuTianJi_00723 的回复:

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

我是在函数里面用setTimeout("showTime()",1000);难道不会一直调用吗?效果应该跟setInterval在函数外面调用一样啊

WEB应用开发者 2021-05-12

打赏
举报

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。