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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript date格式化示例
Sep 25 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
js验证密码强度解析
Mar 18 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
教你使用vscode 搭建react-native开发环境
Jul 07 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
JavaScript 基础问答三
2008/12/03 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
详解JS面向对象编程
2016/01/24 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python查找第k小元素代码分享
2013/12/18 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
Myholidays美国:在线旅游网站
2019/08/16 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
党校学习自我鉴定
2014/02/24 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
财务总监管理职责范文
2014/03/09 职场文书
出纳员岗位职责
2014/03/13 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
美丽人生观后感
2015/06/03 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
CSS极坐标的实例代码
2021/06/03 HTML / CSS
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
Python实现数据的序列化操作详解
2022/07/07 Python