欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

canvas實(shí)現(xiàn)簡(jiǎn)易的圓環(huán)進(jìn)度條效果

 更新時(shí)間：2017年02月28日 10:01:52   作者：sirius周周  
本文主要分享了canvas實(shí)現(xiàn)簡(jiǎn)易的圓環(huán)進(jìn)度條效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <style type="text/css">
 canvas{
  border: 1px solid #1F232A;
 }
 .div{
  width: 400px;
  height: 50px;
 }
 input,button{
  text-align: center;
  font-size: 20px;
 }
 </style>
 <body>
 <canvas id="main" width="450" height="300"></canvas>
 <div class="div">
 進(jìn)度：<input id="num" type="number" value="100" max="100"/>
 <button id="makeSure">確定</button>
 </div>
 </body>
 <script type="text/javascript">
 var makeSure=document.getElementById("makeSure");
 makeSure.onclick=function(){
  var ctx=document.getElementById("main").getContext("2d");
  ctx.clearRect(0,0,450,300);
  var num=parseInt(document.getElementById("num").value)+1;
  if(num<=101){
  for (var x=0;x<num;x++) {
  (function(x){
     setTimeout(function(){
      ctx.beginPath()
      ctx.lineWidth=10;
   ctx.strokeStyle='orange';
   ctx.arc(200, 200, 50, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
     ctx.stroke();
      ctx.clearRect(390,25,50,50);
      ctx.clearRect(175,175,55,55)
       ctx.fillStyle = 'orange';
   ctx.fillRect(10+x*3.5,30,3.5,40);
   ctx.font="20px Arial";
   ctx.fillText(x+"%",390,58)
   ctx.fillText(x+"%",175,208)
     },x*30); 
   })(x);
  }
  }else{
  alert("請(qǐng)輸入0-100之間的數(shù)字")
  }
 }
 makeSure.click();
 </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論