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小时内与您取得联系。

整合营销服务商