css代码：

.seconds{

height:50px;

background: #eee;

line-height: 50px;

border-radius: 5px;

text-align: center;

font-size: 18px;

font-family: 微软雅黑;

}

.seconds span{

font-size: 23px;

font-weight: bold;

color: #f00;

margin: 0 5px 0 5px;

}

#btn{

width:100px;

height:35px;

border: 0;

background: #333;

color: #fff;

border-radius: 6px;

cursor: pointer;

}

</style>

HTML代码：

用户注册成功，页面<span id="seconds">3</span>秒后即将跳转...

</div>

js代码：

//获取值

seconds=document.getElementById('seconds');

btn=document.getElementById('btn');

//点击按钮停止跳转

btn.οnclick=function(){clearInterval(shenTime)};

//赋初值

s=3;

shenTime=setInterval(function(){

//判断如果s=0就清除计时器并跳转

if(s==0)

{

//清除定时器并跳转

clearInterval(shenTime);

location="http://www.baidu.com";

}else{

seconds.innerHTML=--s;

}

},1000);

</script>

转载于:https://www.cnblogs.com/afew/p/8643546.html

js定时器倒计时特效相关推荐

html 倒计时特效,JS节日倒计时特效(精确到毫秒)
JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...
js实现倒计时特效（背景颜色随时间改变）
目录 1.实现效果 2.实现代码 1.实现效果 2.实现代码 <!DOCTYPE html> <html lang="en"><head>< ...
Vue、JS——定时器倒计时封装
/* 倒计时 @param onBefor 创建定时器前的回调函数, 返回true定时器才会开始,支持promise@param onUpdate 定时器每秒执行的回调函数@param second ...
Js定时器倒计时及堆叠问题解析（附源码）
今天,我们要实现的是一个超级小的demo,倒计时的简单实现,但是其中遇到的定时器的叠加问题,值得思考,所以写了这一篇文章.本人小白一个,多有不足,欢迎交流,共同进步. HTML+CSS部分这里的东西 ...
js制作的倒计时特效
"倒计时"这一短语来源于1927年德国的幻想故事片<月球少女>,在这部影片中,导演弗里兹为了增加艺术效果,扣人心弦,在火箭发射的镜头里设计了"9.8.7.-- ...
js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数.这里面涉及到了三个函数方法:setInterval().setTimeout().clea ...
原生JS活动倒计时实现思路
原生JS活动倒计时实现思路由于一个活动页面里面有多个活动,所以用map去操作每一个对象,只有一个活动的话就不需要遍历了,活动分为距离活动开始和距离活动结束两个倒计时,自己可按需求增减代码.还有就是I ...
分享66个JS时间轴特效，总有一款适合您
分享66个JS时间轴特效,总有一款适合您 66个JS时间轴特效下载链接:https://pan.baidu.com/s/1DD8EqIZjsmzpRB0pHkzUdg?pwd=pgw4 提取码:pg ...

js定时器倒计时特效

css代码：

HTML代码：

js代码：

js定时器倒计时特效相关推荐

最新文章

热门文章