js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果。分享给大家供大家参考。具体实现方法如下:
代码如下:
javascript实现的倒计时时钟
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(//www.gxlcms.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;}
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));
}
}
01分钟40秒
脚本之家 www.gxlcms.com 代码特效
希望本文所述对大家的javascript程序设计有所帮助。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果相关推荐
- js php 获取时间倒计时_,JS实现获取时间和设置倒计时代码分享
本文主要和大家分享JS实现获取时间和设置倒计时代码,希望能帮助到大家. 只做笔记记录一下,主要用到Date 和 setInterval 第一个倒计时的设置: var timeBox = documen ...
- js实现倒计时,定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
- html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
- 利用Docker设置Node.js
docker是一个开源的应用容器引擎,可以为我们提供安全.可移植.可重复的自动化部署的方式.docker采用虚拟化的技术来虚拟化出应用程序的运行环境.如上图一样.docker就像一艘轮船.而轮船上面的 ...
- 团购、定时抢购倒计时js版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 如何使用Node.js,Express和MongoDB设置GraphQL服务器
by Leonardo Maldonado 莱昂纳多·马尔多纳多(Leonardo Maldonado) 如何使用Node.js,Express和MongoDB设置GraphQL服务器 (How to ...
- 建站倒计时html,网页短时间维护倒计时js代码
网页短时间维护倒计时js代码 - 懒人建站-jquery特效-建站素材 http:/www.51xuediannao.com/ html{*overflow:auto;_overflow-x:hidd ...
- Node JS环境设置– Node.js安装
In my previous post, we have discussed about "Introduction to Node JS Platform". Now we ha ...
- Numeral.js 是一个用于格式化和数字四则运算的js 库
1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包括中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...
最新文章
- 微信小程序wx.request内调用setData方法
- java reference详解_Java Reference详解
- CentOs简单分区方案
- 笔记本移交_创建完美的设计移交
- .NET Core/Framework 创建委托以大幅度提高反射调用的性能
- 结合使用 Draft 与 Tencent Kubernetes Engine (TKE)
- 服务器安全维护包含,服务器安全维护包含
- linux系统管理Linux系统实验,实验三 linux系统管理
- 无法删除sqlserver的jobs的方式
- es6 SharedArrayBuffer对象
- epic打开一直闪_教你用意派Epub360做酷炫的快闪H5!(附快闪H5模板)
- IT男,程序猿在婚恋市场有多受欢迎?
- Linux程序包rpm、yum、apt-get
- chrome regedit 崩溃_谷歌浏览器网页崩溃的解决方法
- 柿饼UI入门课程第一周作业
- 设计模式系列:搞懂装饰器模式,增加自身技能
- 【SVAC】SVAC标准简介
- 海康、大华网络摄像机RTSP流接入流媒体实现WEB无插件直播通过视频广场观看实时直播
- MacBook 查询电池健康情况、电池损耗、当前电量的方法
- Android 微信抢红包插件