如何将代码固定到可以设置的时钟上，使其工作？

Question

Well, I am trying to make a clock that you can change the time of, but it is not really working out the way that I would like it to.

Basically, I would like it to use what I stated in the JavaScript ( time("manualSet","12-hour","11","4","2021","16","30","0"); ), so I would like the time to stay the same and count up from the time that is stated.

So, here is the code:

 var classPeriodDiv = document.getElementById("classPeriod"); var schoolGoDiv = document.getElementById("schoolGo"); var t = 0; function time(type, style, month, curDay, year, hour, minute, second) { var tmtd=0; var tmtdt=0; function currentTime(style) { let date=new Date();const mh=new Array();mh[0]="1";mh[1]="2";mh[2]="3";mh[3]="4";mh[4]="5";mh[5]="6";mh[6]="7";mh[7]="8";mh[8]="9";mh[9]="10";mh[10]="11";mh[11]="12"; let mt=new Array();mt[0]="January";mt[1]="February";mt[2]="March";mt[3]="April";mt[4]="May";mt[5]="June";mt[6]="July";mt[7]="August";mt[8]="September";mt[9]="October";mt[10]="November";mt[11]="December"; let mn=mh[date.getMonth()]; let mnt=mt[date.getMonth()]; let dd=date.getDate(); let yy=date.getFullYear(); let hh=date.getHours(); let hr=date.getHours(); let mm=date.getMinutes(); let ss=date.getSeconds(); let session="AM"; if(hh==0){hh=12;} if(style=="12-hour"){if(hh>12){hh=hh-12;session="PM";}document.getElementById("clockType").innerHTML="12 Hour";}else if(style=="24-hour"){document.getElementById("clockType").innerHTML="24 Hour";} mn=(mn<10)?"0"+mn:mn; dd=(dd<10)?"0"+dd:dd; hh=(hh<10)?"0"+hh:hh; mm=(mm<10)?"0"+mm:mm; ss=(ss<10)?"0"+ss:ss; let time1=mn+"-"+dd+"-"+yy; let time2=hh+":"+mm+":"+ss+" "+session; var day; if(date.getDay()==0){day="Sun";}else if(date.getDay()==1){day="Mon";}else if(date.getDay()==2){day="Tues";}else if(date.getDay()==3){day="Weds";}else if(date.getDay()==4){day="Thurs";}else if(date.getDay()==5){day="Fri";}else if(date.getDay()==6){day="Sat";} if(tmtd==0){document.getElementById("date").innerHTML=time1;tmtd=1;} if(document.getElementById("date").innerHTML!=time1){}else{document.getElementById("date").innerHTML=time1;} document.getElementById("tDate").innerHTML=time2; var colectionMinutes=(hr*60)+mm; document.getElementById("date").addEventListener("click",function(){if(document.getElementById("date").innerHTML==time1){document.getElementById("date").innerHTML=mnt+"-"+day+"~"+dd+"-"+yy;}else{document.getElementById("date").innerHTML=time1;}}); function schoolTime() { if (date.getDay()==0||date.getDay()==6) { schoolGoDiv.innerHTML = "Today is not a School Day."; } else { schoolGoDiv.innerHTML = "Today is a School Day."; } } function currentClass(){ colectionMinutes=(hr*60)+mm; if(date.getDay()==1||date.getDay()==2||date.getDay()==4||date.getDay()==5){ if(colectionMinutes>=460){if(colectionMinutes<=512){classPeriodDiv.innerHTML="1st Period";}} if(colectionMinutes>=512){if(colectionMinutes<=569){classPeriodDiv.innerHTML="2nd Period";}} if(colectionMinutes>=569){if(colectionMinutes<=625){classPeriodDiv.innerHTML="3rd Period";}} if(colectionMinutes>=625){if(colectionMinutes<=681){classPeriodDiv.innerHTML="4th Period";}} if(colectionMinutes>=681){if(colectionMinutes>=681){if(colectionMinutes<=708){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 1st Lunch";}}if(colectionMinutes>=708){if(colectionMinutes<=735){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 2nd Lunch";}}if(colectionMinutes>=735){if(colectionMinutes<=768){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 3rd Lunch";}}} if(colectionMinutes>=768){if(colectionMinutes<=824){classPeriodDiv.innerHTML="6th Period";}} if(colectionMinutes>=824){if(colectionMinutes<=880){classPeriodDiv.innerHTML="7th Period";}} }else if(date.getDay()==3){ if(colectionMinutes>=460){if(colectionMinutes<=507){classPeriodDiv.innerHTML="1st Period";}} if(colectionMinutes>=507){if(colectionMinutes<=558){classPeriodDiv.innerHTML="2nd Period";}} if(colectionMinutes>=558){if(colectionMinutes<=609){classPeriodDiv.innerHTML="3rd Period";}} if(colectionMinutes>=609){if(colectionMinutes<=660){classPeriodDiv.innerHTML="4th Period";}} if(colectionMinutes>=660){if(colectionMinutes<=694){classPeriodDiv.innerHTML="Advisory";}} if(colectionMinutes>=694){if(colectionMinutes>=694){if(colectionMinutes<=721){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 1st Lunch";}}if(colectionMinutes>=721){if(colectionMinutes<=749){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 2nd Lunch";}}if(colectionMinutes>=749){if(colectionMinutes<=778){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 3rd Lunch";}}} if(colectionMinutes>=778){if(colectionMinutes<=829){classPeriodDiv.innerHTML="6th Period";}} if(colectionMinutes>=829){if(colectionMinutes<=880){classPeriodDiv.innerHTML="7th Period";}} } if(colectionMinutes>=880){if(colectionMinutes<=1440){classPeriodDiv.innerHTML="Dissmissed";}} if(colectionMinutes>=0){if(colectionMinutes<=460){classPeriodDiv.innerHTML="Before School - Dissmissed";}} } schoolTime(); currentClass(); //let t=setTimeout(function(){currentTime(style);schoolTime();currentClass();},1000); } function manualSetTime(style, month, curDay, year, hour, minute, second) { let date2=new Date(); if(tmtdt==0){ date2.setMonth(month); date2.setDate(curDay); date2.setFullYear(year); date2.setHours(hour); date2.setMinutes(minute); date2.setSeconds(second); tmtdt=1; } const mh=new Array();mh[0]="1";mh[1]="2";mh[2]="3";mh[3]="4";mh[4]="5";mh[5]="6";mh[6]="7";mh[7]="8";mh[8]="9";mh[9]="10";mh[10]="11";mh[11]="12"; let mt=new Array();mt[0]="January";mt[1]="February";mt[2]="March";mt[3]="April";mt[4]="May";mt[5]="June";mt[6]="July";mt[7]="August";mt[8]="September";mt[9]="October";mt[10]="November";mt[11]="December"; let mn=mh[date2.getMonth()]; let mnt=mt[date2.getMonth()]; let dd=date2.getDate(); let yy=date2.getFullYear(); let hh=date2.getHours(); let hr=date2.getHours(); let mm=date2.getMinutes(); let ss=date2.getSeconds(); let session="AM"; if(hh==0){hh=12;} if(style=="12-hour"){if(hh>12){hh=hh-12;session="PM";}document.getElementById("clockType").innerHTML="12 Hour";}else if(style=="24-hour"){document.getElementById("clockType").innerHTML="24 Hour";} mn=(mn<10)?"0"+mn:mn; dd=(dd<10)?"0"+dd:dd; hh=(hh<10)?"0"+hh:hh; mm=(mm<10)?"0"+mm:mm; ss=(ss<10)?"0"+ss:ss; let time1=mn+"-"+dd+"-"+yy; let time2=hh+":"+mm+":"+ss+" "+session; var day; if(date2.getDay()==0){day="Sun";}else if(date2.getDay()==1){day="Mon";}else if(date2.getDay()==2){day="Tues";}else if(date2.getDay()==3){day="Weds";}else if(date2.getDay()==4){day="Thurs";}else if(date2.getDay()==5){day="Fri";}else if(date2.getDay()==6){day="Sat";} if(tmtd==0){document.getElementById("date").innerHTML=time1;tmtd=1;}if(document.getElementById("date").innerHTML!=time1){}else{document.getElementById("date").innerHTML=time1;} document.getElementById("tDate").innerHTML=time2; var colectionMinutes=(hr*60)+mm; document.getElementById("date").addEventListener("click",function(){if(document.getElementById("date").innerHTML==time1){document.getElementById("date").innerHTML=mnt+"-"+day+"~"+dd+"-"+yy;}else{document.getElementById("date").innerHTML=time1;}}); //let tt=setTimeout(function(){manualSetTime(style,month,curDay,year,hour,minute,second);},1000); } clearInterval(t); if(type=="current"){ t=setInterval(function(){ currentTime(style); },1000); }else if(type=="manualSet"){ t=setInterval(function(){ manualSetTime(style,month,curDay,year,hour,minute,second); },1000); } } // The following is for testing only time("manualSet","12-hour","11","4","2021","16","30","0");

 .ss { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .buttons { text-align: center; } body { overflow-x: hidden; } button { cursor: pointer; } /* header */ header { display: block; text-align: center; /*padding: 3px;*/ } /* Clock */ #time { font-size: 20px; position: absolute; top: 10px; left: 0; width: 500px; } #clockType { /*font-size: 16px;*/ display: block; } #date { /*align-items: normal; background-color: rgba(0,0,0,0); border-color: rgb(0, 0, 238); border-style: none; box-sizing: content-box; cursor: default; font: inherit; height: auto; padding: 0; perspective-origin: 0 0; text-align: start; transform-origin: 0 0; width: auto; -moz-appearance: none; -webkit-logical-height: 1em; -webkit-logical-width: auto; color: rgb(0, 0, 238); text-decoration: underline; background: none!important; border: none; padding: 0!important; font-family: arial, sans-serif; font-size: 20px; font-weight: normal;*/ display: block; } #tDate { /*font-size: 18px;*/ display: block; } #schoolGo { /*display: block;*/ } #classPeriod { /*display: block;*/ }

 <!DOCTYPE html> <html> <head> <meta name="build-version" content="V00.004.00" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HPHS Bell Schedule</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <header> <!-- Start Relavent Section --> <div id="time" class="ss"> <p id="clock"> <span id="clockType"></span> <span id="date"></span> <span id="tDate"></span> <span>~ <span id="schoolGo"></span> -||- <span id="classPeriod"></span> ~</span> </p> </div> <!-- End Relavent Section --> <!-- Some other content that is not important --> </header> </div> <!-- The following is for testing only --> <br><br><br><br><br><br><br> <button onclick="time('current','12-hour')">Current (12 Hour)</button> <br> <button onclick="time('current','24-hour')">Current (24 Hour)</button> <!-- Some other content that is not important --> </body> </html>

As you could see in the snippet above, when the time is set with the manualset type, it just doesn't stick to what I stated, so how do I fix that.

Also, you can click the month-day-year for more info.

Also, just ignore schoolTime() and currentClass() , as they are not all that important to the problem that I am trying to fix.

Answer 1

Put t in higher scope, clearInterval and use the same timer.

 var classPeriodDiv = document.getElementById("classPeriod"); var schoolGoDiv = document.getElementById("schoolGo"); var t = 0 // add this function time(type, style, month, curDay, year, hour, minute, second) { var tmtd=0; var tmtdt=0; function currentTime(style) { let date=new Date();const mh=new Array();mh[0]="1";mh[1]="2";mh[2]="3";mh[3]="4";mh[4]="5";mh[5]="6";mh[6]="7";mh[7]="8";mh[8]="9";mh[9]="10";mh[10]="11";mh[11]="12"; let mt=new Array();mt[0]="January";mt[1]="February";mt[2]="March";mt[3]="April";mt[4]="May";mt[5]="June";mt[6]="July";mt[7]="August";mt[8]="September";mt[9]="October";mt[10]="November";mt[11]="December"; let mn=mh[date.getMonth()]; let mnt=mt[date.getMonth()]; let dd=date.getDate(); let yy=date.getFullYear(); let hh=date.getHours(); let hr=date.getHours(); let mm=date.getMinutes(); let ss=date.getSeconds(); let session="AM"; if(hh==0){hh=12;} if(style=="12-hour"){if(hh>12){hh=hh-12;session="PM";}document.getElementById("clockType").innerHTML="12 Hour";}else if(style=="24-hour"){document.getElementById("clockType").innerHTML="24 Hour";} mn=(mn<10)?"0"+mn:mn; dd=(dd<10)?"0"+dd:dd; hh=(hh<10)?"0"+hh:hh; mm=(mm<10)?"0"+mm:mm; ss=(ss<10)?"0"+ss:ss; let time1=mn+"-"+dd+"-"+yy; let time2=hh+":"+mm+":"+ss+" "+session; var day; if(date.getDay()==0){day="Sun";}else if(date.getDay()==1){day="Mon";}else if(date.getDay()==2){day="Tues";}else if(date.getDay()==3){day="Weds";}else if(date.getDay()==4){day="Thurs";}else if(date.getDay()==5){day="Fri";}else if(date.getDay()==6){day="Sat";} if(tmtd==0){document.getElementById("date").innerHTML=time1;tmtd=1;} if(document.getElementById("date").innerHTML!=time1){}else{document.getElementById("date").innerHTML=time1;} document.getElementById("tDate").innerHTML=time2; var colectionMinutes=(hr*60)+mm; document.getElementById("date").addEventListener("click",function(){if(document.getElementById("date").innerHTML==time1){document.getElementById("date").innerHTML=mnt+"-"+day+"~"+dd+"-"+yy;}else{document.getElementById("date").innerHTML=time1;}}); function schoolTime() { if (date.getDay()==0||date.getDay()==6) { schoolGoDiv.innerHTML = "Today is not a School Day."; } else { schoolGoDiv.innerHTML = "Today is a School Day."; } } function currentClass(){ colectionMinutes=(hr*60)+mm; if(date.getDay()==1||date.getDay()==2||date.getDay()==4||date.getDay()==5){ if(colectionMinutes>=460){if(colectionMinutes<=512){classPeriodDiv.innerHTML="1st Period";}} if(colectionMinutes>=512){if(colectionMinutes<=569){classPeriodDiv.innerHTML="2nd Period";}} if(colectionMinutes>=569){if(colectionMinutes<=625){classPeriodDiv.innerHTML="3rd Period";}} if(colectionMinutes>=625){if(colectionMinutes<=681){classPeriodDiv.innerHTML="4th Period";}} if(colectionMinutes>=681){if(colectionMinutes>=681){if(colectionMinutes<=708){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 1st Lunch";}}if(colectionMinutes>=708){if(colectionMinutes<=735){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 2nd Lunch";}}if(colectionMinutes>=735){if(colectionMinutes<=768){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 3rd Lunch";}}} if(colectionMinutes>=768){if(colectionMinutes<=824){classPeriodDiv.innerHTML="6th Period";}} if(colectionMinutes>=824){if(colectionMinutes<=880){classPeriodDiv.innerHTML="7th Period";}} }else if(date.getDay()==3){ if(colectionMinutes>=460){if(colectionMinutes<=507){classPeriodDiv.innerHTML="1st Period";}} if(colectionMinutes>=507){if(colectionMinutes<=558){classPeriodDiv.innerHTML="2nd Period";}} if(colectionMinutes>=558){if(colectionMinutes<=609){classPeriodDiv.innerHTML="3rd Period";}} if(colectionMinutes>=609){if(colectionMinutes<=660){classPeriodDiv.innerHTML="4th Period";}} if(colectionMinutes>=660){if(colectionMinutes<=694){classPeriodDiv.innerHTML="Advisory";}} if(colectionMinutes>=694){if(colectionMinutes>=694){if(colectionMinutes<=721){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 1st Lunch";}}if(colectionMinutes>=721){if(colectionMinutes<=749){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 2nd Lunch";}}if(colectionMinutes>=749){if(colectionMinutes<=778){classPeriodDiv.innerHTML="5th Period &#160;--&#160; 3rd Lunch";}}} if(colectionMinutes>=778){if(colectionMinutes<=829){classPeriodDiv.innerHTML="6th Period";}} if(colectionMinutes>=829){if(colectionMinutes<=880){classPeriodDiv.innerHTML="7th Period";}} } if(colectionMinutes>=880){if(colectionMinutes<=1440){classPeriodDiv.innerHTML="Dissmissed";}} if(colectionMinutes>=0){if(colectionMinutes<=460){classPeriodDiv.innerHTML="Before School - Dissmissed";}} } schoolTime(); currentClass(); //let t=setTimeout(function(){currentTime(style);schoolTime();currentClass();},1000); } function manualSetTime(style, month, curDay, year, hour, minute, second) { let date2=new Date(); if(tmtdt==0){ date2.setMonth(month); date2.setDate(curDay); date2.setFullYear(year); date2.setHours(hour); date2.setMinutes(minute); date2.setSeconds(second); tmtdt=1; } const mh=new Array();mh[0]="1";mh[1]="2";mh[2]="3";mh[3]="4";mh[4]="5";mh[5]="6";mh[6]="7";mh[7]="8";mh[8]="9";mh[9]="10";mh[10]="11";mh[11]="12"; let mt=new Array();mt[0]="January";mt[1]="February";mt[2]="March";mt[3]="April";mt[4]="May";mt[5]="June";mt[6]="July";mt[7]="August";mt[8]="September";mt[9]="October";mt[10]="November";mt[11]="December"; let mn=mh[date2.getMonth()]; let mnt=mt[date2.getMonth()]; let dd=date2.getDate(); let yy=date2.getFullYear(); let hh=date2.getHours(); let hr=date2.getHours(); let mm=date2.getMinutes(); let ss=date2.getSeconds(); let session="AM"; if(hh==0){hh=12;} if(style=="12-hour"){if(hh>12){hh=hh-12;session="PM";}document.getElementById("clockType").innerHTML="12 Hour";}else if(style=="24-hour"){document.getElementById("clockType").innerHTML="24 Hour";} mn=(mn<10)?"0"+mn:mn; dd=(dd<10)?"0"+dd:dd; hh=(hh<10)?"0"+hh:hh; mm=(mm<10)?"0"+mm:mm; ss=(ss<10)?"0"+ss:ss; let time1=mn+"-"+dd+"-"+yy; let time2=hh+":"+mm+":"+ss+" "+session; var day; if(date2.getDay()==0){day="Sun";}else if(date2.getDay()==1){day="Mon";}else if(date2.getDay()==2){day="Tues";}else if(date2.getDay()==3){day="Weds";}else if(date2.getDay()==4){day="Thurs";}else if(date2.getDay()==5){day="Fri";}else if(date2.getDay()==6){day="Sat";} if(tmtd==0){document.getElementById("date").innerHTML=time1;tmtd=1;}if(document.getElementById("date").innerHTML!=time1){}else{document.getElementById("date").innerHTML=time1;} document.getElementById("tDate").innerHTML=time2; var colectionMinutes=(hr*60)+mm; document.getElementById("date").addEventListener("click",function(){if(document.getElementById("date").innerHTML==time1){document.getElementById("date").innerHTML=mnt+"-"+day+"~"+dd+"-"+yy;}else{document.getElementById("date").innerHTML=time1;}}); //let tt=setTimeout(function(){manualSetTime(style,month,curDay,year,hour,minute,second);},1000); } // then change to this, note t is the same timer clearInterval(t) if(type=="current"){ t=setInterval(function(){ currentTime(style); },1000); }else if(type=="manualSet"){ t=setInterval(function(){ manualSetTime(style,month,curDay,year,hour,minute,second); },1000); } } // The following is for testing only time("manualSet","12-hour","11","4","2021","16","30","0");

 .ss { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .buttons { text-align: center; } body { overflow-x: hidden; } button { cursor: pointer; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { text-align: center; } h1 { font-size: 50px; } h2 { font-size: 28px; } /* header */ header { display: block; text-align: center; /*padding: 3px;*/ } #h1Border { border: 2px solid black; position: absolute; top: 36px; left: 440px; width: 480px; height: 50px; } /* Clock */ #time { font-size: 20px; position: absolute; top: 10px; left: 0; width: 500px; } #clockType { /*font-size: 16px;*/ display: block; } #date { /*align-items: normal; background-color: rgba(0,0,0,0); border-color: rgb(0, 0, 238); border-style: none; box-sizing: content-box; cursor: default; font: inherit; height: auto; padding: 0; perspective-origin: 0 0; text-align: start; transform-origin: 0 0; width: auto; -moz-appearance: none; -webkit-logical-height: 1em; -webkit-logical-width: auto; color: rgb(0, 0, 238); text-decoration: underline; background: none!important; border: none; padding: 0!important; font-family: arial, sans-serif; font-size: 20px; font-weight: normal;*/ display: block; } #tDate { /*font-size: 18px;*/ display: block; } #schoolGo { /*display: block;*/ } #classPeriod { /*display: block;*/ }

 <!DOCTYPE html> <html> <head> <meta name="build-version" content="V00.004.00" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HPHS Bell Schedule</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <header> <!-- Start Relavent Section --> <div id="time" class="ss"> <p id="clock"> <span id="clockType"></span> <span id="date"></span> <span id="tDate"></span> <span>~ <span id="schoolGo"></span> -||- <span id="classPeriod"></span> ~</span> </p> </div> <!-- End Relavent Section --> <!-- Some other content that is not important --> </header> </div> <!-- The following is for testing only --> <br><br><br><br><br><br> <p>Note: The glitch that makes the thing that states the clock hour format swap back and forth, is only present with the click of the buttons.</p> <button onclick="time('current','12-hour')">Current (12 Hour)</button> <br> <button onclick="time('current','24-hour')">Current (24 Hour)</button> <!-- Some other content that is not important --> </body> </html>