这是一款使用js和CSS制作的动态炫酷数字时钟。该js数字时钟采用LED数字时钟样式,效果十分逼真。
使用方法
HTML结构
该js数字时钟的HTML结构如下:
<div class="clock"> <div class="digit hours"> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> </div> <div class="digit hours"> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> </div> <div class="separator"></div> <div class="digit minutes"> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> </div> <div class="digit minutes"> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> </div> <div class="separator"></div> <div class="digit seconds"> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> </div> <div class="digit seconds"> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> <div class="segment"></div> </div> </div>
CSS样式
为该js数字时钟添加下面的css样式。
.clock { height:200px; position:absolute; top:50%; left:50%; width:900px; margin-left:-450px; margin-top:-100px; text-align:center; } .digit { width:120px; height:200px; margin:0 5px; position:relative; display:inline-block; } .digit .segment { background:#c00; border-radius:5px; position:absolute; opacity:0.15; transition:opacity 0.2s; -webkit-transition:opacity 0.2s; -ms-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s; } .digit .segment.on, .separator { opacity:1; box-shadow:0 0 50px rgba(255,0,0,0.7); transition:opacity 0s; -webkit-transition:opacity 0s; -ms-transition:opacity 0s; -moz-transition:opacity 0s; -o-transition:opacity 0s; } .separator { width:20px; height:20px; background:#c00; border-radius:50%; display:inline-block; position:relative; top:-90px; } .digit .segment:nth-child(1) { top:10px; left:20px; right:20px; height:10px; } .digit .segment:nth-child(2) { top:20px; right:10px; width:10px; height:75px; height:calc(50% - 25px); } .digit .segment:nth-child(3) { bottom:20px; right:10px; width:10px; height:75px; height:calc(50% - 25px); } .digit .segment:nth-child(4) { bottom:10px; right:20px; height:10px; left:20px; } .digit .segment:nth-child(5) { bottom:20px; left:10px; width:10px; height:75px; height:calc(50% - 25px); } .digit .segment:nth-child(6) { top:20px; left:10px; width:10px; height:75px; height:calc(50% - 25px); } .digit .segment:nth-child(7) { bottom:95px; bottom:calc(50% - 5px); right:20px; left:20px; height:10px; }
初始化插件
然后通过下面的js代码来初始化该js数字时钟。
var digitSegments = [ [1,2,3,4,5,6], [2,3], [1,2,7,5,4], [1,2,7,3,4], [6,7,2,3], [1,6,7,3,4], [1,6,5,4,3,7], [1,2,3], [1,2,3,4,5,6,7], [1,2,7,3,6] ] document.addEventListener('DOMContentLoaded', function() { var _hours = document.querySelectorAll('.hours'); var _minutes = document.querySelectorAll('.minutes'); var _seconds = document.querySelectorAll('.seconds'); setInterval(function() { var date = new Date(); var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(); setNumber(_hours[0], Math.floor(hours/10), 1); setNumber(_hours[1], hours%10, 1); setNumber(_minutes[0], Math.floor(minutes/10), 1); setNumber(_minutes[1], minutes%10, 1); setNumber(_seconds[0], Math.floor(seconds/10), 1); setNumber(_seconds[1], seconds%10, 1); }, 1000); }); var setNumber = function(digit, number, on) { var segments = digit.querySelectorAll('.segment'); var current = parseInt(digit.getAttribute('data-value')); // only switch if number has changed or wasn't set if (!isNaN(current) && current != number) { // unset previous number digitSegments[current].forEach(function(digitSegment, index) { setTimeout(function() { segments[digitSegment-1].classList.remove('on'); }, index*45) }); } if (isNaN(current) || current != number) { // set new number after setTimeout(function() { digitSegments[number].forEach(function(digitSegment, index) { setTimeout(function() { segments[digitSegment-1].classList.add('on'); }, index*45) }); }, 250); digit.setAttribute('data-value', number); } }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!