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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
Javascript基础之数组的使用
May 13 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
在网页中控制wmplayer播放器
2006/07/01 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python3实现多线程聊天室
2018/12/12 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python 实现任务管理清单案例
2020/04/25 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
浅谈Python3中print函数的换行
2020/08/05 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
质检员的岗位职责
2013/11/15 职场文书
公司市场部岗位职责
2013/12/02 职场文书
安全员岗位职责范本
2015/04/11 职场文书
安全生产培训心得体会
2016/01/18 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Python面试不修改数组找出重复的数字
2022/05/20 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技