如何连续 20 个月每月显示一条新消息
Posted
技术标签:
【中文标题】如何连续 20 个月每月显示一条新消息【英文标题】:How to display a new message each month for 20 consecutive months 【发布时间】:2020-05-15 10:13:52 【问题描述】:我希望有人可以帮助我解决这个问题。我正在编写一个 javascript 来连续 20 个月每月显示 20 个问候中的一个,然后再开始问候。下面是 GreetingDetails 数组:
var GreetingDetails = [
// index0
Greeting: "Foreign Greeting 0",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation0.mp3",
CommerceLink: link
, // index0
// index1
Greeting: "Foreign Greeting 1",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation1.mp3",
CommerceLink: link
, // index1
// index2
Greeting: "Foreign Greeting 2",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation2.mp3",
CommerceLink: link
, // index2
// index3
Greeting: "Foreign Greeting 3",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation3.mp3",
CommerceLink: link
, // index3
// index4
Greeting: "Foreign Greeting 4",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation4.mp3",
CommerceLink: link
, // index4
// index5
Greeting: "Foreign Greeting 5",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation5.mp3",
CommerceLink: link
, // index5
// index6
Greeting: "Foreign Greeting 6",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation6.mp3",
CommerceLink: link
, // index6
// index7
Greeting: "Foreign Greeting 7",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation7.mp3",
CommerceLink: link
, // index7
// index8
Greeting: "Foreign Greeting 8",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation8.mp3",
CommerceLink: link
, // index8
// index9
Greeting: "Foreign Greeting 9",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation9.mp3",
CommerceLink: link
, // index9
// index10
Greeting: "Foreign Greeting 10",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation10.mp3",
CommerceLink: link
, // index10
// index11
Greeting: "Foreign Greeting 11",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation11.mp3",
CommerceLink: link
, // index11
// index12
Greeting: "Foreign Greeting 12",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation12.mp3",
CommerceLink: link
, // index12
// index13
Greeting: "Foreign Greeting 13",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation13.mp3",
CommerceLink: link
, // index13
// index14
Greeting: "Foreign Greeting 14",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation14.mp3",
CommerceLink: link
, // index14
// index15
Greeting: "Foreign Greeting 15",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation15.mp3",
CommerceLink: link
, // index15
// index16
Greeting: "Foreign Greeting 16",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation16.mp3",
CommerceLink: link
, // index16
// index17
Greeting: "Foreign Greeting 17",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation17.mp3",
CommerceLink: link
, // index17
// index18
Greeting: "Foreign Greeting 18",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation18.mp3",
CommerceLink: link
, // index18
// index19
Greeting: "Foreign Greeting 19",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation19.mp3",
CommerceLink: link
// index19
];
我尝试了几种不同的方法,测试获取每个问候语,但继续遇到仅获取 12. 12 的问题,因为一年中有 12 个月,我正在检查月份以进行比较环形。我想让这个尽可能动态,所以没有人必须再次触摸。这是我进行日期比较最成功的尝试:
var m = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];
var y = [];
var d = new Date();
//var test = new Date(2020, 1, 1);
// This for loop adds the years to the y-array
for (var i = 0; i < addYears; i++)
y.push(startYear++);
//alert(m.length);
//alert(y.length);
for (var i = 0; i < y.length; i++)
if (d.getFullYear() === y[i])
for (var j = 0; j < GreetingDetails.length; j++)
if (m[d.getMonth()] === m[j])
GreetingBuilder = GreetingDetails[j];
var GreetingBuilder;
GreetingElements =
topSection: function ()
var holder = document.createElement("section");
holder.id = "required-greeting";
return holder;
,
accessabilityP: function ()
var holder = document.createElement("p");
holder.classList.add("visuallyhidden");
holder.innerText = "The following is a greeting given in one of 20 foreign languages.";
return holder;
,
greetingContainer: function ()
var holder = document.createElement("dl");
holder.id = "language-greeting";
return holder;
,
greetingDT: function ()
var holder = document.createElement("dt");
holder.classList.add("greeting");
return holder;
,
greetingLink: function ()
var holder = document.createElement("a")
holder.href = GreetingBuilder.CommerceLink;
holder.classList.add("language-link");
holder.text = GreetingBuilder.Greeting;
return holder;
,
audioContainer: function ()
var holder = document.createElement("dd");
holder.classList.add("speaker");
return holder;
,
audioPlayer: function ()
var holder = document.createElement("audio");
holder.id = GreetingBuilder.Language.toLowerCase().replace(" ", "-");
holder.src = GreetingBuilder.AudioPath;
holder.preload = "auto";
return holder;
,
audioButton: function ()
var holder = document.createElement("button");
holder.classList.add("pronunciation");
holder.onclick = function ()
document.getElementById(GreetingElements.audioPlayer().id).play();
;
holder.innerText = "Listen to pronunciation";
return holder;
,
languageNameDD: function ()
var holder = document.createElement("dd");
holder.classList.add("language");
holder.innerText = "(" + GreetingBuilder.Language + ")";
return holder;
,
languageTranslationDD: function ()
var holder = document.createElement("dd");
holder.classList.add("translation");
holder.innerText = '"' + GreetingBuilder.Translation + '"';
return holder;
,
getFullGreetingSection: function ()
var sectionInstance = this.topSection();
var greetingDTInstance = this.greetingDT();
var greetingContainerInstance = this.greetingContainer();
var audioContainerInstance = this.audioContainer();
greetingDTInstance.appendChild(this.greetingLink());
greetingContainerInstance.appendChild(greetingDTInstance);
audioContainerInstance.appendChild(this.audioPlayer());
audioContainerInstance.appendChild(this.audioButton());
greetingContainerInstance.appendChild(audioContainerInstance);
greetingContainerInstance.appendChild(this.languageNameDD());
greetingContainerInstance.appendChild(this.languageTranslationDD());
sectionInstance.appendChild(this.accessabilityP());
sectionInstance.appendChild(greetingContainerInstance);
return sectionInstance;
document.getElementsByClassName("back-to-top")[0].insertAdjacentElement('afterend', GreetingElements.getFullGreetingSection());
如果您发现我做错了什么,请告诉我。我确信有更好的方法来解决这个问题,所以任何帮助都将不胜感激。
【问题讨论】:
看来(year * 12 + month) % 20
是获取索引所需的全部内容。
【参考方案1】:
指定一个过去的日期,您可以从该日期开始计算月份。然后,取自那时以来经过的几个月,并根据您的问候数组的长度对其进行修改。
尝试调整“pastDate”来模拟时间的流逝,得到不同的问候。
var greetings = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19].map (x=> "Greeting #" + x);
var currentDate = new Date();
var pastDate = new Date("2018-10-01"); // pick arbitrary point in past as the "first" month
var differenceInYears = currentDate.getYear() - pastDate.getYear(); // 20 years ago
var index = differenceInYears * 12 + currentDate.getMonth() - pastDate.getMonth(); // how many months ago we "started" counting
console.log(greetings[index%greetings.length]);
【讨论】:
【参考方案2】:var basedate = new Date(2020, 00);
function monthDiff(dateFrom, dateTo)
return dateTo.getMonth() - dateFrom.getMonth() +
(12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
function showmessage()
var curdate = new Date($('#curdate').val());
var diff = monthDiff(basedate, curdate);
while(diff > 19)
diff = diff - 19;
$('#output').append('<div>Greeting: ' + GreetingDetails[diff].Greeting + '</div>');
var link = '';
var GreetingDetails = [ // index0
Greeting: "Foreign Greeting 0",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation0.mp3",
CommerceLink: link
, // index0
// index1
Greeting: "Foreign Greeting 1",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation1.mp3",
CommerceLink: link
, // index1
// index2
Greeting: "Foreign Greeting 2",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation2.mp3",
CommerceLink: link
, // index2
// index3
Greeting: "Foreign Greeting 3",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation3.mp3",
CommerceLink: link
, // index3
// index4
Greeting: "Foreign Greeting 4",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation4.mp3",
CommerceLink: link
, // index4
// index5
Greeting: "Foreign Greeting 5",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation5.mp3",
CommerceLink: link
, // index5
// index6
Greeting: "Foreign Greeting 6",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation6.mp3",
CommerceLink: link
, // index6
// index7
Greeting: "Foreign Greeting 7",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation7.mp3",
CommerceLink: link
, // index7
// index8
Greeting: "Foreign Greeting 8",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation8.mp3",
CommerceLink: link
, // index8
// index9
Greeting: "Foreign Greeting 9",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation9.mp3",
CommerceLink: link
, // index9
// index10
Greeting: "Foreign Greeting 10",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation10.mp3",
CommerceLink: link
, // index10
// index11
Greeting: "Foreign Greeting 11",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation11.mp3",
CommerceLink: link
, // index11
// index12
Greeting: "Foreign Greeting 12",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation12.mp3",
CommerceLink: link
, // index12
// index13
Greeting: "Foreign Greeting 13",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation13.mp3",
CommerceLink: link
, // index13
// index14
Greeting: "Foreign Greeting 14",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation14.mp3",
CommerceLink: link
, // index14
// index15
Greeting: "Foreign Greeting 15",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation15.mp3",
CommerceLink: link
, // index15
// index16
Greeting: "Foreign Greeting 16",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation16.mp3",
CommerceLink: link
, // index16
// index17
Greeting: "Foreign Greeting 17",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation17.mp3",
CommerceLink: link
, // index17
// index18
Greeting: "Foreign Greeting 18",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation18.mp3",
CommerceLink: link
, // index18
// index19
Greeting: "Foreign Greeting 19",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation19.mp3",
CommerceLink: link
// index19
];
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='date' id="curdate" />
<button type="button" onclick='showmessage()'>Show</button>
<div id="output">
</div>
您需要一个基准日期来确定月份是 0。
然后你需要今天月份和基准月份之间的月差。
如果 diff 大于 20,则减去 20。我使用了一个 while 循环来不断减去 20,直到差异不再大于 20。
使用数字作为问候数组的索引GreetingDetails[diff]
。
这是一个基于您的问候的示例(广告工作)代码。您选择一个日期(未来的当前日期)。
【讨论】:
【参考方案3】:只有 12 个月,所以只有 12 个唯一值可以使用但需要 20 个?使用年份!
2020 = 0
2021 = 1
所以你的第 13 个月是 2021 年 1 月,或者 12+1 等等。
用当年减去 2020 年。将其添加到当月。将值包装在 0 到 19 之间。
【讨论】:
【参考方案4】:首先让我感谢所有回复的人。你的洞察力帮助我弄清楚我做错了什么。
我在 Nawed Khan 和 Ferenc 的回复中找到了答案。我认为需要几年和几个月的数学运算,但想不出要使用的公式。我在 Khan 的 monthDiff() 方法中使用了这个公式,因为我更喜欢它而不是把公式分成两部分。
var diff = todayDate.getMonth() - startDate.getMonth() + (12 * (todayDate.getFullYear() - startDate.getFullYear()));
一旦完成,就像他在回答中所做的那样,我将差异分配为 GreetingDetails 索引... GreetingDetails[diff] 和中提琴,神奇的事情发生了。这在一段时间内很有用……直到我过了 20 年,然后我开始收到错误的问候。问题出在 Khan 响应的 while 循环中。所以我把它改成减去 GreetingDetails.length(长度为 20),每次都得到正确的问候语。
while (diff >= GreetingDetails.length)
diff -= GreetingDetails.length;
如果 GreetingDetails[] 中的问候语数量发生变化,这也会有所帮助。我需要它尽可能动态,所以这应该是实现它的最佳方式。这样一来,只需要更改问候语的详细信息即可。
虽然 Khan 和 Ferenc 在公式中略有偏差,但我正在投票赞成他们以给予他们信任,因为我使用他们的回复来制定解决我的问题的方法。
完整的JS如下:
var todayDate = new Date();
var startDate = new Date(2020, 0)
var diff = todayDate.getMonth() - startDate.getMonth() + (12 * (todayDate.getFullYear() - startDate.getFullYear()));
var link = "url";
var GreetingBuilder;
var GreetingDetails = [
// index0
Greeting: "Foreign Greeting 0",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation0.mp3",
CommerceLink: link
, // index0
// index1
Greeting: "Foreign Greeting 1",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation1.mp3",
CommerceLink: link
, // index1
// index2
Greeting: "Foreign Greeting 2",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation2.mp3",
CommerceLink: link
, // index2
// index3
Greeting: "Foreign Greeting 3",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation3.mp3",
CommerceLink: link
, // index3
// index4
Greeting: "Foreign Greeting 4",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation4.mp3",
CommerceLink: link
, // index4
// index5
Greeting: "Foreign Greeting 5",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation5.mp3",
CommerceLink: link
, // index5
// index6
Greeting: "Foreign Greeting 6",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation6.mp3",
CommerceLink: link
, // index6
// index7
Greeting: "Foreign Greeting 7",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation7.mp3",
CommerceLink: link
, // index7
// index8
Greeting: "Foreign Greeting 8",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation8.mp3",
CommerceLink: link
, // index8
// index9
Greeting: "Foreign Greeting 9",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation9.mp3",
CommerceLink: link
, // index9
// index10
Greeting: "Foreign Greeting 10",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation10.mp3",
CommerceLink: link
, // index10
// index11
Greeting: "Foreign Greeting 11",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation11.mp3",
CommerceLink: link
, // index11
// index12
Greeting: "Foreign Greeting 12",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation12.mp3",
CommerceLink: link
, // index12
// index13
Greeting: "Foreign Greeting 13",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation13.mp3",
CommerceLink: link
, // index13
// index14
Greeting: "Foreign Greeting 14",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation14.mp3",
CommerceLink: link
, // index14
// index15
Greeting: "Foreign Greeting 15",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation15.mp3",
CommerceLink: link
, // index15
// index16
Greeting: "Foreign Greeting 16",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation16.mp3",
CommerceLink: link
, // index16
// index17
Greeting: "Foreign Greeting 17",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation17.mp3",
CommerceLink: link
, // index17
// index18
Greeting: "Foreign Greeting 18",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation18.mp3",
CommerceLink: link
, // index18
// index19
Greeting: "Foreign Greeting 19",
Language: "Foreign Language",
Translation: "English Translation",
AudioPath: "/Content/Greetings/Pronunciation19.mp3",
CommerceLink: link
// index19
];
while (diff >= GreetingDetails.length)
diff -= GreetingDetails.length;
GreetingElements =
topSection: function ()
var holder = document.createElement("section");
holder.id = "required-greeting";
return holder;
,
accessabilityP: function ()
var holder = document.createElement("p");
holder.classList.add("visuallyhidden");
holder.innerText = "The following is a greeting given in one of 20 foreign languages.";
return holder;
,
greetingContainer: function ()
var holder = document.createElement("dl");
holder.id = "language-greeting";
return holder;
,
greetingDT: function ()
var holder = document.createElement("dt");
holder.classList.add("greeting");
return holder;
,
greetingLink: function ()
var holder = document.createElement("a")
holder.href = GreetingBuilder.CommerceLink;
holder.classList.add("language-link");
holder.text = GreetingBuilder.Greeting;
return holder;
,
audioContainer: function ()
var holder = document.createElement("dd");
holder.classList.add("speaker");
return holder;
,
audioPlayer: function ()
var holder = document.createElement("audio");
holder.id = GreetingBuilder.Language.toLowerCase().replace(" ", "-");
holder.src = GreetingBuilder.AudioPath;
holder.preload = "auto";
return holder;
,
audioButton: function ()
var holder = document.createElement("button");
holder.classList.add("pronunciation");
holder.onclick = function ()
document.getElementById(GreetingElements.audioPlayer().id).play();
;
holder.innerText = "Listen to pronunciation";
return holder;
,
languageNameDD: function ()
var holder = document.createElement("dd");
holder.classList.add("language");
holder.innerText = "(" + GreetingBuilder.Language + ")";
return holder;
,
languageTranslationDD: function ()
var holder = document.createElement("dd");
holder.classList.add("translation");
holder.innerText = '"' + GreetingBuilder.Translation + '"';
return holder;
,
getFullGreetingSection: function ()
var sectionInstance = this.topSection();
var greetingDTInstance = this.greetingDT();
var greetingContainerInstance = this.greetingContainer();
var audioContainerInstance = this.audioContainer();
greetingDTInstance.appendChild(this.greetingLink());
greetingContainerInstance.appendChild(greetingDTInstance);
audioContainerInstance.appendChild(this.audioPlayer());
audioContainerInstance.appendChild(this.audioButton());
greetingContainerInstance.appendChild(audioContainerInstance);
greetingContainerInstance.appendChild(this.languageNameDD());
greetingContainerInstance.appendChild(this.languageTranslationDD());
sectionInstance.appendChild(this.accessabilityP());
sectionInstance.appendChild(greetingContainerInstance);
return sectionInstance;
GreetingBuilder = GreetingDetails[diff];
document.getElementsByClassName("back-to-top")[0].insertAdjacentElement('afterend', GreetingElements.getFullGreetingSection());
我希望这对将来的某人有所帮助!
【讨论】:
以上是关于如何连续 20 个月每月显示一条新消息的主要内容,如果未能解决你的问题,请参考以下文章