用javascript编写的小游戏(getElementById , setInterval , clearInterval , window.onload , innerText 和页面跳转, 标签的使用)

(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');,

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

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

原文地址:https://www.cnblogs.com/wl0000-03/p/6039494.html