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的时候写的学习笔记
Dec 30 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python中的字典遍历备忘
2015/01/17 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
pandas 空数据处理方法详解
2019/11/02 Python
python 实现客户端与服务端的通信
2020/12/23 Python
python中random模块详解
2021/03/01 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
XML文档面试题
2015/08/05 面试题
设计部经理的岗位职责
2013/11/16 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
英文请假条
2014/04/11 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
台风停课通知
2015/04/24 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL