Javascript toggling time type

Question

Так недавно, для удовольствия и узнать больше о Javascript, так как я никогда не делал много веб-разработки, я делал сайт, который будет функционировать как часы, которые выбирают цвет, делая цвет шестнадцатеричный код с момента времени. Достаточно простой, но у меня проблема с функцией, которую я хочу реализовать.

Функция, которую я хотел бы использовать, - это использовать кнопку на веб-странице для переключения между временем по Гринвичу и местным временем. Для этого у меня есть кнопка (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(); 
} 

Edit: Я хотел бы также сделать 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 не должны были локальными по отношению к функции STARTTIME.

Работает JSFiddle.