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

This article introduces the relevant knowledge of "javascript how to realize the online clock function of web pages". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Methods: 1. Use the Date method in conjunction with getHours, getMinutes and getSeconds to obtain the hours, minutes and seconds of the current time;2. Use the "setInterval(name of function to obtain time, 1000)" statement to set the obtained time to refresh once every second.

Operating environment of this tutorial: Windows 10 system, Javascript version 1.8.5, Dell G3 computer.

javascript How to realize the function of web page online clock

Javascript is an Object and Event Driven scripting language that runs on the client side, thus reducing the burden on the server side. A complete javascript is composed of the core syntax, browser object model and document object model. Now, share with you how to achieve a small function on the page, the clock real-time display.

Create Date Object: Date object contains date and time information. There are two basic syntax for creating date object:

Method 1: var Date Instance =new Date(Parameter);

var Date Instance =new Date( );

Get the date, time, and so on through the get method of the Date object. For display on the page, you can use the innerHTML property in the DOM to set it.

Use the if statement to determine whether the current hour is greater than 12, thus determining the morning and afternoon.

How to display it in real time? JavaScript provides two timing functions: setTimeout( ) and setInterval( ).

setTimeout(): Used to invoke a function or evaluate an expression after a specified number of milliseconds.

setInterval(): Calls a function or evaluates an expression with a specified periodicity (in milliseconds).

The obvious choice here is to use the setInterval( ) method to implement the real-time display time of the page.

Through the above steps, the code design of real-time time display is completed. The complete code is as follows:

Finally, the operation is OK, and the operation effect is shown in the figure. Note that this time is changing in real time, that is, once a second.

"javascript how to achieve online clock function of the web page" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.