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 相关文章推荐
对于this和$(this)的个人理解
Sep 08 Javascript
jquery密码强度校验
Dec 02 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
js本地图片预览实现代码
Oct 09 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
layui导出所有数据的例子
Sep 10 Javascript
基于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
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php中的比较运算符详解
2013/10/28 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
如何理解Python中的变量
2020/06/01 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
留学自荐信写作方法
2014/01/27 职场文书
学习决心书范文
2014/03/11 职场文书
经典演讲稿汇总
2014/05/19 职场文书
课程设计的心得体会
2014/09/03 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书