js动态数字时钟
程序员文章站
2022-04-15 17:06:58
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 炫酷的数字时间效果 直接看效果 html: css: js: 参考自:腾讯课堂渡一教育 ......
js动态数字时钟
主要用到知识点:
- 主要是通过数组的一些方法,如:array.from() array.reduce() array.find()
- 时间的处理和渲染
-
js用到面向对象的写法
实现的功能
- 炫酷的数字时间效果
直接看效果
html:
<div class="wraper"> <div class="column"> <div class="item">0</div> <div class="item">1</div> <div class="item">2</div> </div> <div class="column ten"></div> <div class="colon">:</div> <div class="column six"></div> <div class="column ten"></div> <div class="colon">:</div> <div class="column six"></div> <div class="column ten"></div> </div>
css:
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background-color: #0e141b; } .wraper { width: 100%; height: 100%; text-align: center; overflow: hidden; } .column, .colon { display: inline-block; vertical-align: top; color: #fff; font-size: 86px; line-height: 86px; font-weight: 300; transform: translatey(50vh); margin-top: -43px; transition: all 0.3s; } .visible { opacity: 1; box-shadow: 0px 0px 20px #fff; border-radius: 5px; } .near1 { opacity: 0.7; } .near2 { opacity: 0.6; } .near3 { opacity: 0.4; } .far1 { opacity: 0.3; } .far2 { opacity: 0.2; } .far3 { opacity: 0.1; } .none { opacity: 0.05; }
js:
function time(bom,use24){ this.bom = array.from(bom); this.format = use24; this.classlist = ['visible', 'near1', 'near2','near3', 'far1', 'far2', 'far3']; this.creatdom(); this.settime(); } //生成dom元素 time.prototype.creatdom=function(){ for(let i=0;i<6;i++){ let odiv = "<div class='item'>"+i+"</div>"; $('.six').append(odiv); } for(let i=0;i<10;i++){ let idiv = "<div class='item'>" + i + "</div>"; $('.ten').append(idiv); } } //设置当前时间到页面 time.prototype.settime = function(){ let self =this; setinterval(function(){ let presenttime = self.gettime(); self.bom.foreach((ele,index)=>{ var n = +presenttime[index]; var offset = n * 86; $(ele).css({ margintop:-43 - offset +'px' }) array.from(ele.children).foreach(function (ele1,index1){ $(ele1).attr('class', self.getclassname(n,index1)); }) }) },500) } time.prototype.getclassname = function(n,i){ let classname = this.classlist.find(function(item,index){ return i - index === n || i + index === n; }) // console.log(classname) return classname || 'none'; } //获取当前时间并处理 time.prototype.gettime=function(){ let data = new date(); let timearr =[]; let timestr = ''; timearr.push(this.format ? data.gethours() : data.gethours() % 12 || 12, data.getminutes(),data.getseconds()); timestr = timearr.reduce(function(p,n){ return p + ('0' + n).slice(-2); },''); return timestr; } new time($('.column'),true);
参考自:腾讯课堂渡一教育
上一篇: ios宏定义学习
下一篇: 中缀表达式转后缀表达式