javascript实现数字倒计时特效
更新时间：2016年03月30日 14:39:05 作者：码农教程
这篇文章主要介绍了javascript实现网页倒计时数字时钟效果，是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现的网页倒计时数字时钟效果，分享给大家供大家参考，具体实现方法如下：
效果图：
<html>
<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://www.jb51.net/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>代码特效
</body>
</html>
如果觉得还不过瘾大家可以参考此专题进行深入学习：js倒计时汇总
希望本文所述对大家学习javascript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js+html+css实现简单电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
这篇文章主要介绍了Js 利用正则表达式和replace函数获取string中所有被匹配到的文本，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-10-10
这篇文章主要为大家介绍了Express框架中_router的对象数据结构使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
下面小编就为大家带来一篇原生JS实现图片轮播与淡入效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，这篇文章主要介绍了Object.defineproperty方法,需要的朋友可以参考下2022-12-12
JS 中的类Public,Private 和 Protected详解
这篇文章主要介绍了JS中的类Public,Private和Protected详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)
Array 是javascript中经常用到的数据类型。javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据。本文主要讨论javascript中数组的声明、转换、排序、合并、迭代等等基本操作2023-03-03
本文主要介绍了JavaScript this绑定与this指向问题的解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
天我们来聊聊如何使用JS来创建一个实时的小闹钟,这个小闹钟十分的有趣,小伙伴们可以运行一下,看看跟你电脑上的时间是否对的上呢,文章通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于Three.js中矩阵和向量使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
最新评论