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中使用inline函数的问题
Mar 08 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
js实现验证码干扰(动态)
Feb 23 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JS控制表格隔行变色
2006/06/26 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
合作意向书范本
2014/03/31 职场文书
解除合同协议书
2014/04/17 职场文书
农村文化建设标语
2014/10/07 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
Golang map映射的用法
2022/04/22 Golang
MySQL添加索引特点及优化问题
2022/07/23 MySQL