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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
JavaScript函数柯里化
Nov 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
2014年信用社工作总结
2014/11/25 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS