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

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

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

  • 相关阅读:
    day7 面向对象 静态方法 类方法 属性方法 类的特殊成员方法 元类 反射 异常处理
    day6 面向对象 封装 继承 多态 类与实例在内存中的关系 经典类和新式类
    day5 time datetime random os sys shutil json pickle shelve xml configparser hashlib subprocess logging re正则 python计算器
    kafka常用操作命令
    linux基础
    django学习1——初识web应用程序
    mysql数据库(三)——pymysql模块
    mysql数据库(二)——表的查询
    mysql数据库(一)
    Python常用模块——re模块
  • 原文地址:https://www.cnblogs.com/wl0000-03/p/6039494.html
Copyright © 2011-2022 走看看