1、 location
在之前进行页面跳转的时候我们只能用a标签的href属性
和form表单的action属性来进行页面的跳转,
js中的location也可以改变页面的地址,实现页面跳转。
Window.location:表示当前窗口的地址栏
案例1、实现5秒钟倒计时结束后自动调转页面效果。
<script type="text/javascript"> var i = 5; function dd() { var mm = document.getElementById("mm"); mm.innerHTML = i; i--; if (i == 0) { window.location = "Luck.jsp"; }; } window.onload = function() { setInterval(dd, 1000); }; </script> </head> <body> <h1> 倒计时<span id="mm"></span>秒后,自动跳转到首页 </h1> </body> </html>
2、 Confirm
confirm就是一个弹出警示框,点下确定就继续执行,点下取消就返回什么也不做,多用在执行删除操作的时候,避免用户手抖误删除。
<script type="text/javascript"> function test(){ var result=window.confirm("是否确认删除?"); if(result){ location="deleAction?id=1"; } } </script> </head> <body> <input type="button" value="删除" onclick="test()"/> </body> </html>
超链接如何实现执行js代码:
3、 定时器
定时器就是定时去执行一些任务,主要有两个函数,SetTimeout和setInterval。
定时器的常用案例主要有,定时跳转、轮播图效果、抽奖活动等…
我们可以通过window对象的定时器定时去执行一些js函数。
setTimeout(函数,时间1000); 等1000毫秒后去执行函数里面的代码。
用法:
setTimeout(function(){ Alert(1); },1000);
Var dsq=setInterval(函数,时间1000);
两者的区别:
SetTimeout的第一个参数函数只会执行一次。
setInterval的第一个参数函数会每个1000毫秒就执行一次。
停止定时器:
clearInterval(dsq);
定时器的使用案例:
<script type="text/javascript"> var dsq; window.onload=start; function start(){ if(!dsq){ dsq=setInterval(function(){ console.log("hello"); },2000);//定时去做一些事情 } } function stop(){ //停掉定时器 window.clearInterval(dsq); dsq=null; } </script> </head> <body> <input type="button" value="停掉定时器" onclick="stop()"/> <input type="button" value="开始定时器" onclick="start()"/> </body> </html>
案例3,使用定时器实现抽奖效果:
<script type="text/javascript"> var stu = ["阿珂","康康","美女","爆棚","小马"]; var i=0,s; function start(){ if(!s){ s=setInterval(function(){ var who = document.getElementById("who"); who.innerHTML=stu[i]; i++; if(i==stu.length){ i=0; }; },500); }; }; function stop(){ window.clearInterval(s); }; </script> </head> <body> <h1 id="who" style="color: red">Who?</h1> <input type="button" value="开始抽奖" onclick="start()"> <input type="button" value="停止" onclick="stop()"> </body> </html>
案例4,使用定时器实现轮播图自动切换图片操作:
<script type="text/javascript"> var img = ["img/m1.jpg","img/m2.jpg","img/m3.jpg"]; var i=1; function changeImg(){ var obj = document.getElementById("play"); obj.src=img[i]; i++; if(i==img.length){ i=0; } }; window.onload= function(){ setInterval(changeImg, 2000); }; </script> </head> <body> <div style="text-align: center;"> <img alt="" src="img/m1.jpg" width="500px;" height="auto" id="play"> </div> </body> </html>