4
Answers

please help me for javascript code - ( countdown )

max nova

max nova
4y
676
1

I have to count down the system clock according to two different times. in hours, minutes, seconds. For example, a day is 24 hours.

Between 15:00:00 and 13:00:00 = 22 hours. When the clock is 15:00:00, it should count back from 22:00:00. and it must be 00:00:00 at 13:00:00.

Between 13:00:00 and 15:00:00 = 2 hours. When the clock is 13:00:00, it should count back from 2:00:00. and it must be 00:00:00 at 15:00:00.

 
i want it to repeat daily.

I've tried so hard for a few days, but I couldn't. please help me.

I add it again with the code I used.
 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript" src="jquery-3.4.1.js"></script>  
  6. </head>  
  7. <body>  
  8.   
  9.   
  10. <script type="text/javascript">  
  11.   
  12.     var timer = setInterval(function() {  
  13.     var now= new Date().getTime();  
  14.       
  15.     var endtime= new Date(13);  
  16.     var t = now - endtime;  
  17.   
  18.     var endtime2= new Date(15);  
  19.     var y = now - endtime2;  
  20.           
  21.           
  22.         if (t <= 21) {  
  23.             let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
  24.             let minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));  
  25.             let seconds = Math.floor((t % (1000 * 60)) / 1000);  
  26.   
  27.             document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) +  
  28.                     "<span class='label'> hr</span>";  
  29.   
  30.             document.getElementById("timer-minutes").innerHTML= ("0" + minutes).slice(-2) +  
  31.                     "<span class='label'> mn</span>";  
  32.   
  33.             document.getElementById("timer-seconds").innerHTML= ("0" + seconds).slice(-2) +  
  34.                     "<span class='label'> sc</span>";  
  35.         }  
  36.         if (y >=22) {  
  37.             let hours = Math.floor((y % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
  38.             let minutes = Math.floor((y % (1000 * 60 * 60)) / (1000 * 60));  
  39.             let seconds = Math.floor((y % (1000 * 60)) / 1000);  
  40.   
  41.             document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) +  
  42.                     "<span class='label'> hr</span>";  
  43.   
  44.             document.getElementById("timer-minutes").innerHTML= ("0" + minutes).slice(-2) +  
  45.                     "<span class='label'> mn</span>";  
  46.   
  47.             document.getElementById("timer-seconds").innerHTML= ("0" + seconds).slice(-2) +  
  48.                     "<span class='label'> sc</span>";  
  49.         }  
  50.         else {  
  51.             document.getElementById("timer").innerHTML = "There is a problem!";  
  52.         }  
  53.     }, 1000);  
  54. </script>  
  55.   
  56. <div class="container">  
  57.     <p id="timer">  
  58.   
  59.         <span id="timer-hours"></span>  
  60.         <span id="timer-minutes"></span>  
  61.         <span id="timer-seconds"></span>  
  62.     </p>  
  63. </div>  
  64.   
  65. </body>  
  66. </html>  
Answers (4)
2
Sachin Singh

Sachin Singh

NA 55.8k 87.9k 4y
i couldn't understand your requirement completely but seems you want something like between 15 to 13 (22 hrs) and then 13 to 15 (2 hrs) then please test this logic
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <script src="~/Scripts/jquery-3.4.1.min.js"></script>  
  7.     <style>  
  8.         
  9.  
  10.         #the-final-countdown {  
  11.             background: #333;  
  12.             font-family: 'Lato', sans-serif;  
  13.             text-align: center;  
  14.             color: #eee;  
  15.             text-shadow: 1px 1px 5px black;  
  16.             padding: 1rem 0;  
  17.             font-size: 3rem;  
  18.             border: 1px solid #000;  
  19.         }  
  20.     </style>  
  21. </head>  
  22. <body>  
  23.   
  24.     <div id="the-final-countdown">  
  25.         <p></p>  
  26.     </div>  
  27.   
  28.     <script>  
  29.         $(function () {  
  30.              
  31.             setInterval(function time() {  
  32.                 var d = new Date();  
  33.                 if (d.getHours != 14 || d.getHours != 15) {  
  34.   
  35.                     var hours = 22 - d.getHours();  
  36.                 }  
  37.                 else {  
  38.                     var hours = 2 - d.getHours();  
  39.                 }  
  40.                
  41.             
  42.                  
  43.                 var min = 60 - d.getMinutes();  
  44.                 if ((min + '').length == 1) {  
  45.                     min = '0' + min;  
  46.                 }  
  47.                 var sec = 60 - d.getSeconds();  
  48.                 if ((sec + '').length == 1) {  
  49.                     sec = '0' + sec;  
  50.                 }  
  51.                 $('#the-final-countdown p').html(hours + ':' + min + ':' + sec)  
  52.                  
  53.   
  54.             },1000)  
  55.           
  56.   
  57.         })  
  58.           
  59.     </script>  
  60.   
  61. </body>  
  62. </html> 
 
2
Asma Khalid

Asma Khalid

110 16.8k 9.8m 4y
You can use Jquery Plugin i.e.  https://bit.ly/393buKY
 
Mark answer as accpted if helpful
 
Thanks & Regards,
Asma Khalid
 
For More Visit: www.asmak9.com or www.bytezaar.com
1
max novaa

max novaa

NA 5 3 4y
hello mr.Sachin Singh
 
I guess you brought me luck. I finally did. Thanks for your help. I couldn't have done this without you. thank you so much. :)
1
Sachin Singh

Sachin Singh

NA 55.8k 87.9k 4y
please use as it is by copy paste and test
and then let me know what are you getting and what should be the exact results so that i could help in right direction.
thanks.
Next Recommended Forum