20190710-上午js计时器和window对象

最新推荐文章于 2024-07-25 15:19:10 发布

Javee-Y

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量118

点赞数 1

分类专栏： js&jquery 文章标签： js 前端

本文链接：https://blog.csdn.net/qq_38901340/article/details/96451509

版权

js&jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

20190710-上午js计时器和window对象

——Javee

使用setTimeout或者setInterval每隔一秒在屏幕分别输出hello和world:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <script>
               var second=0;
               var myTime;              
               
               function print(){
                    second++;                
                    var div = document.createElement("div");
                  
                    if(second % 2 == 1){
                         div.innerHTML = "hello";
                    }else{
                         div.innerHTML = "world";
                    }              
                    document.body.appendChild(div);
               }
              
               function start(){
                    if(!myTime){                                    //确定没开始的情况下才开始（这个bug很容易被忽视）
                         myTime = setInterval(print,1000);                      
                    }
               }
              
               function stop(){
                    clearInterval(myTime);
                    myTime = undefined;
               }    
              
          </script>
     </head>
     <body>
          <button onclick="start()">start/continue</button>
          <button onclick="stop()">stop</button>
          <button onclick="location.reload()">frush</button>
     </body>
</html>

刚开始时，将创建节点写在了函数外面，导致每次调用函数时都没用创建新的节点，只在一个div里面介个显示（这里是变量作用域的问题，因为只在最开始的时候只创建了一个div），写在函数里面则每次调用函数都可以创建一个新的div.

setTimeout做一个电子钟：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <script>
               window.onload = function() {
                    function getTime() {
                         var time = new Date();
                         var year = time.getFullYear();
                         var month = time.getMonth() < 9 ?  "0" + (time.getMonth() + 1) : (time.getMonth() + 1);
                         var date = time.getDate() < 10 ?  "0" + time.getDate() : time.getDate();
                         var hour = time.getHours() < 10 ?  "0" + time.getHours() : time.getHours();
                         var minute = time.getMinutes() < 10  ? "0" + time.getMinutes() : time.getMinutes();
                         var second = time.getSeconds() < 10  ? "0" + time.getSeconds() : time.getSeconds();
                         var day = time.getDay();
                         switch (day){
                              case 1:
                                   day = "一";
                                   break;
                              case 2:
                                   day = "二";
                                   break;
                              case 3:
                                   day = "三";
                                   break;
                              case 4:
                                   day = "四";
                                   break;
                              case 5:
                                   day = "五";
                                   break;
                              case 6:
                                   day = "六";
                                   break;
                              case 7:
                                   day = "日";
                                   break;
                         }
                         document.getElementById("time").innerText = (year + "-" +  month + "-" + date + "  " + hour + ":" + minute + ":" +  second + "  星期" + day);
                         setTimeout(getTime, 1000);
                    }
                    getTime();
               }
          </script>
     </head>
     <body>
          <div id="time"></div>
     </body>
</html>

window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮向前相同
history.go() - 括号里面参数可以为正数，也可以为负数，分别表示前进或者后退的页数

window.location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活。

location.href         //返回当前页面的URL
location.pathname         //返回URL的路径名
location.assign()         //加载新的文档
location.reload()        //重新加载页面

Javee-Y

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20190710-上午js计时器和window对象

20190710-上午js计时器和window对象 ——Javee使用setTimeout或者setInterval每隔一秒在屏幕分别输出hello和world:<!DOCTYPE html><html><head><meta c...
复制链接

扫一扫

专栏目录