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的返回顶部效果(兼容IE6)
Jan 17 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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中如何定义和使用常量
2013/02/28 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python新手学习可变和不可变对象
2020/06/11 Python
Keras实现DenseNet结构操作
2020/07/06 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
2014年学生工作总结
2014/11/20 职场文书
小学语文复习计划
2015/01/19 职场文书
英语导游词
2015/02/13 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
青涩记忆观后感
2015/06/18 职场文书
初中数学教学随笔
2015/08/15 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript