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 相关文章推荐
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue实现记事本功能
Jun 26 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
详解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使用ob_start生成html页面的方法
2014/11/07 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
强制设为首页代码
2006/06/19 Javascript
javascript中对对层的控制
2006/12/29 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Django中的session用法详解
2020/03/09 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
主持人婚宴答谢词
2014/01/28 职场文书
市场营销调查计划书
2014/05/02 职场文书
经管应届生求职信范文
2014/05/18 职场文书
企业宣传标语
2014/06/09 职场文书
本溪水洞导游词
2015/02/11 职场文书
单身申明具结书
2015/02/26 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
浅谈Redis的几个过期策略
2021/05/27 Redis