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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
javascript实现日期格式转换
Dec 16 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
完美解决axios跨域请求出错的问题
Feb 05 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遍历二维数组的代码
2011/04/22 PHP
php存储过程调用实例代码
2013/02/03 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
详解Python学习之安装pandas
2019/04/16 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
详解numpy的argmax的具体使用
2019/05/27 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
银行门卫岗位职责
2013/12/29 职场文书
决心书标准格式
2014/03/11 职场文书
调查研究项目计划书
2014/04/29 职场文书
先进基层党组织材料
2014/12/25 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python