页面实现多个定时器js,php结合

最新推荐文章于 2022-07-14 09:40:10 发布

早起的鸟儿灬

最新推荐文章于 2022-07-14 09:40:10 发布

阅读量2k

点赞数

分类专栏： js php 文章标签：倒计时

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

php

1 篇文章 0 订阅

订阅专栏

// 多定时器

js:

(function($){

$.fn.yomi=function(){
var data="";
var _DOM=null;
var TIMER;
createdom =function(dom){
_DOM=dom;
data=$(dom).attr("data");//获取字符串
data=parseInt(data);//转化成数字
$(_DOM).append("<p class='yomi'></p>")
reflash();
};
reflash=function(){
var range = data--,//每秒减1
secday = 86400, sechour = 3600,
days = parseInt(range/secday),
hours = parseInt((range%secday)/sechour),
min = parseInt(((range%secday)%sechour)/60),
sec = parseInt((range%secday)%sechour)%60;
$(_DOM).html('距离结束：'+nol(days)+"天"+nol(hours)+"时"+nol(min)+"分"+nol(sec)+"秒");
if(sec<=0&&hours<=0&&min<=0&&days<=0){
clearInterval(TIMER)
$(_DOM).html('已结束')
}

};
TIMER = setInterval( reflash,1000 );
nol = function(h){
return h>9?h:'0'+h;
}
return this.each(function(){
var $box = $(this);
createdom($box);
});
}
})(jQuery);
$(function(){
$(".yomibox").each(function(){
$(this).yomi();
});

});

html:

<p class="yomibox" data="{$over}"></p> //{$over}获取php后台的时间差

php:

//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set('PRC');
//date_default_timezone_set("Asia/Hong_Kong"); //地区
$time = $auc->field('endtime')->where('pid=1')->select(); //这里举例取了一条结束时间

$nowtime = time(); //服务器当前时间戳

if ($time[0]['endtime']>=$nowtime){ //$time[0]['endtime']查询出来的是2维数据

$overtime = $time[0]['endtime']-$nowtime; //实际剩下的时间（单位/秒）时间差
}else{
$overtime=0;
}
$this->over=$overtime; //over返回给前台的时间差

//单定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>倒计时</title>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
(function() {
var box = document.getElementById('box');
// 缓存服务器时间
serverTime = null;
let fn = () => {
// 每秒加 1000
serverTime = serverTime + 1000,
// 获取时间戳
tartime = new Date('2018/8/21 9:55:00').getTime();
// 时间差
spanTime = tartime - serverTime
// 计算分钟秒
if　(spanTime <= 0) {
box.innerHTML = '抢购已经开始啦！！！'
clearInterval(autotimer);
return;
}
// 加 0 操作
let hours = Math.floor(spanTime / (1000 * 60 * 60 ));
spanTime -= hours*3600000;
let minus = Math.floor(spanTime / (1000 * 60));
spanTime -= minus * 60000;
let second = Math.floor(spanTime / 1000);
hours < 10 ? hours = '0' + hours : hours;
minus < 10 ? minus = '0' + minus : minus;
second < 10 ? second = '0' + second : second;
box.innerHTML = `距离开抢：${hours}:${minus}:${second}`
}
let autotimer = setInterval(fn,1000);
// 服务器获取时间
let getServerTime = () => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
// 不成功 return
if(!/^(2|3)\d{2}$/.test(xhr.status)) return;
if(xhr.readyState === 2) {
// 将服务器时间转换为时间戳
serverTime = new Date(xhr.getResponseHeader('date')).getTime();
fn();
}
}
xhr.open("head",'temp.php',true);
xhr.send(null);
/*
* 最终目的：缩小时间差
* 1、服务器时间响应头就有，只需要获取响应头信息就行，所以请求方式为head即可
2、必须是异步，同步我们无法在状态2或者3的时候做一些处理，响应头在2的时候就可以获取了，所以异步
*/
}
getServerTime();
})()
</script>
</body>
</html>

早起的鸟儿灬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面实现多个定时器js,php结合

// 多定时器js:(function($){$.fn.yomi=function(){var data="";var _DOM=null;var TIMER;createdom =function(dom){_DOM=dom;data=$(dom).attr("data");//获取字符串data=parseInt(data);//转化成数字$(_DOM).appe...
复制链接

扫一扫

专栏目录