js简单插件（圆环）

最新推荐文章于 2023-07-19 14:35:50 发布
最新推荐文章于 2023-07-19 14:35:50 发布
阅读量856 收藏 2
点赞数
分类专栏： JS 文章标签： 圆环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43885459/article/details/84980284
版权

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆环图封装</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

js代码如下

<script src="jrChart.js"></script>
<script>
    var obj = {
        id:"container",
        width:1000,
        height:500,
        data:[
            {
                num:63,
                color:"yellow",
                angle:60
            }
        ],
        circleX:250,
        circleY:250,
        radius:100,//半径
        startType:4,
        fontColor:"red",
        bottomColor:"red"

    };

    drawCirque(obj);
</script>

引入名叫jrChart的js文件

function drawCirque(obj) {
    var width = obj.width;
    var height = obj.height;
    var id = obj.id;
    var data = obj.data;
    var circleX = obj.circleX;
    var circleY = obj.circleY;
    var radius = obj.radius;
    var startType = obj.startType;
    var fontColor = obj.fontColor;
    var bottomColor = obj.bottomColor;
    var container = document.getElementById(id);
    container.style.width = width + "px";
    container.style.height = height + "px";
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.style.border = "1px solid red";
    var cvs = canvas.getContext("2d");
    container.appendChild(canvas);
    var interval;
    var start;
    var end = 0;
    var increment = 2 * Math.PI / 100;
    var i = 0;
    if (startType === 1) {
        start = -0.5 * Math.PI;
        interval = setInterval(function () {
            i++;
            end = start + increment * i;
            cvs.clearRect(0, 0, 1000, 500);
            cvs.beginPath();
            cvs.strokeStyle = bottomColor;
            cvs.lineWidth = 10;
            cvs.lineCap = "round";
            cvs.arc(circleX, circleY, radius, 0, Math.PI * 2);
            cvs.closePath();
            cvs.stroke();
            //
            cvs.strokeStyle = data[0].color;
            cvs.beginPath();
            cvs.arc(circleX, circleY, radius, start, end);
            cvs.stroke();
            var text = i + "%";
            cvs.font = "30px 宋体";
            cvs.fillStyle = fontColor;
            cvs.fillText(text, 230, 240);
            if (end >= data[0].num * increment - 0.5 * Math.PI) {
                clearInterval(interval);
            }
        }, 10);

    } else if (startType === 2) {
        interval = setInterval(function () {
            start = 0;
            i++;
            end = start + increment * i;
            cvs.clearRect(0, 0, 1000, 500);
            cvs.beginPath();
            cvs.strokeStyle = bottomColor;
            cvs.lineWidth = 10;
            cvs.arc(circleX, circleY, radius, 0, Math.PI * 2);
            cvs.closePath();
            cvs.stroke();
            //
            cvs.strokeStyle = data[0].color;
            cvs.beginPath();
            cvs.arc(circleX, circleY, radius, start, end);
            cvs.stroke();
            var text = i + "%";
            cvs.font = "30px 宋体";
            cvs.fillStyle = fontColor;
            cvs.fillText(text, 230, 240);
            if (end >= data[0].num * increment ) {
                clearInterval(interval);
            }
        }, 10);
    }
    else if (startType === 3) {
        start = 0.5 * Math.PI;
        interval = setInterval(function () {
            i++;
            end = start + increment * i;
            cvs.clearRect(0, 0, 1000, 500);
            cvs.beginPath();
            cvs.strokeStyle = bottomColor;
            cvs.lineWidth = 10;
            cvs.arc(circleX, circleY, radius, 0, Math.PI * 2);
            cvs.closePath();
            cvs.stroke();

            cvs.strokeStyle = data[0].color;
            cvs.beginPath();
            cvs.arc(circleX, circleY, radius, start, end);
            cvs.stroke();
            var text = i + "%";
            cvs.font = "30px 宋体";
            cvs.fillStyle = fontColor;
            cvs.fillText(text, 230, 240);
            if (end >= data[0].num * increment + 0.5 * Math.PI) {
                clearInterval(interval);
            }
        }, 10);

结果如下
在这里插入图片描述

注：插件是有过渡动画效果的

小栗子的普
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js动画实现圆周运动
sqdz123的博客
07-05 254
1.js定时器。
js生成环形进度条
maomengmeng的博客
10-09 3402
百度到 jquery+css 生成 环形进度条 http://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html 其中根据两种进度条颜色 有两个demo。但是其中的 js 需要先引用jquery 才能用改进一下， 不需要jquery<script> var ss = document.ge
js圆环特效
08-20
js特效，Jquery特效，圆环导航特效新手著
js圆周运动动画_javascript-js圆周运动
weixin_30799553的博客
12-29 135
vart;varspeed=10;vartarget=315;variNow=225;varr=100;varcenter=200;document.onclick=function(){clearInterval(t);t=setInterval(()=>{if(iNow==target){clearInterval(t);}else{iNo...
js圆周运动动画_JS代码实现圆周运动
weixin_40005454的博客
12-29 146
js代码实现圆周运动body{margin: 0;padding: 0;}#circle{position: relative;width: 300px;height: 300px;background: #f2f2f2;border-radius: 50%;}#ball{position: absolute;width: 10px;height: 10px;margin-left: -5px;m...
圆环发光jQuery倒计时插件特效代码
03-20
【圆环发光jQuery倒计时插件特效代码】是一种创新的网页动态效果，适用于网站的活动倒计时、重要日期提醒等场景。该插件基于JavaScript的jQuery库，利用其强大的DOM操作能力和丰富的动画效果，为用户带来独特的视觉...
圆环发光jQuery倒计时插件.zip
11-26
在倒计时插件中，JavaScript会有一个定时器（如`setInterval`），每隔一定时间（比如1秒）检查距离目标时间的差值，并更新圆环上的数字。同时，JavaScript还可以处理用户交互，如暂停、恢复或重置倒计时。 要使用这...
jQuery圆形百分比进度条插件circleChart.js
03-17
总的来说，circleChart.js是一款强大且易用的jQuery插件，它使得创建美观的圆形百分比进度条变得简单快捷。开发者可以根据项目需求，灵活配置和扩展，以实现个性化的进度条展示效果。无论你是前端新手还是经验丰富的...
highchars圆环js
06-28
highchars圆环js代码 highchars圆环js代码highchars圆环js代码
JS绘制圆环
weixin_34166472的博客
03-29 1472
引用： https://www.cnblogs.com/dom-liu/p/6004375.html作者原创的和下面修改的刚好左右相反。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS圆环绘制</title> ...
圆形进度百分比js
06-30
js圆形进度百分比展示，进度条展示，运行进度
近20款样式的HTML5环形进度条插件
11-07
近20款样式的HTML5环形进度条插件 近20款样式的HTML5环形进度条插件
jquery圆环统计插件circliful
08-07
NULL 博文链接：https://justcoding.iteye.com/blog/2108038
js 简单的信息提示插件
01-25
js 信息提示插件，很简单，很实用。是我在网上找到的，觉得用起来很不错，所以保存在这里。
圆环百分比
weixin_33705053的博客
03-31 136
(function(a) { a.fn.circliful = function(b, d) { var c = a.extend({ fgcolor: "#556b2f", bgcolor: "#eee", fill: false,...
JavaScript实现图片旋转构成3D圆环代码
weixin_33910137的博客
09-02 424
代码简介： 很炫的图片展示特效，由一组图片构成一个3D的圆环状，并自动旋转，鼠标放到某一图片上会自动停止，JavaScript 的功能真够强大，你是不是后悔没有学好JS呢？ 代码内容： View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www.w3.org/TR/xhtml1/DT...
JS编写圆环百分比（计时器）
@芈文 的博客
09-17 1249
HTML（引入Jquery文件）: <div class="wrap"> <div class="circle"> <div class="percent left"></div> <div class="percent right wth0"></div> </div> <div class="num"><span>0</span>%</div> <
前端 环形统计_用Canvas+js 实现简单圆形百分比统计图表
weixin_33089349的博客
01-17 1377
示例效果图如下：1、先来制作简单HTML代码结构：2、再是CSS样式代码：body {margin: 0;padding: 50px 0;background-color: #444;}ul,li {list-style: none;margin: 0;padding: 0;}ul li {float: left;width: 33%;text-align: center;}3、具体JS代码实现+...
原生css js 圆环百分比 IE兼容
weixin_51000834的博客
07-19 161
【代码】原生css js 圆环百分比 IE兼容。
js css 圆环进度
最新发布
08-19
要创建一个使用JavaScript和CSS的圆环进度条，您可以按照以下步骤进行操作： 1. 首先，在HTML中创建一个包含进度条的容器元素。例如，使用以下代码创建一个具有容器类名为"container"的元素： ```html 一个动态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值