我對(duì)編碼有點(diǎn)陌生，我有一個(gè)項(xiàng)目，它就像一個(gè)個(gè)人儀表板，我將在樹莓派的小屏幕上顯示它。儀表板僅顯示當(dāng)前時(shí)間、溫度，并有一個(gè)鬧鐘按鈕。問題就在這里。我有儀表板： 儀表板“Wecker”翻譯為“鬧鐘”“Wecker”按鈕指向另一個(gè) html 文件，其中有一些按鈕，其中包含我需要醒來(lái)的最常見時(shí)間： 鬧鐘頁(yè)面當(dāng)我按下某個(gè)時(shí)間（例如 7:00 點(diǎn)）時(shí)，邊框會(huì)變成綠色，表示這是我想要喚醒 鬧鐘按鈕的時(shí)間如果當(dāng)前當(dāng)?shù)貢r(shí)間達(dá)到 7:00 點(diǎn)，鬧鐘就會(huì)工作，我編寫的條件是檢查邊框是否為綠色以及按鈕內(nèi)的時(shí)間是否等于當(dāng)前當(dāng)?shù)貢r(shí)間：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);}) 所以我遇到的問題是：如何在儀表板頁(yè)面上檢查此情況？所以我只想單擊 7:00 點(diǎn)按鈕，將其設(shè)為綠色并返回儀表板，但一旦我返回儀表板，該按鈕將再次變?yōu)榘咨Ｎ抑牢铱赡苄枰褂?node.js 或其他東西，但我從哪里開始呢？當(dāng)涉及到 Node.js 或服務(wù)器的東西時(shí)，我絕對(duì)一無(wú)所知。有人可以將我推向正確的方向，告訴我要谷歌什么，將某些html樣式保存到服務(wù)器并檢查服務(wù)器上的條件，如果條件正確，則無(wú)論我在哪個(gè)html頁(yè)面上都調(diào)用該函數(shù)？Github 存儲(chǔ)庫(kù)： https://github.com/PhilipKnp/dashboard-for-raspberry
1 回答
鴻蒙傳說(shuō)
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
為了解決上面的問題，像這樣編寫CSS類
CSS：
.time-picker{
border:2px solid white;
}
.selected{
border: 2px solid green;
}
在js中，當(dāng)類更改時(shí)，使用localstorage來(lái)存儲(chǔ)timepicker的id和內(nèi)容。
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 關(guān)注
- 148 瀏覽
添加回答
舉報(bào)
0/150
提交
取消