Ключом к реализации этого эффекта является использование объектов даты и установки.
Всего есть три примера. Структура HTML выглядит следующим образом, поэтому стиль CSS не добавляется.
<body> Текущее время: <p id = "p1"> </p> вступительное экзамено.
В основном понимайте реализацию JavaScript
window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); p3 = document.getElementbyId ("p3"); showtime1 (); showtime2 (); showtime3 ();}1. Простая реализация текущего времени дисплея
Function Showtime1 () {var nowdate = new Date (); // Создать объект даты, чтобы получить текущее время var year = nowdate.getbleear (), // получить годовой месяц = nowdate.getmonth ()+1, // Получить месяц, getMonth () получает 0-11, и вам нужно добавить 1 date = howdate.getdate (), // get the Day-lete. Week = [«воскресенье», «понедельник», «вторник», «четверг», «пятница», «Суббота», h = nowdate.gethours (), m = owndate.getminutes (), s = wyldate.getseconds (), h = проверка (h), // проверка функций используется для форматирования времени, минуты, секунды m = проверка (m), s); p1.innerhtml = Год+"Год"+месяц+"месяц"+дата+"день"+неделя [день]+h+":"+m+":"+s; SetTimeout (Showtime1, 1000); // Повторите саму функцию}Функция проверки времени следующей:
функция проверка времени (i) {if (i <10) {i = "0"+i; } return i;}Поскольку формат времени, который вы обычно видите, обычно составляет 00:00:01, а Gethours, Getminutes, Getseconds получают форматы от 0 до 9, а не от 00 до 09. Следовательно, в процессе смены с 9 до 10 есть однозначная цифра, которая становится двузначной цифрой, а также становится 0, когда заряд составляет от 59 секунд до 0 секунды или 59 минут до 0 минут или 23.
Например, 23:59:59 должно измениться на 00:00:00 в следующей секунде; Если функция проверки времени не используется для обработки, она изменится до 0: 0: 0, что сделает формат немного непоследовательным, и есть также визуальные мутации увеличения или уменьшения количества слов. (Следующие два примера не используют функцию проверки времени для обработки времени, минуты и второго !!!)
2. Эффект обратного отсчета на вступительный экзамен в колледже реализован
Функция showtime2 () {var nowtime = new Date (), // Получить текущее время времени окончания времени = новая дата ("2017/6/6"); // Определить время окончания var var leftmim Левый = Math.floor (левша/(1000*60*60)%24), // количество часов левша = мат. SetTimeout (Showtime2, 1000); }Среди них более важные моменты:
① Определение времени окончания времени окончания = новая дата ("2017/6/6") - это использование нового объекта даты с параметрами, а непосредственно New Date () - напрямую получить текущее время;
② Метод getTime () получает количество миллисекундов с 1 января 1970 года.
③ Расчет дней, часов, минут и секунд, % (операция модуля). Получите миллисекунды (оставшиеся миллисекунд) с конца времени, разделите на 1000, чтобы получить оставшиеся секунды, разделите на 60, чтобы получить оставшиеся минуты, и разделите на 60, чтобы получить оставшиеся часы. Разделен на 24, чтобы получить оставшиеся дни. Оставшиеся секунды левша/1000 Модуль 60 получает количество секунд, оставшиеся минуты левша/(1000*60) Модуль 60 получает количество минут, оставшиеся часы в левом времени/(1000*60*60) Модуль 24 получает количество часов.
3.
Функция Showtime3 () {var nowtime = new Date (), endtime = новая дата ("2020/1/1,00: 00: 00"), // Установить время окончания времени = parseint ((endtime.gettime ()-сейчас время.get ())/1000), d = математика. m = math.floor (левша/60%60), s = math.floor (левша%60); p3.innerhtml = d+"day"+h+"час"+m+"минута"+s+"second"; SetTimeout (Showtime3, 1000); }На самом деле, это похоже на второй пример, разница в том, что время окончания установлено новой датой ("2020/1/1,00: 00: 00")
Ниже приведен полный код
<! Doctype html> <html lang = "en"> <Head> <meta charset = "utf-8"> <title> эффект обратного отсчета </title> <script type = "text/javascript"> functiontime (i) {if (i <10) {i = "0"+i; } return i; } window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); showtime1 (); showtime2 (); Showtime3 (); } function showtime1 () {var nowdate = new Date (); var year = warsdate.getbleear (), // monday = wardate.getmonth ()+1, // date = owndate.getdate (), // день недели = [«воскресенье», «понедельник», «Вторник», «Четверг», «Пятница», «Суббота»], Day = wydate.getday (), // get get 0-6 h = wydate.gethours hudtime. m = wowdate.getminutes (), m = checktime (m), s = wyldate.getseconds (), s = checktime (s); p1.innerhtml = Год+"Год"+месяц+"месяц"+дата+"день"+неделя [день]+h+":"+m+":"+s; SetTimeout (Showtime1, 1000); } function showtime2 () {var nowtime = new date (), endtime = new Date ("2017/6/6"); var Levertime = EndTime.getTime ()-nowtime.getTime (), Leverd = math.floor (левша/(1000*60*60*24)), слева = мат. p2.innerhtml = левый+"день"+lefth+":"+leftm+":"+lefts; SetTimeout (Showtime2, 1000); } function showtime3 () {var nowtime = new Date (), endtime = new Date ("2020/1/1,00: 00: 00"), Leftlime = parseint ((EndTime.getTime ()-nowtime.gettime ())/1000), d = math.floor (левое время/(60*24)), h = math.floor (левша/(60/60). m = math.floor (левша/60%60), s = math.floor (левша%60); p3.innerhtml = d+"day"+h+"час"+m+"минута"+s+"секунды"; SetTimeout (Showtime3, 1000); } </script> </head> <body> текущее время: <p id = "p1"> </p> вступительное экзамен в колледже Обратный отсчет: <p id = "p2"> </p> ограниченное время Rush: <p id = "p3"> </p> </body> </html>Приведенная выше реализация спецэффектов JavaScript - простой пример текущего времени и эффекта обратного отсчета - это все контент, которым я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.