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 使用手册(四)
Sep 23 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
js读写json文件实例代码
Oct 21 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
了解JavaScript中let语句
May 30 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
深入讲解Java编程中类的生命周期
2016/02/05 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
学校三八妇女节活动情况总结
2014/03/09 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS