html+css+js完成环形倒计时

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>倒计时</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{
font-family: "微软雅黑","华文细黑",Arial, Helvetica, sans-serif;
font-size: 14px;

}
.game_time{
width: 280px;
height: 280px;
position: relative;
margin: 0 auto;
text-align: center;
}
.hold{
width: 280px;
height: 280px;
position: absolute;
z-index: 1;
}
.pie{
width: 280px;
height: 280px;
background-color: #ccc;
border-radius: 100%;
position: absolute;
}
.pie1{
clip:rect(0,280px,280px,140px);
-o-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
background-color:#ccc;
}
.pie2{
clip:rect(0,140px,280px,0);
-o-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
background-color:#ccc;
}
.bg{
width: 280px;
height: 280px;
border-radius: 100%;
position: absolute;
background-color: #429ffe;
}
.time{
width: 250px;
height: 250px;
margin: 15px 0 0 15px;
background-color: #fff;
border-radius: 100%;
position: absolute;
z-index: 1;
text-align: center;
}
.time .stoptime{
color: #429ffe;
font-size: 18px;
padding: 100px 0 10px;
line-height: 50px;
}
</style>
</head>
<body>

<div class="game_time">

<div class="hold">
<div class="pie pie1"></div>
</div>

<div class="hold">
<div class="pie pie2"></div>
</div>

<div class="bg"></div>

<div class="time">
<div class="stoptime"></div>
</div>

</div>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var num=0
var h=0;
var m=1;
var txtH="";
var txtM="";
var deg=0;
var timeTxt='';
if (h<10) {
txtH='0'+h;
} else {
txtH=h;
};
if (m<10) {
txtM="0"+m;
} else {
txtM=m;
};
timeTxt=txtH+'小时'+' '+txtM+'分';
$(".stoptime").html(timeTxt);
function rotate(){
num++;
console.log(num)
deg=deg+6;
if (deg<=180) {
$(".pie1").css("-o-transform","rotate(" + deg + "deg)");
$(".pie1").css("-moz-transform","rotate(" + deg + "deg)");
$(".pie1").css("-webkit-transform","rotate(" + deg + "deg)");
} else if (180<deg && deg<=360) {
$(".pie1").css("-o-transform","rotate(180deg)");
$(".pie1").css("-moz-transform","rotate(180deg)");
$(".pie1").css("-webkit-transform","rotate(180deg)");
$(".pie2").css("backgroundColor", "#429ffe");
$(".pie2").css("-o-transform","rotate(" + deg + "deg)");
$(".pie2").css("-moz-transform","rotate(" + deg + "deg)");
$(".pie2").css("-webkit-transform","rotate(" + deg + "deg)");
};
if (num==60) {
deg=0;
num=0;
$(".pie1").css("-o-transform","rotate(" + deg + "deg)");
$(".pie1").css("-moz-transform","rotate(" + deg + "deg)");
$(".pie1").css("-webkit-transform","rotate(" + deg + "deg)");
$(".pie2").css({
"-o-transform":"rotate(0deg)",
"-moz-transform":"rotate(0deg)",
"-webkit-transform":"rotate(0deg)",
"background-color":"#ccc"
});
if (m>0) {
m--;
} else if (m==0 && h>0) {
m=59;
h--;
} else {
clearInterval(time);
};
if (h<10) {
txtH='0'+h;
} else {
txtH=h;
};
if (m<10) {
txtM="0"+m;
} else {
txtM=m;
};
timeTxt=txtH+'小时'+' '+txtM+'分';
$(".stoptime").html(timeTxt);
}
}
var time=setInterval(rotate,100)
</script>
</body>
</html>

布局思路：用clip属性把大圆分成俩半，并绝对定位覆盖在上面，小圆放文字显示时间动态，并覆盖在hold上。

逻辑思路：前30秒使右边的半圆旋转，30秒时右边的圆旋转了180deg，左边的直接也旋转180deg，然后接下30秒使左边的半圆从180deg开始旋转，每分钟重置。

备注：代码可以直接复制看效果

posted @ 2017-11-13 17:43  余忧伊  阅读(1031)  评论(0)    收藏  举报