用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转，标签

文章介绍了如何使用JavaScript的setInterval和DOM操作实现图片轮播，倒计时功能以及利用referrer判断用户来源。通过示例展示了如何控制图片路径、计数器和页面跳转逻辑。

（1）图片轮转

   <script type="text/javascript" >

      var num=1;

      setInterval(function(){

         var dom=document.getElementById('myid');

     // var mysrc=dom.src;

     //alert(mysrc);

     if(num<5){

       num++;

      }else{

       num=1;

     }

     dom.src='images/'+num+'.jpg';

,1000);

   </script>

<body>
  <img src="images/1.jpg" width="500px" height="500px" id="myid"/>

</body>

这个要用到setInterval(调用的函数名称,周期性调用函数之间间隔的毫秒数);
获取路径：document.getElementById(绑定的Id);

想实现轮转，我们想到的就是改变图片的路径，这就用到了判断，因为我们就几张图片，就举个简单的例子！

想要轮转更多只需要把num数变一下即可。

（2）倒计时10s

<script type="text/javascript">

   windom.onload=function(){

    //获取开始按钮对象

    var mystrat=document.getElementById('stratid');

   //获取停止按钮对象

    var mystop=document.getElementById('stopid');

    //当点击开始时发生

     var date=0;

    mystrat.onclick=function(){

      date=setInterval(stratnum,1000);

    };

    //当点击停止时发生

   mystop.onclick=function(){

      clearInterval(date);

   };

      //时间倒数方法

    function stratnum(){

      var dom=document.getElementById('myspan');

      //alert(dom);

      var num=dom.innerText;

      if(num>0){

        num--;

      }

     dom.innerText=num;

    };

}


</script>

<body>

   <input type="buttom" id="stratid" value="開始">

   <input type="button" id="stopid" value="停止">

   <span id="myspan">10</span>

</body>

想要達到倒計時的效果，我們要先考慮怎麼獲取當前的數，用到的方法還是document.getElementById(獲取對象的Id);
這樣我們就可以進行判斷了，只要滿足我們的條件即可。

在這裡還有一個知識點，就是先獲取的是點擊的對象，然後再根據它們響應的事件作出具體的操作。

（3）referrer的使用

2.html

<body>

<a href="2.html"> 馬上抽獎</a>

</body>

1.html

<script type="text/javascript">

  windom.onload=funcction(){

  var mystr=document.referrer;

  if(mystr){

    var dom=document.getElementById('mydiv'); 

    dom.style.display='none';

}else{

 setInterval(function(){

    var dom = document.getElementById("myspan");
    var num = dom.innerText;
    if (num > 1) {
     num--;
     dom.innerText = num;
    } else {
     location.href = "2.html";
    }

},1000);  

}  

};
</script>

<body>
    <div id="mydiv">
        <span style="color:red;" id="myspan">5</span>秒后跳转到登陆页面
    </div>
</body>

先要获取从上一个网页过来的路径：document.referrer;如果得到的路径为空，说明不是从登陆页面过来的，
就要进行判断该显示什么，不该显示什么，

获取秒数：document.ElementById('myspan');，

这个时候就需要我们进行判断了，秒数不可能为负，当为零时跳转到登录页面。

反之，就是正常从登录页面过来的。

用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转， 标签

用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转，标签