大朗小程序定做_javascript完成5秒倒计时并跳转功用

javascript实现5秒倒计时并跳转功能       这篇文章主要为大家详细介绍了javascript实现5秒倒计时并跳转功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现5秒倒计时并跳转功能的具体代码,供大家参考,具体内容如下

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title 倒计时五秒 /title 
 script 
 //使用匿名函数方法
 function countDown(){
 var time = document.getElementById("Time");
 //alert(time.innerHTML);
 //获取到id为time标签中的内容,现进行判断
 if(time.innerHTML == 0){
 //等于0时清除计时
 window.location.href="/1000毫秒调用一次
 window.setInterval("countDown()",1000);
 /script 
 style 
 #Time,#p{
 font-size: 100px;
 text-align: center;
 /style 
 /head 
 body 
 p id="Time" 5 /p 
 /body 
 /html 

再为大家分享两段:

jQuery实现5秒倒计时

 script src="jquery-1.8.2.min.js" /script 
 script type="text/javascript" 
var i=5;
$(function(){
 setTimeout(function(){
 window.location.href='${ctx}/';
 },5000);//5秒后返回首页
 after();
//自动刷新页面上的时间
function after(){
 $("#time").empty().append(i);
 i=i-1;
 setTimeout(function(){
 after();
 },1000);
 /script 

点击按钮出现5秒倒计时js代码

 !DOCTYPE html 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title 无标题文档 /title 
 script type="text/javascript" src="js/jquery.js" /script 
 /head 
 body 
 input type="button" id="btn" value="免费获取验证码" / 
 script type="text/javascript" 
var countdown=5; 
function settime(val) { 
if(countdown != 0){
val.setAttribute("disabled", true); 
val.value="重新发送(" + countdown + ")"; 
countdown--; 
}else {
 val.removeAttribute("disabled"); 
 val.value="免费获取验证码"; 
 countdown = 5;
return;//避免无限循环
setTimeout(function() {
settime(val) 
},1000) 
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读