javascript实现数字倒计时特效


Posted in Javascript onMarch 30, 2016

本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下:

效果图:

javascript实现数字倒计时特效

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现的倒计时时钟</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(https://3water.com/jscss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null;
aInput.onclick = function ()
{
this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' ? "cancel" : '';
};
function format(a)
{
return a.toString().replace(/^(\d)$/,'0$1')
}
function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName("span");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain <= 0)
{
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}
</script>
</head>
<body>
<div id="countdown">
<span>01</span>分钟<span>40</span>秒
<input type="button" value="" />
</div>代码特效
</body>
</html>

如果觉得还不过瘾大家可以参考此专题进行深入学习:js倒计时汇总

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
javascript 闭包详解
Jul 02 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
微信小程序实现弹出层效果
May 26 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 #Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 #Javascript
You might like
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
根据配置文件加载js依赖模块
2014/12/29 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python实现XML解析的方法解析
2019/11/16 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python新手学习可变和不可变对象
2020/06/11 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
质检部经理岗位职责
2014/02/19 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书