我对编码有点陌生,我有一个项目,它就像一个个人仪表板,我将在树莓派的小屏幕上显示它。仪表板仅显示当前时间、温度,并有一个闹钟按钮。问题就在这里。
我有仪表板: 仪表板
“Wecker”翻译为“闹钟”
“Wecker”按钮指向另一个 html 文件,其中有一些按钮,其中包含我需要醒来的最常见时间: 闹钟页面
当我按下某个时间(例如 7:00 点)时,边框会变成绿色,表示这是我想要唤醒 闹钟按钮的时间
如果当前当地时间达到 7:00 点,闹钟就会工作,我编写的条件是检查边框是否为绿色以及按钮内的时间是否等于当前当地时间:
let timePickerList = document.querySelectorAll('#time_pick_1,#time_pick_2,#time_pick_3,#time_pick_4,#time_pick_5,#time_pick_6');
let timePickerArray = [...timePickerList]; //this just gets the unique id's for the buttons
var whiteStyle = "3px solid white"; //the styling for checking the condition
var greenStyle = "3px solid green"; //the styling for checking the condition
timePickerArray.forEach(function(elem) { //the function to make the buttons have a green border if
elem.style.border = whiteStyle; //the border is white and make it go white if its green
elem.addEventListener("click", function() {
if(this.style.border === whiteStyle){
this.style.border = greenStyle;
} else if (this.style.border === greenStyle){
this.style.border = whiteStyle;
}
});
//The function to play the alarm if the border of the element equals "greenStyle" ("3px solid green") and
// if the current local time equals the time inside of the button. And I call this function
//every second to check this condition.
function playAlarm(){
var currentTimeForAlarm = new Date().toLocaleTimeString('en-GB', { hour: "numeric", minute: "numeric"});
if(elem.style.border === greenStyle && currentTimeForAlarm === elem.innerHTML){
console.log("ALARM", elem.innerHTML)
//window.location.href = "alarmscreen.html";
sound();
}
}
setInterval(playAlarm, 1000);
})
所以我遇到的问题是:
如何在仪表板页面上检查此情况?所以我只想单击 7:00 点按钮,将其设为绿色并返回仪表板,但一旦我返回仪表板,该按钮将再次变为白色。
我知道我可能需要使用 node.js 或其他东西,但我从哪里开始呢?当涉及到 Node.js 或服务器的东西时,我绝对一无所知。
有人可以将我推向正确的方向,告诉我要谷歌什么,将某些html样式保存到服务器并检查服务器上的条件,如果条件正确,则无论我在哪个html页面上都调用该函数?
Github 存储库: https://github.com/PhilipKnp/dashboard-for-raspberry
鸿蒙传说
相关分类