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 相关文章推荐
jquery sortable的拖动方法示例详解
Jan 16 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
使用Apache的rewrite
2021/03/09 Servers
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python画折线图的程序
2018/07/26 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
优秀英文求职信范文
2015/03/19 职场文书
教师求职信怎么写
2015/03/20 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL