同一页面上有多个 javascript 个计数器
Multiple javascript counters on the same page
我全年都在举办比赛,价格每天都在上涨。代码有效,但我不确定要调整哪些元素才能同时显示多个价格调整。我尝试将“rate”更改为“rate1”等,但这还不够......所以我猜也应该调整其中的变量。任何帮助表示赞赏。我正在处理的页面在这里:http://limitlesshoops.com/jamball.html -- 下面的片段是我目前关注的内容。谢谢
<div class="eventbox mlk activebox"><img src="https://fiftyallstars.com/Images/jammlk.gif" class="holidayback">
<span class="eventlabel tourney">MLK DAY SHOWCASE</span><br><div class="numberfont eventdetails">
January 17-18, 2022<br>
Grades: 1st-8th<br>
Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
<script type="text/javascript">
const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-01-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table>
</div>
<div class="eventbox "><img src="https://fiftyallstars.com/Images/jamabe.png" class="holidayback">
<span class="eventlabel">PREZ DAY CHALLENGE</span><br><div class="numberfont eventdetails">
February 17-18, 2022<br>
Grades: 1st-8th<br>
Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
<script type="text/javascript">
const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-02-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table>
</div>
我认为您应该使用循环来生成这些 HTML 元素,因为它们具有相同的结构。它更易于维护,代码也更少。
以下是我的解决方案:
<div id="eventboxcontainer"></div>
<script type="text/javascript">
var data = [
{
"title" : "MLK DAY SHOWCASE",
"img" : "https://fiftyallstars.com/Images/jammlk.gif",
"dateRange" : "January 17-18, 2022",
"grades" : "1st-8th",
"deadline" : "2022-01-10",
"start" : "2021-10-01"
},
{
"title" : "PREZ DAY CHALLENGE",
"img" : "https://fiftyallstars.com/Images/jamabe.png",
"dateRange" : "February 17-18, 2022",
"grades" : "1st-8th",
"deadline" : "2022-02-10",
"start" : "2021-10-01"
}
];
var days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
var TODAY = days(new Date());
for (var i = 0; i < data.length; i++) {
var html = "";
var DEADLINE = days(new Date(data[i].deadline));
var START = days(new Date(data[i].start));
var rate = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
html = '<div class="eventbox mlk activebox"><img src="' + data[i].img + '" class="holidayback">'+
'<span class="eventlabel tourney">' + data[i].title + '</span><br><div class="numberfont eventdetails">'+
data[i].dateRange + '<br>'+
data[i].grades + '<br>'+
'Current Price: <div class="rate" style="display: inline; font-weight:bold;">' + rate + '</div>'+
'<br>'+
'</div>'+
'<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink">'+
'<div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink">'+
'<div class="eventbutton">Register</div></a></td></tr></table> </div>';
// you need jQuery for this
//$("#eventboxcontainer").append(html);
// pure Javascript
var element = document.querySelector("#eventboxcontainer");
element.insertAdjacentHTML('beforeend', html);
}
</script>
我全年都在举办比赛,价格每天都在上涨。代码有效,但我不确定要调整哪些元素才能同时显示多个价格调整。我尝试将“rate”更改为“rate1”等,但这还不够......所以我猜也应该调整其中的变量。任何帮助表示赞赏。我正在处理的页面在这里:http://limitlesshoops.com/jamball.html -- 下面的片段是我目前关注的内容。谢谢
<div class="eventbox mlk activebox"><img src="https://fiftyallstars.com/Images/jammlk.gif" class="holidayback">
<span class="eventlabel tourney">MLK DAY SHOWCASE</span><br><div class="numberfont eventdetails">
January 17-18, 2022<br>
Grades: 1st-8th<br>
Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
<script type="text/javascript">
const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-01-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table>
</div>
<div class="eventbox "><img src="https://fiftyallstars.com/Images/jamabe.png" class="holidayback">
<span class="eventlabel">PREZ DAY CHALLENGE</span><br><div class="numberfont eventdetails">
February 17-18, 2022<br>
Grades: 1st-8th<br>
Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
<script type="text/javascript">
const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-02-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table>
</div>
我认为您应该使用循环来生成这些 HTML 元素,因为它们具有相同的结构。它更易于维护,代码也更少。
以下是我的解决方案:
<div id="eventboxcontainer"></div>
<script type="text/javascript">
var data = [
{
"title" : "MLK DAY SHOWCASE",
"img" : "https://fiftyallstars.com/Images/jammlk.gif",
"dateRange" : "January 17-18, 2022",
"grades" : "1st-8th",
"deadline" : "2022-01-10",
"start" : "2021-10-01"
},
{
"title" : "PREZ DAY CHALLENGE",
"img" : "https://fiftyallstars.com/Images/jamabe.png",
"dateRange" : "February 17-18, 2022",
"grades" : "1st-8th",
"deadline" : "2022-02-10",
"start" : "2021-10-01"
}
];
var days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
var TODAY = days(new Date());
for (var i = 0; i < data.length; i++) {
var html = "";
var DEADLINE = days(new Date(data[i].deadline));
var START = days(new Date(data[i].start));
var rate = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
html = '<div class="eventbox mlk activebox"><img src="' + data[i].img + '" class="holidayback">'+
'<span class="eventlabel tourney">' + data[i].title + '</span><br><div class="numberfont eventdetails">'+
data[i].dateRange + '<br>'+
data[i].grades + '<br>'+
'Current Price: <div class="rate" style="display: inline; font-weight:bold;">' + rate + '</div>'+
'<br>'+
'</div>'+
'<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink">'+
'<div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink">'+
'<div class="eventbutton">Register</div></a></td></tr></table> </div>';
// you need jQuery for this
//$("#eventboxcontainer").append(html);
// pure Javascript
var element = document.querySelector("#eventboxcontainer");
element.insertAdjacentHTML('beforeend', html);
}
</script>