Shulou(Shulou.com)06/01 Report--

This article mainly shows you "JavaScript how to imitate JD.com to achieve seconds countdown", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "JavaScript how to imitate JD.com to achieve seconds kill countdown" this article.

Function introduction:

1. This countdown is constantly changing, so a timer is needed to change it automatically (setInterval)

2. Three black boxes, stored separately, minutes and seconds.

3. Three boxes are saved in countdown by innerHTML.

Document div {background-color: black; width: 50px; height: 50px; margin-left: 20px; float: left; color: white; font-size: 20px; text-align: center; line-height: 50px } / / put the time into the div var div = document.querySelectorAll ('div') var timer1 = setInterval (function () {var date1 = new Date (2022, 3, 2, 18, 40, 0); / / get the number of milliseconds between the time to the point and the standard time var date2 = new Date () / / get the milliseconds of the current time to the exact time var date = (date1-date2) / 1000; / / the milliseconds of the point time minus the milliseconds of the current time must be reduced to seconds before converting var h = parseInt ((date / 60 / 60)% 24); / / hour var m = parseInt ((date / 60)% 60) 60) / / minute var s = parseInt (date% 60) / / seconds must be included in this function, because the interval is 1 second. If you need to improve the accuracy, reduce the number of seconds (refresh interval) div [2] [xss_clean] = s div [1] [xss_clean] = m div [0] [xss_clean] = h}, [1])

Improvements:

/ / put time into div var div = document.querySelectorAll ('div') var timer1 = setInterval (fn, [1000]) var date1 = new Date (2022, 3, 2, 18, 40, 0); var date2 = new Date (); var date = (date1-date2) / 1000; var h = parseInt ((date / 60 / 60)% 24); var m = parseInt ((date / 60)% 60) Var s = parseInt (date% 60); div [2] [xss_clean] = s div [1] [xss_clean] = m div [0] [xss_clean] = h / / solve the problem function fn () {var date1 = new Date (2022, 3, 2, 18, 40, 0) that has just been refreshed and the numbers are not displayed. / / get the number of milliseconds between the time to the point and the standard time var date2 = new Date (); / / get the number of milliseconds from the current time to the standard time var date = (date1-time) / 1000 / / the number of milliseconds in point time minus the milliseconds of current time must be reduced to seconds before converting var h = parseInt ((date / 60 / 60)% 24); / / hour var m = parseInt ((date / 60)% 60); / / minute var s = parseInt (date% 60) / / seconds must be included in this function (it is best to encapsulate a function), because the interval is 1 second to recalculate, if you need to improve the accuracy, reduce the number of seconds (refresh interval). If the interval is relatively large, a new page will produce a blank. The solution is to put the time in the div box div [2] [xss_clean] = s div [1] [xss_clean] = m div [0] [xss_clean] = h} before calling this function.

Add a stop countdown button:

Stop the countdown var btn = document.querySelector ('button') btn.addEventListener (' click', function () {clearInterval (timer1)}) these are all the contents of the article "how to imitate JD.com to achieve a countdown to seconds". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.