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

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

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

  • 相关阅读:
    全国计算机等级考试二级教程-C语言程序设计_第10章_字符串
    网易云课堂_程序设计入门-C语言_第六章:数组_2鞍点
    arcgis api for silverlight开发系列之二:缓存图层与动态图层及图层总结 .
    VS2010程序打包操作(超详细的)
    地图三要素
    创业建议
    写代码时,必须注意“异常处理”
    WPF——RenderTransform特效
    MVVM特点、源(数据)与目标(如:控件等)的映射
    使用触发器定义 WPF 控件的行为
  • 原文地址:https://www.cnblogs.com/wl0000-03/p/6039494.html
Copyright © 2011-2022 走看看