我发的文章是给一些不太懂得人一些帮助，倘若你比我懂得多我希望你留下的是建议而不是不屑！...

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30713953

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ay-nzz/p/by_zzz.html

本文提供了三个JavaScript编程案例，包括图片自动切换、数字倒计时效果及抽奖页面的实现方法。这些案例展示了定时器、DOM操作等核心技能。

下面的三则案例是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="imgs\1.jpg" width="500px" height="500px" id="img"/>//imgs\1.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>