html video 设置进度条不可拖动_Html、Css、JavaScript制作圆形进度条的代码及基础分析

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

2.效果图1

3.代码：保存为html，用浏览器打开即可。

圆形百分比进度条效果

100%

4.拆分法：把一个含有css和js(JavaScript)的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。

4.1 cirbar1.html的代码：

圆形百分比进度条效果v2

100%

4.2 cirbar1.css的代码：

*{margin: 0;padding: 0;}.bg{width: 200px;height: 200px;border-radius: 100%;background: #ccc;position: relative;margin: 20px auto;}.circle-right, .circle-left, .mask-right, .mask-left{width: 200px;height: 200px;border-radius: 100%;position: absolute;top: 0;left: 0;}.circle-right, .circle-left{background: skyblue;}.mask-right, .mask-left{background: #ccc;}.circle-right, .mask-right{clip: rect(0,200px,200px,100px);}.circle-left, .mask-left{clip: rect(0,100px,200px,0);}.text{width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 34px;color: deepskyblue;border-radius: 100%;background: #fff;position: absolute;top: 20px;left: 20px;}

4.3 cirbar1.js的代码：

$(function(){//获取百分比值var num = parseInt($('.text').html());//通过计时器来显示过渡的百分比进度var temp = 0;var timer = setInterval(function(){calculate(temp);//清除计时器结束该方法调用if(temp == num){clearInterval(timer);}temp++;},30)//改变页面显示百分比function calculate(value){//改变页面显示的值$('.text').html(value + '%');//清除上次调用该方法残留的效果$('.circle-left').remove();$('.mask-right').remove();//当百分比小于等于50if(value <= 50){var html = '';html += '

';html += '

';//元素后添加元素$('.circle-right').after(html);}}})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

             圆形进度条v1

6.2 cirbar.css代码：

.canvas {            /*画布的背景颜色设置为：黑色*/            background:#303030;                    }

6.3 cirbar.js代码：

window.onload = function () {            var canvas = document.getElementById('canvas'),  //获取canvas元素                context = canvas.getContext('2d'),  //获取画图环境，指明为2d                centerX = canvas.width / 2,   //Canvas中心点x轴坐标                centerY = canvas.height / 2,  //Canvas中心点y轴坐标                rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度                speed = 0.1; //加载的快慢就靠它了            //绘制红色外圈            function blueCircle(n) {                context.save();                context.strokeStyle = "#1E90FF"; //随百分数转动的外圈的颜色为蓝色                context.lineWidth = 3; //设置线宽                context.beginPath(); //路径开始                //注意-为顺时针，+为逆时针                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);                 context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);                 context.stroke(); //绘制                context.closePath(); //路径结束                context.restore();            }            //绘制白色外圈，初始的白色外圈            function whiteCircle() {                context.save();                context.beginPath();                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样                //context.strokeStyle = "#F8F8FF";                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);                context.stroke();                context.closePath();                context.restore();            }            //百分比文字绘制            function text(n) {                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色                context.font = "25px Arial"; //设置字体大小和字体                context.textAlign = 'center';//字体水平居中                context.textBaseline = 'middle';//字体垂直居中                //绘制字体，并且指定位置                context.strokeText(n.toFixed(0) + "%", centerX, centerY);                context.stroke(); //执行绘制                context.restore();            }            //循环获取            (function drawFrame() {                window.requestAnimationFrame(drawFrame, canvas);                context.clearRect(0, 0, canvas.width, canvas.height);                whiteCircle();                text(speed);                blueCircle(speed);                if (speed < 100) {                    //1可从后台获取值,也是从0~100，step为1，代表速度                    speed += 1;                }            }());        }

注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload =，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。