JS实现的网页倒计时数字时钟效果


Posted in Javascript onMarch 02, 2015

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>三水点靠木 3water.com 代码特效

</body>

</html>

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

Javascript 相关文章推荐
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
JS实现时间校验的代码
May 25 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
js实现在网页上简单显示时间的方法
Mar 02 #Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php去除HTML标签实例
2013/11/06 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python与Java间Socket通信实例代码
2017/03/06 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
思想政治自我鉴定
2013/10/06 职场文书
管理科学大学生求职信
2013/11/13 职场文书
校园安全教育广播稿
2014/02/17 职场文书
绿色学校实施方案
2014/03/31 职场文书
演讲稿的写法
2014/05/19 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
旷课检讨书范文
2015/01/27 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2016春季运动会开幕词
2016/03/04 职场文书