JS 实现倒计时数字时钟效果【附实例代码】


Posted in Javascript onMarch 30, 2016

这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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>码农教程 www.manongjc.com 代码特效
</body>
</html>

以上这篇JS 实现倒计时数字时钟效果【附实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
Javascript的this详解
Mar 23 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
详解JavaScript for循环中发送AJAX请求问题
Jun 23 #Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
You might like
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
php读取本地json文件的实例
2018/03/07 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python复制文件到指定目录的实例
2018/04/27 Python
django 自定义过滤器的实现
2019/02/26 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
人力资源部培训专员岗位职责
2014/01/02 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
护士的自我鉴定
2014/02/07 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
人事部专员岗位职责
2014/03/04 职场文书
中学生演讲稿
2014/04/26 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
北京颐和园导游词
2015/01/30 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书