I would like to create a real-time countdown for trains to and from Javascript.

now=new Date();
n = 0;

xday = new Date (2016, 10-1, 13, 4, 31, 0);
var datef = new Array (24*60*60*1000, 60*60*1000, 60*1000;

function countDown(){
  var time = new Array(4);
  vardeff=Math.abs(now.getTime()+n)-xday.getTime());
  n + = 1000;




  for(i=0;i<4;i++){
    time[i] = Math.floor(deff/datef[i]);
    def-=time[i]*datef[i];
  }
  document.Clock.displaymin.value=time[2];
  document.Clock.displaysec.value=time[3];

  setTimeout("countDown(), 1000);
}

countDown();

<form name="Clock" method="post" action="./">
  until the train arrives at the station
  <br>
  <input type="text" name="displaymin" size=2>
  <strong>minute</strong> 
  <input type="text" name="displaysec" size=2>
  <strong>seconds</strong> 
</form>

I want to make a countdown.
I'm a beginner, so I can't move forward easily.

"As for the contents, I would like to create a ""timer that counts down in real time whether the train will arrive at ""strong"" in xx minutes and xx seconds."""

Now we've reached the point of displaying minutes and seconds and counting down.

In fact, is it possible to create such a program using JavaScript?

○ Timeline
8:45 | 9:10 | 9:25 | 9:45 | 10:12 | ...

We will read such a timetable from the first train to the last train.
For example, if the 8:45 train passes by, we start the next 9:10 countdown.
*The countdown starts 20 minutes before the train arrives at 8:45 on the first train.
"After the last train, I would like to display ""Operation has ended"" and stop the timer until the next day."

I would like to repeat this series of events every day regardless of holidays.

I would like you to write the code for javascript for reference.
I'm sorry for being so brazen.
I look forward to hearing from you.

javascript html

2022-09-30 21:18

1 Answers

mjy is written on this site In general, it is basic to create the functions that you want to implement for each part.If you don't know how to do it after making it as detailed as possible, you are welcome to ask about it.

The implementation is quite appropriate, so the countDown() may be very ineffective or the day may be 12:00 AM, but I would appreciate it if you could tell me how to implement it.

// Timetable string
var timeTableString="0:01 | 8:45 | 12:00 | 21:52 | 23:25";

// Convert the string ↑ to Date and put it in the following array
var parsedTimeTable=[];

// Obtain today's date and time
var now = new Date(),
  year=now.getFullYear(),
  month = now.getMonth(),
  day = now.getDate();

// Separate strings by hour with String.split("|")
for(var str of timeTableString.split("|"){
  // Separate hours and minutes
  var str2 = str.split(":"),
    hour = parseInt(str2[0], 10),
    minute=parseInt(str2[1], 10);
  // Put a new Date in the array
  parsedTimeTable.push(new Date(year, month, day, hour, minute));
}

// Get elements for display
var display = document.getElementById("display");

// A function called per second
function countDown(){
  var nextTime = null;
  for (time of parsedTimeTable) {
    // Look for a time that is not yet past
    if((time.getTime()-Date.now())>0){
      // If you find it, save it to nextTime and leave the loop
      nextTime = time;
      break;
    }
  }
  // If there is no time saved in nextTime, today's minutes are over.
  if(nextTime===null){
    display.innerHTML = "Operation is closed";
  }　
  else{
    // Separates remaining milliseconds into hours, minutes, and seconds
    var diff = time.getTime() - Date.now();
    diff = Math.floor(diff/1000);
    var hour = Math.floor(diff/(60*60));
    diff = diff% (60*60);
    varmin = Math.floor(diff/60);
    diff = diff%60;
    // Display
    display.innerHTML = "Until the next train ("+time.toString()+")" + hour + "time" + min + "minutes" + diff + "seconds";
  }
}

// If you don't call it once first, it will take 1 second for the initial display.
countDown();
// Invoke every 1 second (1000 milliseconds)
setInterval (countDown, 1000);

<spanid="display"></span>

2022-09-30 21:18

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656