JS实现的网页倒计时数字时钟效果

更新时间：2015年03月02日 15:02:18 作者：站长学院

这篇文章主要介绍了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://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>脚本之家 www.jb51.net 代码特效

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

uniapp上传本地图片以及以二进制流的方式上传
这篇文章主要给大家介绍了关于uniapp上传本地图片以及以二进制流的方式上传的相关资料,最近在自己写一个uniapp的项目,刚好遇到了上传图片到服务器的功能,这里总结一下,需要的朋友可以参考下
2023-07-07
JavaScript基于libgif.js实现控制gif动画帧
这篇文章主要为大家详细介绍了JavaScript如何利用libgif.js插件控制gif动画帧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-02-02
关于页面被拦截的问题
先来看一下几个常用浏览器的拦截设置
2010-02-02
js实现简易计数器功能
这篇文章主要为大家详细介绍了js实现计数器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
three.js中正交与透视投影相机的实战应用指南
在three.js中摄像机的作用就是不断的拍摄我们创建好的场景,然后通过渲染器渲染到屏幕中,下面这篇文章主要给大家介绍了关于three.js中正交与透视投影相机应用的相关资料,需要的朋友可以参考下
2022-08-08
JS模拟Dialog弹出浮动框效果代码
这篇文章主要介绍了JS模拟Dialog弹出浮动框效果代码,涉及JavaScript可拖动窗口的创建及布局相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件，这篇文章主要介绍了webpack里使用jquery.mCustomScrollbar插件的方法，感兴趣的小伙伴们可以参考一下
2018-05-05
Axios常见配置选项跨域详解
axios基于http客户端的promise，面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持，这篇文章主要介绍了axios常见配置选项跨域,需要的朋友可以参考下
2022-11-11
有趣的script标签用getAttribute方法来自脚本吧
有趣的script标签用getAttribute方法来自脚本吧...
2007-03-03
JavaScript实现数组对象转换为键值对的四种方式
本文探讨了将包含 {icon: "abc", url: "123"} 形式对象的数组转换为键值对形式的四种方法,并从实现方式的简洁性、可读性和性能角度进行了分析比较,感兴趣的朋友可以参考下
2024-02-02