扣丁学堂HTML培训之HTML5+CSS3实现二进制数字时钟动画（源码）

2018-02-08 09:47:02 670浏览

今天扣丁学堂小编要介绍一款风格不同的二进制时钟动画，是基于HTML5和CSS3实现的，这款时钟精确到毫秒，计时开始后，二进制表示区便跟随时钟同步变化，非常炫酷，下面我们一起来看看实现这款二进制数字时钟动画的具体代码。

HTML代码

html代码非常简单，主要是通过div标签模拟二进制区域，代码如下：

<divclass="interface">

<divclass="display-container">

<divclass="binary-display">

<divclass="binary-item"id="mt8"></div>

<divclass="binary-item"id="mo8"></div>

<divclass="binary-item"id="st8"></div>

<divclass="binary-item"id="so8"></div>

<divclass="binary-item"id="d8"></div>

<divclass="binary-item"id="mt4"></div>

<divclass="binary-item"id="mo4"></div>

<divclass="binary-item"id="st4"></div>

<divclass="binary-item"id="so4"></div>

<divclass="binary-item"id="d4"></div>

<divclass="binary-item"id="mt2"></div>

<divclass="binary-item"id="mo2"></div>

<divclass="binary-item"id="st2"></div>

<divclass="binary-item"id="so2"></div>

<divclass="binary-item"id="d2"></div>

<divclass="binary-item"id="mt1"></div>

<divclass="binary-item"id="mo1"></div>

<divclass="binary-item"id="st1"></div>

<divclass="binary-item"id="so1"></div>

<divclass="binary-item"id="d1"></div>

</div>

<divclass="timer-display">

00:00.0

</div>

</div>

<divclass="settings">

<formclass="setting-options">

<buttontype="button"class="toggle-timer"name="toggle-timer">Start</button>

<buttontype="button"class="reset-timer"name="reset-timer">Reset</button>

</form>

</div>

</div>

CSS代码

这里并没有特别的CSS3特性代码：

:root{

font-size:9px;

}

.interface{

width:auto;

}

@mediaalland(min-width:350px){

:root{

font-size:12px;

}

body{

overflow:hidden;

}

.interface{

min-width:none;

width:60%;

}

}

@mediaalland(min-width:550px){

.interface{

width:50%;

}

}

@mediaalland(min-width:780px){

:root{

font-size:15px;

}

.interface{

width:40%;

}

}

@mediaalland(min-width:1090px){

.interface{

width:30%;

}

}

/*AppStyling*/

*{

outline:none;

margin:0;

padding:0;

}

html,

body{

font-family:"Comfortaa",monospace;

font-size:2rem;

font-weight:300;

background:#000url(https://images.unsplash.com/photo-1496096265110-f83ad7f96608?auto=format&fit=crop&w=1950&q=80)no-repeat;/*fallbackforoldbrowsers*/

background-size:cover;

color:hsla(189,100%,50%,1);

}

button{

padding:0.4rem;

background-color:inherit;

font-family:inherit;

font-size:inherit;

border:none;

border-radius:5px;

color:hsla(189,100%,45%,0.5);

cursor:pointer;

text-transform:uppercase;

}

button:hover{

background:rgba(0,0,0,0.75);

color:inherit;

text-shadow:008pxhsla(180,100%,85%,0.7);

}

button:disabled{

background-color:hsla(0,0%,0%,0);

color:hsla(189,100%,45%,0.5);

text-shadow:none;

cursor:default;

}

a{

position:absolute;

bottom:1rem;

right:1.5rem;

font-family:inherit;

font-weight:bold;

color:rgba(255,255,255,0.65);

background-color:black;

text-decoration:none;

padding:4px6px;

font-size:12px;

line-height:1.2;

display:inline-block;

border-radius:3px;"

}

span{

display:inline-block;

padding:2px3px;

}

.container{

height:100vh;

background-color:hsla(180,100%,2%,0.85);

}

.interface{

background-color:hsla(0,0%,0%,0.5);

border-radius:5px;

box-shadow:000.5rem0.1remrgba(150,150,150,0.1);

}

.interface>*{

width:100%;

}

