Javascript切換時間類型

Question

所以最近，爲了獲得樂趣並學習更多關於Javascript的知識，因爲我從來沒有做過太多的Web開發，所以我一直在創建一個網站，它可以作爲一個時鐘，通過製作顏色來選擇顏色十六進制代碼。相當基本，但我想要實現的功能有點問題。

我想要的一個功能是使用網頁上的按鈕在UTC和本地時間之間切換。要做到這一點，我有按鈕（onclick）乘以-1的數字，以正面和負面代表每個國家。我已通過console.log驗證了該值本身已更改，但在顯示的時間中沒有可見的更改。

所以，如果有人可以看看，我會很感激。也許我誤解了代碼本身如何流動或重複。

謝謝！如果需要，我可以放置HTML，但我認爲只有JS纔是必要的。

var h, m, s; 

window.onload = function startTime() { 
    var today = new Date(); 
    var buttonHasBeenPressed = -1; // -1 = false 


    document.getElementById("utcbtn").onclick = function() { 
     buttonHasBeenPressed = buttonHasBeenPressed * -1; // reverses value 
     console.log(buttonHasBeenPressed); 
    } 

    if (buttonHasBeenPressed == 1) { 
     getUTCTime(today); 
    } else { 
     getNormalTime(today); 
    } 

    h = checkTime(h); 
    m = checkTime(m); 
    s = checkTime(s); 


    var timeString = "" + h + ":" + m + ":" + s; 
    var colorString = "#" + h + m + s; 

    document.getElementById("main").innerHTML = timeString; 
    document.getElementById("hexcolor").innerHTML = colorString; 
    document.body.style.backgroundColor = colorString; 

    var t = setTimeout(startTime, 500); 

} 

function checkTime(i) { 
    if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 
     return i; 
} 

function getUTCTime(today) { 
    h = today.getUTCHours(); 
    m = today.getUTCMinutes(); 
    s = today.getUTCSeconds(); 
} 

function getNormalTime(today) { 
    h = today.getHours(); 
    m = today.getMinutes(); 
    s = today.getSeconds(); 
} 

就像我儘可能的JavaScript我非常新手，所以這段代碼可能是不是所有的偉大說 - 建議，以改善它總是歡迎的！

Answer 1

您的代碼不會從UTC更改爲正常時間的原因是因爲您正在爲var t = setTimeout(startTime, 500);設置超時。在startTime中，您立即將其設置爲-1 var buttonHasBeenPressed = -1; // -1 = false。所以每次運行時都將其設置回-1。如果您將var buttonHasBeenPressed = -1; // -1 = false移到startTime函數之外，它將起作用。查看更新的代碼。

var h, m, s; 
var buttonHasBeenPressed = -1; // -1 = false 
window.onload = function startTime() { 
    var today = new Date(); 

    document.getElementById("utcbtn").onclick = function() { 
    buttonHasBeenPressed = buttonHasBeenPressed * -1; // reverses value 
    console.log(buttonHasBeenPressed); 
    } 

    if (buttonHasBeenPressed == 1) { 
    getUTCTime(today); 
    } else { 
    getNormalTime(today); 
    } 

    h = checkTime(h); 
    m = checkTime(m); 
    s = checkTime(s); 


    var timeString = "" + h + ":" + m + ":" + s; 
    var colorString = "#" + h + m + s; 

    document.getElementById("main").innerHTML = timeString; 
    document.getElementById("hexcolor").innerHTML = colorString; 
    document.body.style.backgroundColor = colorString; 

    var t = setTimeout(startTime, 500); 

} 

function checkTime(i) { 
    if (i < 10) { 
    i = "0" + i 
    }; // add zero in front of numbers < 10 
    return i; 
} 

function getUTCTime(today) { 
    h = today.getUTCHours(); 
    m = today.getUTCMinutes(); 
    s = today.getUTCSeconds(); 
} 

function getNormalTime(today) { 
    h = today.getHours(); 
    m = today.getMinutes(); 
    s = today.getSeconds(); 
} 

編輯： 我也會使buttonHasBeenPressed一個布爾值，並設定一個init()功能在您添加onclick處理程序，並開始startTime這樣你就不會每次加onclick句柄。

var h, m, s; 
var buttonHasBeenPressed = false; 

window.onload = init; 

function init() { 

    document.getElementById("utcbtn").onclick = function() { 
    buttonHasBeenPressed = !buttonHasBeenPressed; 
    console.log(buttonHasBeenPressed); 
    } 

    startTime(); 

} 

function startTime() { 

    var today = new Date(); 

    if (buttonHasBeenPressed) { 
    getUTCTime(today); 
    } else { 
    getNormalTime(today); 
    } 

    h = checkTime(h); 
    m = checkTime(m); 
    s = checkTime(s); 


    var timeString = "" + h + ":" + m + ":" + s; 
    var colorString = "#" + h + m + s; 

    document.getElementById("main").innerHTML = timeString; 
    document.getElementById("hexcolor").innerHTML = colorString; 
    document.body.style.backgroundColor = colorString; 

    var t = setTimeout(startTime, 500); 

} 

function checkTime(i) { 
    if (i < 10) { 
    i = "0" + i 
    }; // add zero in front of numbers < 10 
    return i; 
} 

function getUTCTime(today) { 
    h = today.getUTCHours(); 
    m = today.getUTCMinutes(); 
    s = today.getUTCSeconds(); 
} 

function getNormalTime(today) { 
    h = today.getHours(); 
    m = today.getMinutes(); 
    s = today.getSeconds(); 
} 

Answer 2

buttonHasBeenPressed和setTimeout不應該是本地的開始時間的功能。

這是一個工作JSFiddle。