Для моего проекта «Фаза-1» моя группа создала веб-сайт, на котором, среди прочего, рассказывается, сколько времени займет путешествие с одной планеты на другую с использованием различных способов передвижения. При кодировании части веб-сайта, отображающей информацию, я столкнулся с проблемой, как отображать, сколько времени потребуется пользователю, чтобы путешествовать с планеты на планету. Узнать номер легко, это просто расстояние, деленное на скорость выбранного автомобиля. Но показывать пользователю, что путь от Солнца до Земли займет 6 335 926 390,588 секунд, не очень полезно. Итак, что было бы лучшим способом превратить это число во что-то более читаемое для пользователя. Немного подумав, я придумал эту функцию:

//converts a given amount of seconds and returns a more readable time duration
function secondsToString(seconds){
    var numyears = Math.floor(seconds / 31536000);
    var numdays = Math.floor((seconds % 31536000) / 86400); 
    var numhours = Math.floor(((seconds % 31536000) % 86400) / 3600);
    var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
    var numseconds = Math.floor((((seconds % 31536000) % 86400) % 3600) % 60);
    return numyears.toLocaleString() + " years " +  numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds";
}

Он принимает заданное количество секунд, а затем возвращает строку, в которой указано, сколько лет, дней, часов, менуэтов и секунд равно количеству секунд. Как видите, эта функция широко использует символ %, также известный как оператор остатка.

Так что же такое остаточный оператор?

Оператор остатка — это удобный оператор, который дает вам остаток, когда вы делите левое число на правое число. Например:

console.log(13 % 5);
// expected output: 3

console.log(-13 % 5);
// expected output: -3

console.log(4 % 2);
// expected output: 0

console.log(-4 % 2);
// expected output: -0

Этот оператор в сочетании с использованием функции Math.floor(), которая просто округляет заданное число до следующего целого числа, если это возможно, позволяет нам заставить наш код написать наше предложение за нас. В то время как узнать количество лет, которое займет наше путешествие, так же просто, как использовать Math.floor для количества секунд поездки, деленного на количество секунд в году. Выяснение дней, часов и секунд предполагает использование оператора остатка.

Когда мы вызвали Math.floor, чтобы узнать, сколько лет займет путешествие (numyears в моем коде), мы, по сути, отбросили остаток секунд, которые в сумме не составили еще один полный год. Чтобы найти оставшиеся дни, которые потребуются для этой поездки, нам нужен способ конвертировать эти оставшиеся секунды в дни. Оператор остатка (%) выполняет именно эту функцию за нас. Итак, теперь все, что нам нужно сделать, чтобы найти оставшееся количество дней, — это заменить оператор деления (/) в строке, дающей нам «число лет», оператором остатка. Затем это вернет все оставшиеся секунды, которые не равны полному году. Все, что нам нужно сделать сейчас, чтобы превратить это в количество оставшихся дней, — это разделить это число на количество секунд в дне, а затем Math.floor все это, чтобы получить целое количество дней.

Теперь все, что нам нужно сделать, чтобы продолжить поиск напоминания о часах, менуэтах и ​​секундах, — это продолжить использовать оператор остатка в предыдущих строках, как показано в приведенном выше коде. После этого мы можем обернуть все в красивую строку, как показано в последней строке кода. Затем мы можем просто использовать эту функцию на нашем веб-сайте, чтобы обновить наш дисплей, добавив ее в нашу функцию обновления, например:

//calcualtes the time it will take given the vehicle selected and the distace between the planets
const tripInfoTime = document.getElementById("trip-time")
function calculateTimeForTrip (distance){
    //checks to make sure we picked a vehicle before we do the calcualtions
    if (mainVehicle !== null){
        //converts the time the trip will take into seconds
        const tripInSeconds = (distance / mainVehicle.speed) * 3600
        //converts the seconds into a readable string and displays it 
        tripInfoTime.innerText = `And will take ${secondsToString(tripInSeconds)}`
    }
}