.binary-display{

min-height:30%;

border:0.25remsolidhsla(0,0%,0%,0.5);

border-radius:5px5px00;

box-sizing:border-box;

}

.binary-item{

height:1.2rem;

min-width:2rem;

text-align:center;

background:hsla(189,100%,45%,0.15);

border-radius:5px;

}

.active{

background:hsla(189,100%,45%,0.7);

box-shadow:001pxhsla(180,100%,85%,0.5);

}

.timer-display{

padding:1rem0.5rem;

line-height:1;

text-shadow:008pxhsla(180,100%,85%,0.7);

font-family:"SourceCodePro",monospace;

font-size:4rem;

font-weight:400;

text-align:center;

}

.settings{

padding:0.5rem;

border-radius:005px5px;

box-sizing:border-box;

}

.setting-options{

padding:01rem;

}

.setting-options>*{

margin:0.2rem;

}

.toggle-timer{

width:6rem;

}

/*App-Layout*/

.container{

justify-content:center;

align-items:center;

}

.binary-display{

display:grid;

grid-template-rows:repeat(4,1fr);

grid-template-columns:repeat(5,1fr);

grid-gap:0.2em;

}

.setting-options{

display:flex;

justify-content:center;

}

.setting-options>*{

flex-grow:1;

}

JavaScript代码

javascript代码是整个应用的核心，实现了数字时钟和二进制数值之间的转换。

consttimerDisplay=document.querySelector(".timer-display");

consttoggleButton=document.querySelector(".toggle-timer");

constresetButton=document.querySelector(".reset-timer");

constmaxTime=35999;

letrunningTimer;

lettimerStatus=false;

functiondisplayTime(decSeconds){

constminutes=Math.floor(decSeconds/600);

constrestDecSecs=decSeconds%600;

constseconds=Math.floor(restDecSecs/10);

constdeciSeconds=restDecSecs%10;

constdisplayMins=`${minutes<10?"0":""}${minutes}`;

constdisplaySecs=`${seconds<10?"0":""}${seconds}`;

constdisplayDecSecs=`${deciSeconds}`;

constdisplay=`${displayMins}:${displaySecs}.${displayDecSecs}`;

timerDisplay.textContent=display;

displayBinary("mt",Math.floor(minutes/10));

displayBinary("mo",minutes%10);

displayBinary("st",Math.floor(seconds/10));

displayBinary("so",seconds%10);

displayBinary("d",deciSeconds);

}

functionrunTimer(){

clearInterval(runningTimer);

lettimer=0;

//startinterval

runningTimer=setInterval(()=>{

construnTimer=timer++;

//iftimeisup(reachedmaxof59min59sec)stoptimer

if(runTimer>maxTime){

clearInterval(runningTimer);

return;

}

//displaytimer

displayTime(timer);

},100);

}

functiondisplayBinary(type,digit){

for(leti=8;i>=1;i=i/2){

letbinary=Math.floor(digit/i);

binary

?document.getElementById(`${type}${i}`).classList.add("active")

:document.getElementById(`${type}${i}`).classList.remove("active");

digit=digit%i;

}

}

functiontoggleTimer(){

//stopstimer

if(timerStatus){

toggleButton.textContent="Start";

toggleButton.setAttribute("disabled",true);

//stoprunningtimer

clearInterval(runningTimer);

//startstimer

}elseif(!timerStatus){

runTimer();

toggleButton.textContent="Stop";

}

timerStatus=!timerStatus;

}

functionresetTimer(){

toggleButton.textContent="Start";

toggleButton.removeAttribute("disabled");

timerStatus=false;

displayTime(0);

clearInterval(runningTimer);

}

toggleButton.addEventListener("click",toggleTimer);

resetButton.addEventListener("click",resetTimer);

这样一款富有创意的二进制时钟动画就完成了，大家也可以复制源代码来更进一步的研究HTML5。

以上就是关于扣丁学堂HTML5视频教程之HTML5+CSS3实现二进制数字时钟动画及源码的详细介绍，最后想要工作不累就要不断的提升自己的技能，请关注扣丁学堂官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5培训视频教程系统，通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统，让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：559883758

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>