JavaScript计时器在多个实例上不工作
下面是一个循环的结果,我想运行计时器来计算每个循环结果的设置时间JavaScript计时器在多个实例上不工作,javascript,php,jquery,Javascript,Php,Jquery,下面是一个循环的结果,我想运行计时器来计算每个循环结果的设置时间 <span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span> <span id="time" data-time="{{ $user->created_at->add
<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>
<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>
<span id="time" data-time="{{ $user->created_at->addHours(config('app.timer')) }}" data-url="{{ url('/TimePay/'.$user->id)}}"></span>
计时器脚本:
$(document).ready(function(){
$('[data-time]').each(function() {
console.log($(this))
var $this = $(this),
finalTime = $(this).data('time'),
url = $(this).data('url')
// Set the date we're counting down to
var countDownDate = new Date(finalTime).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in an element with id="demo"
document.getElementById("time").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("time").innerHTML = "EXPIRED";
}
}, 1000);
})
})
$(文档).ready(函数(){
$(“[数据时间]”)。每个(函数(){
console.log($(this))
变量$this=$(this),
finalTime=$(this).data('time'),
url=$(this.data('url'))
//确定我们倒计时的日期
var countDownDate=新日期(finalTime).getTime();
//每1秒更新一次倒计时
var x=setInterval(函数(){
//获取今天的日期和时间
var now=new Date().getTime();
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在;
//天、小时、分钟和秒的时间计算
变量天数=数学楼层(距离/(1000*60*60*24));
可变小时数=数学楼层((距离%(1000*60*60*24))/(1000*60*60));
var分钟=数学楼层((距离%(1000*60*60))/(1000*60));
var秒=数学楼层((距离%(1000*60))/1000);
//在id为“demo”的元素中显示结果
document.getElementById(“time”).innerHTML=days+“d”+hours+“h”+minutes+“m”+seconds+“s”;
//如果倒计时结束,写一些文字
如果(距离<0){
净间隔(x);
document.getElementById(“time”).innerHTML=“过期”;
}
}, 1000);
})
})
因此,我使用Laravel和jQuery来运行计时器
我需要代码方面的帮助,因为它不起作用。诀窍是在数组中“保存”间隔。如果不这样做,它将在每次循环迭代中被覆盖 然后,要引用右侧的
span
元素,您必须获得迭代索引
,以便以后在.eq()
方法中使用。不能在循环中使用
id
,因为它必须是唯一的
看看代码中的注释
$(文档).ready(函数(){
//用于存储创建的间隔的数组。
var timerArray=[];
$(“[数据时间]”)。每个(函数(索引){
log($(this.data(“time”));
var finalTime=$(this.data('time');
//确定我们倒计时的日期
var countDownDate=新日期(finalTime).getTime();
//每1秒更新一次倒计时
var x=setInterval(函数(){
//此索引将用于引用正确的跨度。
var thisIndex=指数;
控制台日志(“间隔”+此索引);
//获取今天的日期和时间
var now=new Date().getTime();
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在;
//天、小时、分钟和秒的时间计算
变量天数=数学楼层(距离/(1000*60*60*24));
可变小时数=数学楼层((距离%(1000*60*60*24))/(1000*60*60));
var分钟=数学楼层((距离%(1000*60*60))/(1000*60));
var秒=数学楼层((距离%(1000*60))/1000);
//前导零。。。
如果(小时)诀窍是在数组中“保存”间隔。
如果不这样做,它将在每次循环迭代中被覆盖
然后,要引用右侧的span
元素,您必须获得迭代索引
,以便以后在.eq()
方法中使用。
不能在循环中使用id
,因为它必须是唯一的
看看代码中的注释
$(文档).ready(函数(){
//用于存储创建的间隔的数组。
var timerArray=[];
$(“[数据时间]”)。每个(函数(索引){
log($(this.data(“time”));
var finalTime=$(this.data('time');
//确定我们倒计时的日期
var countDownDate=新日期(finalTime).getTime();
//每1秒更新一次倒计时
var x=setInterval(函数(){
//此索引将用于引用正确的跨度。
var thisIndex=指数;
控制台日志(“间隔”+此索引);
//获取今天的日期和时间
var now=new Date().getTime();
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在;
//天、小时、分钟和秒的时间计算
变量天数=数学楼层(距离/(1000*60*60*24));
可变小时数=数学楼层((距离%(1000*60*60*24))/(1000*60*60));
var分钟=数学楼层((距离%(1000*60*60))/(1000*60));
var秒=数学楼层((距离%(1000*60))/1000);
//前导零。。。
如果(小时1-一个id
必须是唯一的…不能多次使用相同的时间。2-用于存储间隔的x
变量在每次循环迭代时被覆盖。1-一个id
必须是唯一的…不能多次使用相同的时间。2-用于存储间隔的x
变量在每次循环迭代时被覆盖非常感谢你让我从压力中解脱出来我想报答你非常感谢你让我从压力中解脱出来我想报答你。