javascript - Date.setHours 在模拟时钟上不存在,几秒钟后返回渲染当前时间
问题描述
晚上好,我使用 javascript 创建了一个模拟时钟。我得到了点击功能,将时间设置为用户在时钟输入框中输入的时间,但几秒钟后,时钟又回到当前时间。我不确定我在这里缺少什么。即使我有 setInterval,手也停止移动。
// Clock constants using DOM querySelector by the ID
const hourHand = document.querySelector('#hour');
const minuteHand = document.querySelector('#minute');
const secondHand = document.querySelector('#second');
function startClock() {
// Creating Date object and getting the current time
const date = new Date();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
var hrPosition = hour * 360 / 12 + ((minute * 360 / 60) / 12);
var minPosition = (minute * 360 / 60) + (second * 360 / 60) / 60;
var secPosition = second * 360 / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHand.style.transform = `rotate(${hrPosition}deg)`;
minuteHand.style.transform = `rotate(${minPosition}deg)`;
secondHand.style.transform = `rotate(${secPosition}deg)`;
}
// Variables for am and pm
const nDate = new Date();
const nHour = nDate.getHours();
const nMinute = nDate.getMinutes();
const nSecond = nDate.getSeconds();
// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHour >= 12) {
const currentD = document.createElement('DIV');
const currentP = document.createElement('P');
currentD.className = ('currentD')
currentP.className =('current');
const local = document.querySelector('.local');
const pmText = document.createTextNode(`The current time is ${nHour}:${nMinute} P.M`);
currentD.appendChild(currentP);
local.appendChild(currentD);
currentP.appendChild(pmText);
} else if (nHour < 12){
const currentD = document.createElement('DIV');
const currentP = document.createElement('P');
currentD.className = ('currentD')
currentP.className = ('current');
const local = document.querySelector('.local');
const amText = document.createTextNode(`The current time is ${nHour}:${nMinute} A.M`);
currentD.appendChild(currentP);
local.appendChild(currentD);
currentP.appendChild(amText);
} else {
console.log("This is not a valid date");
}
// California Time // ****************************
// Clock constants using DOM querySelector by the ID
const hourHandC = document.querySelector('#hourC');
const minuteHandC = document.querySelector('#minuteC');
const secondHandC = document.querySelector('#secondC');
function startClockC() {
// Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
var laHr = moment.tz('America/Los_Angeles').hour();
var laMin = moment.tz('America/Los_Angeles').minute();
var laSec = moment.tz('America/Los_Angeles').second();
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
let hrPositionC = laHr * 360 / 12 + ((laMin * 360 / 60) / 12);
let minPositionC = (laMin * 360 / 60) + (laSec * 360 / 60) / 60;
let secPositionC = laSec * 360 / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHandC.style.transform = `rotate(${hrPositionC}deg)`;
minuteHandC.style.transform = `rotate(${minPositionC}deg)`;
secondHandC.style.transform = `rotate(${secPositionC}deg)`;
}
// Variables for am and pm
var nHr = moment.tz('America/Los_Angeles').hour();
var nMin = moment.tz('America/Los_Angeles').minute();
var nSec = moment.tz('America/Los_Angeles').second();
// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHr >= 12) {
// Creating P element
const currentDI = document.createElement('DIV');
const currentPA = document.createElement('P');
currentDI.className = ('currentDI')
currentPA.className = ('current');
// Creating text node to show time.
const localC = document.querySelector('.california');
const pmText = document.createTextNode(`The current time is ${nHr}:${nMin} P.M`);
// appending to render time
currentDI.appendChild(currentPA);
localC.appendChild(currentDI);
currentPA.appendChild(pmText);
} else if (nHr < 12) {
const currentDI = document.createElement('DIV');
const currentPA = document.createElement('P');
currentDI.className = ('currentDI')
currentPA.className = ('currentPA');
const localC = document.querySelector('.california');
const amText = document.createTextNode(`The current time is ${nHr}:${nMin} A.M`);
currentDI.appendChild(currentPA);
localC.appendChild(currentDI);
currentPA.appendChild(amText);
} else {
console.log("This is not a valid date");
}
// London Time // ********************************
// Clock constants using DOM querySelector by the ID
const hourHandL = document.querySelector('#hourL');
const minuteHandL = document.querySelector('#minuteL');
const secondHandL = document.querySelector('#secondL');
function startClockL() {
// Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
var loHr = moment.tz('Europe/London').hour();
var loMin = moment.tz('Europe/London').minute();
var loSec = moment.tz('Europe/London').second();
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
let hrPositionL = loHr * 360 / 12 + ((loMin * 360 / 60) / 12);
let minPositionL = (loMin * 360 / 60) + (loSec * 360 / 60) / 60;
let secPositionL = loSec * 360 / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHandL.style.transform = `rotate(${hrPositionL}deg)`;
minuteHandL.style.transform = `rotate(${minPositionL}deg)`;
secondHandL.style.transform = `rotate(${secPositionL}deg)`;
}
// Variables for am and pm
var lHr = moment.tz('Europe/London').hour();
var lMin = moment.tz('Europe/London').minute();
var lSec = moment.tz('Europe/London').second();
// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (lHr >= 12) {
// Creating P element
const currentLD = document.createElement('DIV');
const currentLP = document.createElement('P');
currentLD.className = ('currentLD')
currentLP.className = ('currentLP');
// Creating text node to show time.
const localLo = document.querySelector('.london');
const pmText = document.createTextNode(`The current time is ${lHr}:${lMin} P.M`);
// appending to render time
currentLD.appendChild(currentLP);
localLo.appendChild(currentLD);
currentLP.appendChild(pmText)
} else if (lHr < 12) {
const currentLD = document.createElement('DIV');
const currentLP = document.createElement('P');
currentLD.className = ('currentLD')
currentLP.className = ('currentLP');
const localLo = document.querySelector('.london');
const amText = document.createTextNode(`The current time is ${lHr}:${lMin} A.M`);
currentLD.appendChild(currentLP);
localLo.appendChild(currentLD);
currentLP.appendChild(amText);
} else {
console.log("This is not a valid date");
}
$(document).ready(function () {
var currentSetInterval = null;
currentSetInterval = setInterval(function () {
startClock();
startClockC();
startClockL();
}, 1000);
$('#addTime').on('click', function () {
if (currentSetInterval) {
clearInterval(currentSetInterval);
} else {
consol.log("Something went wrong");
}
// Clock constants using DOM querySelector by the ID
const hourHandN = document.querySelector('#hour');
const minuteHandN = document.querySelector('#minute');
const secondHandN = document.querySelector('#second');
const intervalInput = $('#input').val();
var interval = intervalInput;
const dateN = new Date();
var milliAdd = interval * 60 * 60 * 1000;
dateN.setHours(interval);
const hourN = dateN.getHours();
const minuteN = dateN.getMinutes();
const secondN = dateN.getSeconds();
console.log(hourN, minuteN, secondN);
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
var hrPositionN = hourN * 360 / 12 + ((minuteN * 360 / 60) / 12);
var minPositionN = (minuteN * 360 / 60) + (secondN * 360 / 60) / 60;
var secPositionN = secondN * 360 / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHandN.style.transform = `rotate(${hrPositionN}deg)`;
minuteHandN.style.transform = `rotate(${minPositionN}deg)`;
secondHandN.style.transform = `rotate(${secPositionN}deg)`;
currentSetInterval = setInterval(function (intervalInput) {
console.log(intervalInput)
startClock(intervalInput);
startClockC(intervalInput);
startClockL(intervalInput);
}, 1000);
})
});
解决方案
错误:
- 1:intervalInput 不持久,也不能在其他函数中访问,
Fix: Use global variables(window.intervalInput=?) docs here - 2:clearInterval 失败(console.log 中未捕获的错误)
修复:使用 window.clearInterval - 3:要添加时间你不能setHours
修复:既然你得到milliAdd使用date.setMilliseconds(date.getMilliseconds()+window.milliAdd); 仅本地时钟的结果代码:
// Clock constants using DOM querySelector by the ID
const hourHand = document.querySelector("#hour");
const minuteHand = document.querySelector("#minute");
const secondHand = document.querySelector("#second");
function startClock() {
// Creating Date object and getting the current time
var date = new Date();
if (window.milliAdd) {
date.setMilliseconds(date.getMilliseconds() + window.milliAdd);
}
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
var hrPosition = (hour * 360) / 12 + (minute * 360) / 60 / 12;
var minPosition = (minute * 360) / 60 + (second * 360) / 60 / 60;
var secPosition = (second * 360) / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHand.style.transform = `rotate(${hrPosition}deg)`;
minuteHand.style.transform = `rotate(${minPosition}deg)`;
secondHand.style.transform = `rotate(${secPosition}deg)`;
}
// Variables for am and pm
const nDate = new Date();
const nHour = nDate.getHours();
const nMinute = nDate.getMinutes();
const nSecond = nDate.getSeconds();
// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHour >= 12) {
const currentD = document.createElement("DIV");
const currentP = document.createElement("P");
currentD.className = "currentD";
currentP.className = "current";
const local = document.querySelector(".local");
const pmText = document.createTextNode(
`The current time is ${nHour}:${nMinute} P.M`
);
currentD.appendChild(currentP);
local.appendChild(currentD);
currentP.appendChild(pmText);
} else if (nHour < 12) {
const currentD = document.createElement("DIV");
const currentP = document.createElement("P");
currentD.className = "currentD";
currentP.className = "current";
const local = document.querySelector(".local");
const amText = document.createTextNode(
`The current time is ${nHour}:${nMinute} A.M`
);
currentD.appendChild(currentP);
local.appendChild(currentD);
currentP.appendChild(amText);
} else {
console.log("This is not a valid date");
}
// California Time // ****************************
// Clock constants using DOM querySelector by the ID
const hourHandC = document.querySelector("#hourC");
const minuteHandC = document.querySelector("#minuteC");
const secondHandC = document.querySelector("#secondC");
function startClockC() {
// Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
var laHr = moment.tz("America/Los_Angeles").hours(2);
var laMin = moment.tz("America/Los_Angeles").minute();
var laSec = moment.tz("America/Los_Angeles").second();
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
let hrPositionC = (laHr * 360) / 12 + (laMin * 360) / 60 / 12;
let minPositionC = (laMin * 360) / 60 + (laSec * 360) / 60 / 60;
let secPositionC = (laSec * 360) / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHandC.style.transform = `rotate(${hrPositionC}deg)`;
minuteHandC.style.transform = `rotate(${minPositionC}deg)`;
secondHandC.style.transform = `rotate(${secPositionC}deg)`;
}
// Variables for am and pm
var nHr = moment.tz("America/Los_Angeles").hour();
var nMin = moment.tz("America/Los_Angeles").minute();
var nSec = moment.tz("America/Los_Angeles").second();
// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (nHr >= 12) {
// Creating P element
const currentDI = document.createElement("DIV");
const currentPA = document.createElement("P");
currentDI.className = "currentDI";
currentPA.className = "current";
// Creating text node to show time.
const localC = document.querySelector(".california");
const pmText = document.createTextNode(
`The current time is ${nHr}:${nMin} P.M`
);
// appending to render time
currentDI.appendChild(currentPA);
localC.appendChild(currentDI);
currentPA.appendChild(pmText);
} else if (nHr < 12) {
const currentDI = document.createElement("DIV");
const currentPA = document.createElement("P");
currentDI.className = "currentDI";
currentPA.className = "currentPA";
const localC = document.querySelector(".california");
const amText = document.createTextNode(
`The current time is ${nHr}:${nMin} A.M`
);
currentDI.appendChild(currentPA);
localC.appendChild(currentDI);
currentPA.appendChild(amText);
} else {
console.log("This is not a valid date");
}
// London Time // ********************************
// Clock constants using DOM querySelector by the ID
const hourHandL = document.querySelector("#hourL");
const minuteHandL = document.querySelector("#minuteL");
const secondHandL = document.querySelector("#secondL");
function startClockL() {
// Using MomentJs and MomentTimeZone to get the current hour, minute, second in la
var loHr = moment.tz("Europe/London").hour();
var loMin = moment.tz("Europe/London").minute();
var loSec = moment.tz("Europe/London").second();
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
let hrPositionL = (loHr * 360) / 12 + (loMin * 360) / 60 / 12;
let minPositionL = (loMin * 360) / 60 + (loSec * 360) / 60 / 60;
let secPositionL = (loSec * 360) / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHandL.style.transform = `rotate(${hrPositionL}deg)`;
minuteHandL.style.transform = `rotate(${minPositionL}deg)`;
secondHandL.style.transform = `rotate(${secPositionL}deg)`;
}
// Variables for am and pm
var lHr = moment.tz("Europe/London").hour();
var lMin = moment.tz("Europe/London").minute();
var lSec = moment.tz("Europe/London").second();
// Creating a AM and PM conditional
// The conditional checks to see if the time is greater than or equal to 12 and if it is create a p element with a class of current and add current to the bottom of the local div and add the pm text to the bottom of the current p tag.
// The text shows the current time with including the minutes and am or pm.
if (lHr >= 12) {
// Creating P element
const currentLD = document.createElement("DIV");
const currentLP = document.createElement("P");
currentLD.className = "currentLD";
currentLP.className = "currentLP";
// Creating text node to show time.
const localLo = document.querySelector(".london");
const pmText = document.createTextNode(
`The current time is ${lHr}:${lMin} P.M`
);
// appending to render time
currentLD.appendChild(currentLP);
localLo.appendChild(currentLD);
currentLP.appendChild(pmText);
} else if (lHr < 12) {
const currentLD = document.createElement("DIV");
const currentLP = document.createElement("P");
currentLD.className = "currentLD";
currentLP.className = "currentLP";
const localLo = document.querySelector(".london");
const amText = document.createTextNode(
`The current time is ${lHr}:${lMin} A.M`
);
currentLD.appendChild(currentLP);
localLo.appendChild(currentLD);
currentLP.appendChild(amText);
} else {
console.log("This is not a valid date");
}
$(document).ready(function () {
var currentSetInterval = null;
currentSetInterval = window.setInterval(function () {
startClock();
startClockC();
startClockL();
}, 1000);
$("#addTime").on("click", function () {
if (currentSetInterval) {
window.clearInterval(currentSetInterval);
} else {
consol.log("Something went wrong");
}
// Clock constants using DOM querySelector by the ID
const hourHandN = document.querySelector("#hour");
const minuteHandN = document.querySelector("#minute");
const secondHandN = document.querySelector("#second");
var intervalInput = $("#input").val();
var interval = intervalInput;
var dateN = new Date();
window.milliAdd = interval * 60 * 60 * 1000;
dateN.setMilliseconds(dateN.getMilliseconds() + window.milliAdd);
const hourN = dateN.getHours();
const minuteN = dateN.getMinutes();
const secondN = dateN.getSeconds();
console.log(hourN, minuteN, secondN);
// Hand Position Formulas
// hr = the current hour * degrees in a cirlce/hours on the clock + currnet minute * degrees in a cirlce/minutes in an hour / 12
// min = current minute * degrees in a cirlce/ minutes in an hour + current second * 360 / seconds in a minute / 60
// sec = current second * degrees in a cirlce/ seconds in a minute
var hrPositionN = (hourN * 360) / 12 + (minuteN * 360) / 60 / 12;
var minPositionN = (minuteN * 360) / 60 + (secondN * 360) / 60 / 60;
var secPositionN = (secondN * 360) / 60;
// Applying the results from the above equation to the clock to show the correct hands position
hourHandN.style.transform = `rotate(${hrPositionN}deg)`;
minuteHandN.style.transform = `rotate(${minPositionN}deg)`;
secondHandN.style.transform = `rotate(${secPositionN}deg)`;
currentSetInterval = setInterval(function () {
console.log();
startClock();
startClockC();
startClockL();
}, 1000);
});
});
推荐阅读
- python - 我无法修复此错误(Selenium)[过时的元素参考:元素未附加到页面文档]
- sql - 我需要计算 SQL 中值大于 0 的列数
- cf-bosh - bosh 部署中的环境变量
- python - Python烧瓶for循环不打印所有输出?
- elasticsearch - 如何将日志从 Fortigate (VM) 传输到 ELK?
- javascript - WebUSB API 与串行 API
- amazon-web-services - AWS EC2 实例中 tensorflow 的安装错误
- amazon-s3 - 没有 OAI 的 S3 存储桶的 AWS CloudFront 预签名 URL 不起作用
- c++ - 链表是否为回文
- reactjs - 如何在引导程序中制作点击按钮,所有数据都来自 API