js对象 示例

一：时钟

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>时钟</title>
 8 </head>
 9 <body onload="startTime()">
10     <script>
11         function startTime(){
12             var d = new Date();
13             var h = d.getHours();
14             var m = d.getMinutes();
15             var s = d.getSeconds();
16             m = checkTime(m);
17             s = checkTime(s);
18             
19             document.getElementById("time").innerHTML = h + ":" + m  + ":" + s + " ";
20             setTimeout(startTime,1000);
21         }
22         //分 秒显示个位数加0
23         function checkTime(i){
24             if(i < 10) {
25                 i = "0" + i;
26             }
27             return i;
28         }
29     </script>
30 
31     <div id="time"></div>
32 </body>
33 </html>
View Code

 

 

计时器

方法：

setInterval

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计时器</title>
</head>

<body>
    <div id="timeClock"></div>
    <button id="stop" onclick="stopTime()">停止计时</button>
    <script>
        //setInterval() 间隔指定的毫秒数不停地执行指定的代码
        //clearInterval() 停止setInterval方法执行的代码
        //指定刷新页面
        var mytime = setInterval(function () {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("timeClock").innerHTML = t;
        }, 1000);

        function stopTime(){
            clearInterval(mytime);
        }
    </script>
</body>

</html>

 

 

setTimeout
  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setTimeout</title>
</head>

<body onload="myTime()">
    <button id="stopAlert" onclick="stopAlert()">停止对话框弹出</button>
    <script>
        //间隔三秒弹出对话框hello 采用回调该函数方法  点击按钮清除
        var t;
        function myTime() {
            alert("hello");
            t = setTimeout(function () {
                myTime();
            }, 3000);
        }
        function stopAlert() {
            clearTimeout(t);
        }
    </script>
</body>

</html>

 

 
区别：setInterval 自己执行  setTimeout 延时执行
 
 
 

 

posted @ 2018-05-15 09:54  wuyueping  阅读(188)  评论(0)  编辑  收藏  举报