Flask接口签名sign原理与实例代码浅析
207
2023-06-07
canvas实现简易的圆环进度条效果
效果图:
代码如下:
canvas{
border: 1px solid #1F232A;
}
.div{
width: 400px;
height: 50px;
}
input,button{
text-align: center;
font-size: 20px;
}
进度:
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 (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("请输入0-100之间的数字") } } makeSure.click();
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~