纯js实现电子时钟特效 |
您所在的位置：网站首页 › js实现钟表 › 纯js实现电子时钟特效 |
纯js实现电子时钟特效
|
这是一款使用纯js实现电子时钟特效。该电子时钟可以显示时间，星期几，以及是上午还是下午。它使用简单，非常容易集成到项目中。 使用方法在页面中引入电子时钟的样式文件main.css。 HTML结构该电子时钟的基本HTML结构如下： 星期日 星期一 星期二 星期三 星期四 星期五 星期六 88 : 88 : 88 am pm JavaScript该电子时钟通过下面的js代码来获取系统时间，并通过定时器来动态更新时间的显示。 window.onload = function(){ time(); ampm(); whatDay(); setInterval(function(){ time(); ampm(); whatDay(); }, 1000); }; //gets current time and changes html to reflect it function time(){ var date = new Date(), hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(); //make clock a 12 hour clock instead of 24 hour clock hours = (hours > 12) ? (hours - 12) : hours; hours = (hours === 0) ? 12 : hours; //invokes function to make sure number has at least two digits hours = addZero(hours); minutes = addZero(minutes); seconds = addZero(seconds); //changes the html to match results document.getElementsByClassName('hours')[0].innerHTML = hours; document.getElementsByClassName('minutes')[0].innerHTML = minutes; document.getElementsByClassName('seconds')[0].innerHTML = seconds; } //turns single digit numbers to two digit numbers by placing a zero in front function addZero (val){ return (val = 12) ? pm.add("light-on") : am.add("light-on"); (hours >= 12) ? am.remove("light-on") : pm.remove("light-on"); } //lights up what day of the week it is function whatDay(){ var date = new Date(), currentDay = date.getDay(), days = document.getElementsByClassName("day"); //iterates through all divs with a class of "day" for (x in days){ //list of classes in current div var classArr = days[x].classList; (classArr !== undefined) && ((x == currentDay) ? classArr.add("light-on") : classArr.remove("light-on")); } }该电子时钟的github地址为：https://github.com/SlyTy7/clock 本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Layout-Interface/201709074726.html 上一篇：简单的Material Design风格计算器 下一篇：js动态炫酷数字时钟 相关插件
jQuery和CSS3精美翻页式电子时钟特效
基于格林威治标准时间（GMT）的jQuery模拟时钟插件
jQuery超酷3D翻页式电子时钟特效插件
使用jQuery和css3制作逼真的数字时钟效果
|
【本文地址】
今日新闻 |
推荐新闻 |