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

Question

我对编码有点陌生，我有一个项目，它就像一个个人仪表板，我将在树莓派的小屏幕上显示它。仪表板仅显示当前时间、温度，并有一个闹钟按钮。问题就在这里。我有仪表板： 仪表板“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 buttonsvar whiteStyle = "3px solid white"; //the styling for checking the conditionvar greenStyle = "3px solid green"; //the styling for checking the conditiontimePickerArray.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来存储timepicker的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);