极客观点
项目管理
HarmonyOS
怎么让计时显示正确啊！从０到６０Ｓ,转一圈后回去变成蓝色！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title></title>
<style>
.pie { width:20.3rem; height:20.3rem; background-color:blue; border-radius:50%; position:absolute;
}
.pie1 { clip:rect(0px,20.3rem,20.3rem,10.3rem); -webkit-transform:rotate(0deg); }
.pie2 { clip:rect(0px,10.3rem,20.3rem,0px); -webkit-transform:rotate(0deg); }
.hold { width:20.3rem; height:20.3rem; position:absolute; z-index:1; }
.hold1 { clip:rect(0px,20.3rem,20.3rem,10.3rem); }
.hold2 { clip:rect(0px,10.3rem,20.3rem,0px); }
.bg { width:20.3rem; height:20.3rem; background-color:red; border-radius:10.3rem; position:absolute; }
.time { width:19rem; height:19rem; margin:0.65rem 0 0 0.65rem; background-color:#fff; border-radius:10.3rem; position:absolute; z-index:1; text-align:center; line-height:20rem; font-family:"Book Antiqua", Palatino, serif; font-size:35px; font-weight:bold; }
.time em { background:#fff; position:absolute; top:62px; left:12px; height:18px; width:140px; opacity:0.4; }
</style>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"> </div>
<div class="time"><span></span><em></em></div>
<script src="http://www.veryhuo.com/uploads/common/js/jquery-1.7.min.js"></script>
<script>
i = 0;
j = 0;
count = 0;
MM =0 ;
SS = 0;
// MS = 9;
totle = MM;
d = 180*(MM+1);
MM = "0" + MM;
function showTime(){
totle = totle +1;
if(totle==60){
clearInterval(s);
clearInterval(t1);
clearInterval(t2);
$(".pie2").css("-webkit-transform","rotate(" + d + "deg)"); //route
}else{
if(totle<60){
SS=SS+1;
if(SS<10){
SS="0"+SS;
}
}
};
$(".time span").html(MM + ":" +SS );
};
s = setInterval("showTime()",1000);
function start1(){ //left route
i = i + 0.6;
count = count + 1;
if(count==300){
count = 0;
clearInterval(t1);
t2 = setInterval("start2()",100);
};
$(".pie1").css("-webkit-transform","rotate(" + i + "deg)");
};
function start2(){ //right route
j = j + 0.6;
count = count + 1;
if(count==300){
count = 0;
clearInterval(t2);
t1 = setInterval("start1()",100);
};
$(".pie2").css("-webkit-transform","rotate(" + j + "deg)");
};
t1 = setInterval("start1()",100);
</script>
</body>
</html>
canvas效果
仅供参考