如果其中的条件为真，则调用另一个 html 文件中的函数

Question

我对编码有点陌生，我有这个项目，它就像一个个人仪表板，我将在树莓派的小屏幕上显示它。仪表板只显示当前时间、温度，并有一个闹钟按钮。这就是问题所在。

我有仪表板： dashboard

“Wecker”翻译为“闹钟”

“Wecker”按钮指向另一个 html 文件，在其中我有一些按钮，我最常需要在以下时间醒来： alarm page

当我按下某个时间（例如 7:00 点）时，边框变为绿色，表示这是我要起床的时间 alarm buttons

如果当前当地时间到达 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

Answer 1

为了解决上述问题，编写这样的 CSS 类

CSS：

.time-picker{
    border:2px solid white;
  }
.selected{
    border:  2px solid green;
}

并且在js中使用localstorage来存储时间选择器的id和内容，当类发生变化时。

JS：

var timePickerList = document.querySelectorAll('.time-picker');
//check if alarms are there in localstorage otherwise return empty array
var alarms=localStorage.getItem('alarms')? JSON.parse(localStorage.getItem('alarms')):[]; 
timePickerArray.forEach(function(elem) { 
       if(alarms.find( alarm => elem.id == alarm.id)){
           elem.classList.add('selected'); //if alarm contains ele id,set background green
       }
       elem.addEventListener("click", function() {
         elem.classList.toggle('selected');//
         if(elem.classList.contains('selected'))
         {
            alarms.push({id:elem.id,content:elem.innerHTML});//
            localStorage.setItem('alarms',JSON.stringify(alarms));
         } 
         else{
             let index=alarms.findIndex( alarm => alarm.id=elem.id)
            if(index!=-1){
                alarms.splice(index,1);//Remove from alarms array if alarm is disabled
                localStorage.setItem('alarms',JSON.stringify(alarms));
            }

         }
    });
})
function playAlarm(){
    let currentTimeForAlarm = new Date().toLocaleTimeString('en-GB', { hour: "numeric", minute: "numeric"});
    let currentAlarm=alarms.find( alarm => alarm.content == currentTimeForAlarm);
    if(currentAlarm){
        console.log(`Alarm from ${alarm.id} and content is ${alarm.content}`)
        sound();
    }
}
setInterval(playAlarm, 1000);