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

This article mainly introduces the relevant knowledge of "how to use JavaScript code to realize the countdown to the Spring Festival in the year of the Tiger". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use JavaScript code to realize the countdown to the Spring Festival in the year of the Tiger" can help you solve the problem.

Partial effect of the countdown to the Spring Festival in the year of the Tiger

The overall effect picture of the countdown to the Spring Festival of the year of the Tiger, the lovely little tiger.

Key code implementation of JS

_ window.onload=function starttime () {/ / 2022 Spring Festival time time; / / timer timer = setTimeout (starttime,1000);} function time (obj,springtime) {/ / get current time var nowtime = new Date (). GetTime (); / / get future time var futruetime = new Date (springtime). GetTime () / / get the difference between current time and future time var mtime = futruetime-nowtime; / / millisecond / 1000 var time = (mtime/1000); / / day var day = parseInt (time/ (24060x60)); / / hourly var hour = parseInt (time/ (60th 60th))-24*day / / var minute = parseInt (time%3600/60); var second = parseInt (time%60); obj [XSS _ clean] = "

Countdown to the Spring Festival in the year of the Tiger:

"+ day+" days + hour+ "hours" + minute+ "minutes" + second+ "seconds" + "

The dragon is leaping, the tiger is leaping! "; return true;}

The key to the realization of the countdown in the above code lies in the setTimeout () function, and the setTimeout () function is a timer. Next, we will briefly explain this knowledge point for our friends. When we make the countdown to the Spring Festival of the year of the Tiger, we can also learn and review relevant knowledge points.

SetTimeout () function

The setTimeout function is used to specify the milliseconds after which a function or piece of code will be executed. It returns an integer indicating the number of the timer, which can be used to cancel the timer later.

Var timerId = setTimeout (func, delay)

In the above code, the setTimeout function has two arguments, the first parameter func is the function or a piece of code that will delay execution, and the second parameter delay is the number of milliseconds of delayed execution.

Timer = setTimeout (starttime,1000)

In our countdown code for the Spring Festival of the year of the Tiger, starttime is the function to delay execution, and 1000 is the delay of 1 s, that is, the starttime function is executed every 1 second to implement the countdown logic.

CSS style related code

H2 {position: fixed; top: 25%; left: 20; width: 100%; transform:translateY (- 50%); font-family:'Courier New', Courier, monospace; font-size: 60px; color: # 2c0712; padding: 020px;} H2 span {position: fixed; left: 0; width: 100%; text-align: center;margin-top:250px; font-size:40px } body {background-image: url ("C:\\ Users\\ Administrator\\ Desktop\\ blog picture\\ Tiger .jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; flex-direction: column; align-items: center; min-height: 100vm; margin: 0

CSS style is used to control the neatness and beauty of our pages, and it is strongly combined with JS. Here, Xiaomeng will not talk about CSS in detail. Later, we will share a CSS-related content with you.

Complete code attached, copied to the THML file can be run directly! Friends can give it a try. If you need pictures, you can leave a message. Xiao Meng will send it to you when you see it.

Countdown to the year of the Tiger H2 {position: fixed; top: 25%; left: 20; width: 100%; transform:translateY (- 50%); font-family:'Courier New', Courier, monospace; font-size: 60px; color: # 2c0712; padding: 020px;} H2 span {position: fixed; left: 0; width: 100%; text-align: center;margin-top:250px; font-size:40px } body {background-image: url ("C:\\ Users\\ Administrator\\ Desktop\\ blog picture\\ Tiger .jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; flex-direction: column; align-items: center; min-height: 100vm; margin: 0 _ window.onload=function starttime () {/ / 2022 Spring Festival time time; / / timer timer = setTimeout (starttime,1000);} function time (obj,springtime) {/ / get current time var nowtime = new Date (). GetTime () / / get the future time var futruetime = new Date (springtime) .getTime (); / / get the difference between the current time and the future time var mtime = futruetime-nowtime; / / millisecond / 1000 var time = (mtime/1000); / / day var day = parseInt (time/ (24 seconds 60 seconds 60)) / / hour var hour = parseInt (time/ (60mm 60))-24daylight; / / minutes var minute = parseInt (time%3600/60); var second = parseInt (time%60); obj [XSS _ clean] = "

Countdown to the Spring Festival in the year of the Tiger:

"+ day+" days + hour+ "hours" + minute+ "minutes" + second+ "seconds" + "

The dragon is leaping, the tiger is leaping! "; return true;}

This is the end of the content about "how to use JavaScript code to realize the countdown to the Spring Festival in the year of the Tiger". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.