jquery 划圆

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。划圆通常指的是在网页上绘制一个圆形，并可能包含动画效果。

类型

静态圆形：使用 CSS 绘制一个静态的圆形。
动态圆形：使用 jQuery 和 CSS3 动画绘制一个动态的圆形。
SVG 圆形：使用 SVG 图形绘制一个圆形，适合复杂的图形和动画。

应用场景

数据可视化：在图表中绘制圆形来表示数据。
进度条：使用圆形进度条来显示进度。
用户界面元素：在用户界面中添加圆形按钮或其他装饰性元素。

示例代码

使用 CSS 绘制静态圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Circle</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

使用 jQuery 和 CSS3 动画绘制动态圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Circle</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: blue;
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

使用 SVG 绘制圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Circle</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
</body>
</html>