JavaScript+css實現的計時器動畫素材ht

JavaScript+css實現的計時器動畫素材html頁面前端源碼

家好，今天給大家介紹一款，JavaScript+css實現的計時器動畫素材html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

動態倒計時和動態百分比，效果分成炫酷（圖2）

圖2

點擊右上角菜單，可以自助切換多種主題（圖3）

圖3

時間完成后，點擊reset按鈕，即可恢復計時（圖4）

圖4

點擊左上角的麥克風圖標，可以訪問本地的麥克風（圖5）

圖5

源碼完整，需要的朋友可以下載學習（圖6）

圖6

本源碼編碼：20228，需要的朋友，訪問下面鏈接后，搜索20228，即可獲取。

就愛UI - 分享UI設計的點點滴滴

端小白入門篇

大白(●––●)先給大家展示一下效果圖。

這里是一個最基本的計時器，在網頁許多地方都會用到里面類似的函數處理方式，給大家展示這個計時器，主要就是讓大家理解js的具體操作，畢竟熟能生巧嘛。

代碼

最后希望大家能把上面代碼熟悉一遍，或者先收藏起來，emm..記得點一波關注哦⊙?⊙！⊙?⊙！

代碼如下：

<!DOCTYPE html>

<html>

<head>

margin:0;

bottom:0;

}

h1{

height:20px;

}

#timePic{

margin-top:50px;

}

</style>

setInterval(jishi,1000);

function jishi(){

var time=new Date();

var year=time.getFullYear();

var month=time.getMonth();

var iday=time.getDate();

var day=time.getDay();

var hour=time.getHours();

var minute=time.getMinutes();

var seconds=time.getSeconds();

var pic=document.getElementsByClassName("timePic");

switch (day){

case 0:day="星期日";break;

case 1:day="星期一";break;

case 2:day="星期二";break;

case 3:day="星期三";break;

case 4:day="星期四";break;

case 5:day="星期五";break;

case 6:day="星期六";break;

}

var str=year+"年"+(month+1)+"月"+iday+'日'+day+' '+changTime(hour)+':'+changTime(minute)+':'+changTime(seconds);

var str1=changTime(hour)+''+changTime(minute)+''+changTime(seconds);

console.log(str1.length);

for(var i=0;i<6;i++){

pic[i].src="Image/"+str1.charAt(i)+".JPG";

}

var ti=document.getElementsByTagName("h1");

ti[0].innerHTML=str;

}

function changTime(obj){

return obj<10 ? ('0'+obj):obj;

}

</script>

</head>

<body>

</p>

</body>

</html>

效果如下：

這是一個計時器效果，使用Js里面的Date()對象實現。想要圖片素材點擊關注私信我！

在線咨詢

上一篇：「民辦初中」2021年廣州市義務教育學校招生報名系統
下一篇：AquaSoft Stages13多媒體動畫制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商