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 相关文章推荐
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
基于文本的留言簿
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
详解jQuery事件
2017/01/13 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
Python编程中flask的简介与简单使用
2018/12/28 Python
python DataFrame 取差集实例
2019/01/30 Python
Python中base64与xml取值结合问题
2019/12/22 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
全球工业:Global Industrial
2020/02/01 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
心得体会的写法
2014/09/05 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
python基础之while循环语句的使用
2021/04/20 Python
MySQL约束超详解
2021/09/04 MySQL
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
python微信智能AI机器人实现多种支付方式
2022/04/12 Python