zoukankan      html  css  js  c++  java
  • 用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');,

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

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

  • 相关阅读:
    2020.10.23 19级training 补题报告
    2020.10.17 天梯赛练习 补题报告
    2020.10.16 19级training 补题报告
    2020.10.9 19级training 补题报告
    2020.10.10 天梯赛练习 补题报告
    2020.10.3 天梯赛练习 补题报告
    2020.10.2 19级training 补题报告
    第十届山东省ACM省赛复现补题报告
    VVDI Key Tool Plus Adds VW Passat 2015 Key via OBD
    Xhorse VVDI Prog Software V5.0.3 Adds Many MCUs
  • 原文地址:https://www.cnblogs.com/wl0000-03/p/6039494.html
Copyright © 2011-2022 走看看