zoukankan      html  css  js  c++  java
  • 我发的文章是给一些不太懂得人一些帮助,倘若你比我懂得多我希望你留下的是建议而不是不屑!

    下面的三则案例是JavaScript中比较具有代表性的案例,希望大家可以抽时间看看。谢鞋

    案例一:

     1 <title>北京图片切换</title>
     2     <script type="text/javascript">
     3         var num = 1;
     4         function start() {
     5             if (num < 5) {
     6                 num++;
     7             } else {
     8                 num = 1;
     9             }
    10             var dom = document.getElementById("img");
    11             dom.src = 'imgs/'+num+'.jpg';
    12         }
    13         setInterval(start,1000);
    14      
    15     </script>
    16 </head>
    17 <body>
    18  <img src="imgs1.jpg" width="500px" height="500px" id="img"/>//imgs1.jpg是提前准备好的图片

    案例二:

     1   <title>数字倒计时效果</title>
     2     <script type="text/javascript">
     3         var t1;
     4         window.onload = function () {
     5             var btnStart = document.getElementById("btnStart");
     6             var btnStop = document.getElementById("btnStop");
     7 
     8             btnStop.onclick = function () {
     9                 clearInterval(t1);
    10             };
    11 
    12             btnStart.onclick = function () {
    13                 t1 = setInterval(start, 1000);
    14             };
    15         };
    16         function start() {
    17             var dom = document.getElementById("msg");
    18             var num = dom.innerText;
    19             if (num > 0) {
    20                 num--;
    21             } 
    22             
    23             dom.innerText = num;
    24         }
    25     </script>
    26 </head>
    27 <body>
    28     <input type="button" value="开始" id="btnStart"/> 
    29     <input type="button" value="结束" id="btnStop"/> 
    30     <div id="msg">10</div>
    31 </body>

    案例三:

     1   <title>抽奖页面</title>
     2      <script type="text/javascript">
     3          window.onload = function () {
     4              var result = document.referrer;
     5             if (result) {
     6                  var mydiv = document.getElementById("mydiv");
     7                  mydiv.style.display = "none";
     8              } else {
     9                  var data = setInterval(function () {
    10                      var obj = document.getElementById("myspan");
    11                      var num = obj.innerHTML;
    12                      if (num > 1) {
    13                          num--;
    14                      } else {
    15                          clearInterval(data);
    16                          location.href = "http://baidu.com";
    17                      }
    18                      obj.innerText = num;
    19                  }, 1000);
    20 
    21              }
    22          };
    23 
    24     </script>
    25 </head>
    26 <body>
    27     <div id="mydiv">
    28         <span style="color:red" id="myspan">5</span>秒偶跳转
    29     </div>
    30    
    31 </body>
     1  <title>领奖页面</title>
     2     <script type="text/javascript">
     3         var t1;
     4         window.onload = function () {
     5             var myref = document.referrer;
     6             if (myref) {
     7                 var dom = document.getElementById("mydiv");
     8                 dom.style.display = "none";
     9             } else {
    10                 t1 = setInterval(stop, 1000);
    11             }
    12         };
    13         function stop() {
    14             var spandom = document.getElementById("myspan");
    15             var num = spandom.innerText;
    16             if (num > 1) {
    17                 num--;
    18             } else {
    19                 clearInterval(t1);
    20                 location.href = "http://localhost:5080/01-0401login.html";
    21              }
    22             spandom.innerText = num;
    23         }
    24     </script>
    25 </head>
    26 <body>
    27    <div id="mydiv">
    28        <span style="color:red" id="myspan">5</span>跳转
    29        我是领奖页面
    30  </div>
    31 </body>
  • 相关阅读:
    Android sdk 下载路径
    centos修改用户用户组
    centos7 通过shell切换root用户
    java 服务上传图片到linux没有读写权限
    Mybatis第二天
    Mybatis第一天
    反射
    注解
    多线程第二天
    java---过滤器、监听器
  • 原文地址:https://www.cnblogs.com/ay-nzz/p/by_zzz.html
Copyright © 2011-2022 走看看