js配合html實現360小球變化
阿新 • • 發佈:2018-12-23
今天實現以下360的小球
效果如下,(有如下疑惑,在設定閃爍狀態的時候,發現如果內容為空,就會出現異常,不知道為什麼):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootloader</title>
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<style type="text/css">
.box {
width:34px;
height:34px;
content:"58%";
line-height:34px;
text-align:center;
left:3px;
top :3px;
border-radius:50%;
border:2px solid #43a547;
box-shadow:0 0 2px 0 #e8e5df inset;
background:linear-gradient(#f4f4f4 25%,#b6e48f 40%,#9cd87a);
background:-webkit-linear-gradient(#f4f4f4 25%,#b6e48f 40%,#9cd87a);
background:-moz-linear-gradient(#f4f4f4 25 %,#b6e48f 40%,#9cd87a);
}
</style>
<script type="text/javascript">
var totaltime=0;
var intervalid=0;
var intervalid1=0;
function intervalcall(periodtime){
totaltime = totaltime+periodtime;
var percect = totaltime/100;
var mpercent1 = percect>10?(percect-10):percect;
var mpercent2 = percect>20?(percect-20):percect;
if(percect>=100){
//結束定時器
mpercent1=100;
mpercent2=0;
window.clearInterval(intervalid);
}
if(totaltime%1000!=0){//需要更新進度條
$("#box1").text("...");//實現閃爍狀態
}else{
$("#box1").text(percect+"%");/*percect.toString()或者改寫法會自動轉換為字串*///(#3D9171 " + mpercent+ "%,#4BCC60 " + percect + "%,#4BCC60)");
$("#box1").css("background","linear-gradient(#f4f4f4 " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");
$("#box1").css("background","-webkit-linear-gradient(#f4f4f4 " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");
$("#box1").css("background","-moz-linear-gradient(#f4f4f4 " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");
}
}
$(document).ready(function($) {
intervalid = setInterval("intervalcall(500)",500);
});
</script>
</head>
<body>
<div>
<ul>
<li>
<div class="box" id="box1">58%</div>
</li>
</ul>
</div>
</body>
</html>