js网页实时倒计时精确到秒级


Posted in Javascript onFebruary 10, 2014

一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样。js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来帮助!

效果如下:
js网页实时倒计时精确到秒级 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
.leave_time_font{margin-left:35%;} 
#fo{margin-left:32%;} 
</style> 
<title>WoYaoNi.CN-倒计时</title> 
</head> 
<body> 
<h1>WoYaoNi.CN </h1> 
<script src="./jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
var _countSeconds = 0; 
function _countDown(){ 
_countSeconds ++; 
$('input.surplustime').each(function(index, element) { 
var $this = $(this); 
var _totalTime = Number($this.val()) - _countSeconds; 
var _day = parseInt(_totalTime/86400); 
var _hours = parseInt(_totalTime%86400/3600); 
var _minutes = parseInt(_totalTime%86400%3600/60); 
var _seconds = parseInt(_totalTime%86400%3600%60); 
var _strLite = '<span class="day">'+_day+'</span>天<span class="hour">'+_hours+'</span>小时<span class="minutes">'+_minutes+'</span>分<span class="seconds">'+_seconds+'</span>秒'; 
var _str = '倒计时:'+_strLite; 
if($this.next('p.daojishi').length > 0){ 
$this.next('p.daojishi').html(_str); 
}else if($this.next('p.leave_time_font').length > 0){ 
$this.next('p.leave_time_font').html(_strLite); 
} 
}); 
} 
setInterval(_countDown, 1000); 
}) 
</script> 
</head> 
<body> 
<?php 
ini_set('date.timezone','Asia/Shanghai'); 
$currenttime = time(); 
$a = strtotime('2014-2-14 00:00'); 
$b = $a-$currenttime; 
?> <div id="djs"> 
<div id="fo">小伙伴们距离情人节只剩:</div> 
<input type="hidden" name="surplustime" class="surplustime" value="<?php echo $b; ?>" /> 
<p class="leave_time_font"><span class="day">0</span>天<span class="hour">0</span>小时<span class="minutes">0</span>分<span class="seconds">0</span>秒</p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
JS请求servlet功能示例
Jun 01 Javascript
iview table高度动态设置方法
Mar 14 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
javaScript 页面自动加载事件详解
Feb 10 #Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 #Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 #Javascript
使用js实现关闭js弹出层的窗口
Feb 10 #Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 #Javascript
js实现省市联动效果的简单实例
Feb 10 #Javascript
You might like
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python实现大学人员管理系统
2019/10/25 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
大学生个人推荐信范文
2013/11/25 职场文书
董事长岗位职责
2013/11/30 职场文书
大门门卫岗位职责
2013/11/30 职场文书
2014年计生标语
2014/06/23 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
公司证明怎么写
2014/09/22 职场文书
高三英语复习计划
2015/01/19 职场文书
第一书记观后感
2015/06/08 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS