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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
会计师职业生涯规划范文
2014/02/18 职场文书
《满井游记》教学反思
2014/02/26 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
react国际化react-intl的使用
2021/05/06 Javascript
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL