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鼠标点击图片切换效果代码分享
Aug 26 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
ES6中的Javascript解构的实现
Oct 30 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
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
Vue axios设置访问基础路径方法
2018/09/19 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
交通专业个人自荐信格式
2013/09/23 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
三年级语文教学反思
2014/02/01 职场文书
防沙治沙典型材料
2014/05/07 职场文书
车间安全生产标语
2014/06/06 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python