zoukankan      html  css  js  c++  java
  • 进度条

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>进度条</title>
    </head>
    <body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    var canvas=document.getElementById("canvas"); //获取画布的id
    canvas.width="1000";    //画布的宽度
    canvas.height="1000";  //画布的高度
    var context=canvas.getContext("2d"); 
    var i=0; //旋转角度
    var j=0;
    var times=10; //定时器时间

    function con(){
    context.strokeStyle="#ff0000";  //画笔颜色
    context.lineWidth="2";   //画笔宽度
    context.beginPath();   //画布中开始子路径的一个新的集合
    context.arc(300,300,150,0,2*Math.PI,true);  //画圆
    context.closePath(); //画布中结束子路径的一个集合
    context.stroke();
    }
    function show(){
    context.clearRect(0,0,1000,1000); //清除画布
    con();
    context.strokeStyle="#00ff00";  
    context.lineWidth="6";
    context.beginPath();
    context.arc(300,300,150,0,Math.PI/180*i,true);
    context.stroke();
    context.font="40px Arial";    //中间字体大小
    var d=j;     
    var dd=String(d).lastIndexOf("."); //小数点出现的位置
    var ddd=String(d).substr(0,dd); //取小数点之前的值,获得整数
    context.fillText(ddd+"%",280,310);   
    i++;
    j+=100/360;
    if(i>180){
    clearInterval(setint);   //大于180清除计时器
    times=30;  
    var setti=setTimeout(show,times); //启动单次计时器
    }
    if(i>360){
    clearTimeout(setti);
    location="http://www.baidu.com";  //大于360度后跳转百度页面
    }
    }
    var setint=setInterval(show,times);


    </script>
    </body>
    </html>

     

  • 相关阅读:
    关于document.body.scrollLeft总是0的原因
    转载:如何配置 SQL Server 2005 以允许远程连接
    【转载】SQL Server中Rollup关键字使用技巧
    JavaScript代码优化
    JavaScript中定义类或对象
    【转载】SQLServer2005 Pivot 转置使用动态列
    迅雷刷分
    ROW_NUMBER() OVER函数的基本用法用法
    FireFox下表单无法刷新重置的解决
    SQL 远程查询
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6111809.html
Copyright © 2011-2022 走看看