Javascript切换时间类型

所以最近，为了获得乐趣并学习更多关于Javascript的知识，因为我从来没有做过太多的Web开发，所以我一直在创建一个网站，它可以作为一个时钟，通过制作颜色来选择颜色十六进制代码。相当基本，但我想要实现的功能有点问题。Javascript切换时间类型

我想要的一个功能是使用网页上的按钮在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我非常新手，所以这段代码可能是不是所有的伟大说 - 建议，以改善它总是欢迎的！

来源

2016-01-06 Wolverine1621

只是好奇，为什么你不使用布尔值的东西，显然是真/假？而且，你只运行所有的代码来启动'onload'时钟。当您点击按钮时，我不会看到您再次调用它的位置。你所做的只是向控制台打印一些东西。 – Antiga

@Antiga是的更多关于我将使用布尔代码的代码，只是没有太多时间来完善它。当时我想我认为这对我来说似乎更加“切合实际”，但会改变这一点。就onload而言，我对setTimeout（）完成的工作有些困惑。我发现它是确保时钟更新的一种方式，所以我假设它以某种方式循环它，但似乎可能不正确 – Wolverine1621

您的代码不会从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(); 
}

来源

2016-01-06 19:04:27

这修复了它，谢谢！不知道为什么我没有抓住！ – Wolverine1621

buttonHasBeenPressed和setTimeout不应该是本地的开始时间的功能。

这是一个工作JSFiddle。

来源

2016-01-06 19:08:05 remdevtec

Javascript切换时间类型

回答

相关问题