初探前端开发,前期写一些小demo,后期会慢慢写些学习经验,欢迎各位看官交流学习经验(QQ:1759668379)
这个时钟特效是在腾讯课堂看渡一的js直播课时学到的,废话不多说,直接上源码。
- html文件:很简单的用div写整体框架,但是没有用到js动态生成div块。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>数字时钟</title> <link href="demo.css" rel="stylesheet"></link> </head> <body> <div class="wrapper"> <div class="column"> <div>0</div> <div>1</div> <div>2</div> </div> <div class="column"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> <div class="colt">:</div> <div class="column"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="column"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> <div class="colt">:</div> <div class="column"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="column"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </div> <script type="" src="jquery.js"></script> <script type="" src="demo.js"></script> </body> </html>
|
- CSS文件:为了提高可读性,所以css部分完全与html部分分离
*{ margin:0; } body{ background-color:#0e141b; overflow: hidden; } .wrapper{ width:100%; text-align:center; } .column, .colt{ font-weight: 300; color:rgba(224, 230,235,0.89); font-size:86px; line-height: 86px; display:inline-block; vertical-align: top; overflow: hidden; } .column{ transition: transform 300ms ease-in; } .colt{ transform:translateY(calc(50vh - 43px)); } .column div{ transition:opacity 500ms,text-shadow 400ms; opacity:0.25; } .column .visible{ opacity:1; text-shadow:1px 1px 30px #336699; } .column .close{ opacity:0.35; } .column .far{ opacity:0.15; } .column .dis{ opacity:0.1; }
|
- js文件:主要是针对对象,所有代码全部放在原型链上。
function Index(dom,use24H) { this.column=Array.from(dom); this.use24H=use24H; this.classList=['visible','close','far','far','dis','dis']; this.start(); }
Index.prototype.start=function () { var self=this; setInterval(function () { var c=self.getClock(); self.column.forEach(function (ele,index) { var n=+c[index]; var offset=n*86; $(ele).css({ 'transform':'translateY(calc(50vh - ' + offset + 'px - ' + 43 + 'px))' }) Array.from(ele.children).forEach(function (ele2,index2) { var className=self.getClassName(n,index2); $(ele2).attr('class',className) }) }) },1000) } Index.prototype.getClassName=function(n,index2){ var className=this.classList.find(function (className,classindex) { return index2-classindex===n||index2+classindex===n; }) return className||''; } Index.prototype.getClock=function () { var d=new Date(); return [this.use24H?d.getHours():d.getHours()%12||12, d.getMinutes(),d.getSeconds()].reduce(function (p,n) { return (p+('0'+n).slice(-2)); },''); } new Index($('.column'),true);
|
效果图:
欢迎留言批评指正。
(完。)