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 相关文章推荐
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
使用vue实现各类弹出框组件
2019/07/03 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python实现针对中文排序的方法
2017/05/09 Python
django初始化数据库的实例
2018/05/27 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
服装店营销方案
2014/03/10 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL