我對編碼有點陌生，我有一個項目，它就像一個個人儀表板，我將在樹莓派的小屏幕上顯示它。儀表板僅顯示當前時間、溫度，并有一個鬧鐘按鈕。問題就在這里。我有儀表板： 儀表板“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
1 回答
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
為了解決上面的問題，像這樣編寫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);
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消