javascript实现数字倒计时特效


Posted in Javascript onMarch 30, 2016

本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下:

效果图:

javascript实现数字倒计时特效

<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://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>代码特效
</body>
</html>

如果觉得还不过瘾大家可以参考此专题进行深入学习:js倒计时汇总

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

Javascript 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 #Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 #Javascript
You might like
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jquery实现动态画圆
2014/12/04 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python功能键的读取方法
2015/05/28 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python调用java的jar包方法
2018/12/15 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python打开文件的方式有哪些
2020/06/29 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
大学四年职业生涯规划书范文
2014/01/02 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
公司活动方案范文
2014/03/06 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS