I want to reduce the amount of this code!

Asked 1 years ago, Updated 1 years ago, 28 views

I would like to implement JavaScript chimes.
I wanted to reduce the amount of code because of the large amount of code.

//setInterval (String, mmS) 1000mms = 1s
setInterval (clock, 1000); // Reflect results every second

function clock() {
  var weeks = new Array("Sun", "Mon", "Thu", "Wed", "Thr", "Fri", "Sat");
  // Output the day of the week
  var now = new Date();
  variable=now.getFullYear();
  varmo = now.getMonth()+1;
  vard = now.getDate();
  varw=weeks [now.getDay()];
  varh = now.getHours();
  varmi = now.getMinutes();
  vars = now.getSeconds();

  if(mo<10){
    mo = "0" + mo
  };
  if(d<10){
    d = "0" + d;
  }
  if(mi<10){
    mi = "0" + mi;
  }
  if(s<10){
    s = "0" + s;
  }

  vardate=y+"/"+mo+"/"+d+"("+w+")";
  var time=h+":"+mi+":"+s;

  document.getElementById("clock_date").innerHTML=y+"/"+mo+"/"+d+"("+w+")";
  document.getElementById("clock_time").innerHTML=h+":"+mi+":"+s;
  // document.getElementById("clock_date").innerHTML=date;
  // document.getElementById("clock_time").innerHTML=time;
  document.getElementById("clock_frame").style.fontSize=window.innerWidth/10+"px";

  // varget_time = document.getElementById('clock_time'); // Get HTML element object
  // console.log(get_time); // Log out all [object HTMLParagramElement] elements?
  varget_date = document.getElementById('clock_date').innerHTML;
  console.log(get_date); // Output for days only

  varget_time = document.getElementById('clock_time').innerHTML;
  console.log(get_time); // Time only output

  console.log(w);

  if(w==="Sun"||w==="Sat"){//if not Saturday or Sunday
    console.log("Holiday");

    // keep one's chimes
  } else{
    console.log("Weekdays";

    switch(time){
    case "09:30:00" :// 0 limit START
      document.getElementById("Sound").play();
      alert("The 0th period has started.");
      break;

    case "09:45:00" :// 0 limit END · 1 limit START
      document.getElementById("Sound").play();
      alert("The first period has started.");
      break;

    case "10:35:00" :// 1st limit END · Break time START
      document.getElementById("Sound").play();
      alert("The first period is over.");
      break;

    case "10:45:00" :// Break time END · 2nd limit START
      document.getElementById("Sound").play();
      alert("The second period has started.");
      break;

    case "11:35:00" :// 2nd limit END · Break time START
      document.getElementById("Sound").play();
      alert("The second period is over.");
      break;

    case "11:45:00" :// Break time END · 3rd limit START
      document.getElementById("Sound").play();
      alert("The third period has begun.");
      break;

    case "12:35:00" :// 3rd limit END ·Lunch break START
      document.getElementById("Sound").play();
      alert("The third period is over.");
      break;

    case "13:15:00" :// Lunch break END ·Limited 4 START
      document.getElementById("Sound").play();
      alert("The fourth period has begun.");
      break;

    case "14:05:00" :// 4th limit END · Break time START
      document.getElementById("Sound").play();
      alert("The fourth period is over.");
      break;

    case "14:15:00" :// Break time END ·5 limit START
      document.getElementById("Sound").play();
      alert("The 5th period has started.");
      break;

    case "15:05:00" :// 5 limit END · Break time START
      document.getElementById("Sound").play();
      alert("The 5th period is over.");
      break;

    case "15:15:00" :// Break time END ·6 limit START
      document.getElementById("Sound").play();
      alert("The 6th period has started.");
      break;

    Case "16:05:00":// 6th limit END, closing ceremony, etc.
      document.getElementById("Sound").play();
      alert("The 6th period is over.");
      break;

    case "16:15:00" :// Break time END ·7 limit START
      document.getElementById("Sound").play();
      alert("The 7th period has started.");
      break;

    case "17:05:00" ://7 limit END
      document.getElementById("Sound").play();
      alert("The 7th period is over.");
      break;

    case "17:50:00" :// Encourage to leave school    
      document.getElementById("Sound").play();
      alert("It's 10 minutes before I leave school.");
      break;

    case "18:00:00" :// Completely leaving school
      document.getElementById("Sound").play();
      alert("It's time to go home.");
      // Play music
      break;

    default:
      break;

    }
  }
}

javascript

2022-09-30 19:50

1 Answers

Use JavaScript objects (associative arrays) to

const data={
    "09:30:00":{lesson:0, message:"Start",
    "09:45:00": {lesson:1, message: "Start",
    "10:35:00": {lesson:1, message: "End"},
    "10:45:00":{lesson:2, message:"Start",
    "11:35:00": {lesson:2, message: "End"},
    "11:45:00":{lesson:3, message:"Start",
    "12:35:00": {lesson:3, message: "End"},
    "13:15:00":{lesson:4, message:"Start",
    "14:05:00": {lesson:4, message: "End"},
    "14:15:00":{lesson:5, message:"Start",
    "15:05:00": {lesson:5, message: "End"},
    "15:15:00":{lesson:6, message:"Start",
    "16:05:00": {lesson:6, message: "End"},
    "16:15:00":{lesson:7, message:"Start",
    "17:05:00": {lesson:7, message: "End"},
    "17:50:00": {lesson:8, message: "10 minutes before leaving school."},
    "18:00:00": {lesson:9, message: "It's time to leave school."}
};

switch(time) It is quite refreshing to do the following:

if(time in data){
    document.getElementById("Sound").play();
    if(data[time].lesson<8)
        alert(`${data[time].lesson}The time limit is ${data[time].message}.`);
    else{
        alert(data[time].message);
        if(data[time].lesson===9){
            // Play music
        }
    }
}


2022-09-30 19:50

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.