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

This article is to share with you about how javascript achieves digital clock effects. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Let's see the effect first, dynamic digital clock.

JQuery is used, but only to get elements, just a little bit

Object-oriented development

Look at the code.

HTML, who introduced jQuery and js,jQuery first.

0 1 2::

CSS

* {margin: 0; padding: 0;} html,body {height: 100%; width: 100%; background-color: # 0e141b; overflow: hidden; / * set overflow hiding * /} .wrapper {text-align: center; width: 100%;} .wrapper .column, .wrapper .coln {display: inline-block; vertical-align: top; color: rgba; font-size: 86px Line-height: 86px; font-weight: 300;} .column {transition: all 300ms ease-in;} .coln {/ * colon location * / transform: translateY (calc (50vh-83px));} / * the following are the transparency corresponding to different class names * / .visible {opacity: 1;} .close {opacity: 0.25;} .far {opacity: 0.15;} .distance {opacity: 0.05;}

JS

Function Index (dom, use) {/ / transfer the incoming DOM elements to the array this.column = Array.from (dom); / / transfer the use to the global, which determines whether the time system to be displayed is 112hrs or 24hrs this.use = use / / this array is the class name this.classList = ['visible',' close', 'far',' distance', 'distance']; this.creatDom (); this.start (); / / start} / / start function Index.prototype.start = function () {var self = this SetInterval (function () {var c = self.getClock (); / / console.log (c); self.column.forEach (function (ele, index) {var n = + c [index]; var offset = n * 86 var / moving distance console.log (offset)) $(ele) .css ({'transform':' translateY (calc (50vh -'+ offset +'px-73px))'/ / set Mobile}); Array.from (ele.children) .forEach (function (ele2, index2) {var className = self.getClass (n, index2)) / / call the function to set the class name $(ele2) .attr ('class', className);})}, 500);} / / set a different class name Index.prototype.getClass = function (n, I) {var className = this.classList.find (function (ele, index) {return I-index = n | | I + index = n;}) return className | | ";} / / get the time and format the time, string 21:06:09 = = > 210609Index.prototype.getClock = function () {var d = new Date () / / take a ternary operator here. If use is true (true), take the value. If it is false, the remainder of 12 will be converted to 12-hour return [this.use? D.getHours (): d.getHours ()% 12 | | 12, d.getMinutes (), d.getSeconds ()] .reduce (function (p, n) {return p + ('0' + n). Slice (- 2); / / here is bar digits plus 0, for example, 1 adds a 0 to get 01, if it is 12 plus 0, but take the last two digits and get 12},')}. / / because it is too redundant to write all the HTML elements in the HTML file, use the for loop to add Index.prototype.creatDom = function () {for (var I = 0; I < 6; iSuppli +) {var oDiv ='+ I +''; $(".six") .append (oDiv);} for (var I = 0; I < 10; iDepression +) {var iDiv ='+ I +'' $(".ten") .append (iDiv);}}; / / the second parameter, true is 24-hour new Index, false is 12-hour new Index ($('.column'), true)

I have written all the notes on js, so I should be able to understand them.

Thank you for reading! This is the end of this article on "how to achieve digital clock effects in javascript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.