下面的三则案例是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>