Html、Css、JavaScript制作圓形進(jìn)度條的代碼及基礎(chǔ)分析

.說(shuō)明：

推薦指數(shù)：★★★★

通俗易懂，小白一看就會(huì)，高手請(qǐng)飄過(guò)。

學(xué)python也是需要懂一點(diǎn)Html、Css、JavaScript的基礎(chǔ)知識(shí)的。

建議使用vscode編輯器。

2.效果圖1

3.代碼：保存為html，用瀏覽器打開(kāi)即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圓形百分比進(jìn)度條效果</title>
		<style type="text/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;
		}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			<!--100%是顯示百分?jǐn)?shù)，動(dòng)態(tài)顯示由0~100-->
			<div class="text">100%</div> 

		</div>
		
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){				
				//獲取百分比值
				var num = parseInt($('.text').html());
				
				//通過(guò)計(jì)時(shí)器來(lái)顯示過(guò)渡的百分比進(jìn)度
				var temp = 0;
				var timer = setInterval(function(){
					calculate(temp);
					//清除計(jì)時(shí)器結(jié)束該方法調(diào)用
					if(temp == num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改變頁(yè)面顯示百分比
				function calculate(value){
					//改變頁(yè)面顯示的值
					$('.text').html(value + '%');
					
					//清除上次調(diào)用該方法殘留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//當(dāng)百分比小于等于50
					if(value <= 50){
						var html = '';
						
						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -= 50;
						var html = '';
						
						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html += '</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})
		</script>
		
	</body>
</html>

4.拆分法：把一個(gè)含有css和js（JavaScript）的html，拆掉三個(gè)文件，一個(gè)叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一個(gè)文件夾內(nèi)。這是./的意思，也可以指定文件夾。

4.1 cirbar1.html的代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圓形百分比進(jìn)度條效果v2</title>
		<!--如果是style type="text/css"這種直接在html中設(shè)置css，注意起始是*，不是點(diǎn)-->
		<!--style type="text/css"-->
		<link href="./cirbar1.css" rel="stylesheet" />
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			
			<div class="text">100%</div> 
		</div>
		<!--這個(gè)外部js文件=jquery.min.js，不能少，否則不能動(dòng)了-->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
        <!--同樣的，把寫(xiě)在html的js，新建一個(gè)cirbar1.js，復(fù)制下去，保存，這樣子簡(jiǎn)潔很多-->
		<!--script type="text/javascript"-->
		<script src="./cirbar1.js"></script>
	</body>
</html>

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());
				
				//通過(guò)計(jì)時(shí)器來(lái)顯示過(guò)渡的百分比進(jìn)度
				var temp = 0;
				var timer = setInterval(function(){
					calculate(temp);
					//清除計(jì)時(shí)器結(jié)束該方法調(diào)用
					if(temp == num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改變頁(yè)面顯示百分比
				function calculate(value){
					//改變頁(yè)面顯示的值
					$('.text').html(value + '%');
					
					//清除上次調(diào)用該方法殘留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//當(dāng)百分比小于等于50
					if(value <= 50){
						var html = '';
						
						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -= 50;
						var html = '';
						
						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html += '</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})

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

再來(lái)一個(gè)，不用外部js文件的圓形進(jìn)度條

順帶回顧一下相關(guān)知識(shí)。

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

5.效果圖

6.三個(gè)文件，放在同一個(gè)文件夾中

6.1 cirbar.html代碼：

<!--第1步---聲明html5-->
<!DOCTYPE html> 

<!--第2步---html大框架-->
<html lang="en">

<!--第2-1步---head部分-->
<head>
    <!--第2-1-1步---meta部分：聲明字符編碼格式：utf-8-->
    <!--注意與python的第一行聲明一樣：# -*- coding: utf-8 -*-->
    <meta charset="utf-8" />
    <!--第2-1-2步---標(biāo)題名稱(chēng)-->
    <title>圓形進(jìn)度條v1</title>
    <!--注意：./代表同一個(gè)文件夾下，也就是css和js文件與本html文件放在同一個(gè)文件夾下-->
    <!--第2-1-3步---導(dǎo)入css文件-->
    <link href="./cirbar.css" rel="stylesheet" />
</head>

<!--第2-2步---body部分-->
<body>
    <!--第2-2-1步---定義畫(huà)布部分，注意沒(méi)有逗號(hào)隔開(kāi)，大小設(shè)置-->
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>
    <!--第2-2-2步---導(dǎo)入js文件部分-->
    <script src="./cirbar.js"></script>

<!--注意收尾-->
</body>
<!--注意收尾-->
</html>

6.2 cirbar.css代碼：

.canvas {
            /*畫(huà)布的背景顏色設(shè)置為：黑色*/
            background:#303030;
            
        }

6.3 cirbar.js代碼：

window.onload = function () {
            var canvas = document.getElementById('canvas'),  //獲取canvas元素
                context = canvas.getContext('2d'),  //獲取畫(huà)圖環(huán)境，指明為2d
                centerX = canvas.width / 2,   //Canvas中心點(diǎn)x軸坐標(biāo)
                centerY = canvas.height / 2,  //Canvas中心點(diǎn)y軸坐標(biāo)
                rad = Math.PI * 2 / 100, //將360度分成100份，那么每一份就是rad度
                speed = 0.1; //加載的快慢就靠它了
            //繪制紅色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle = "	#1E90FF"; //隨百分?jǐn)?shù)轉(zhuǎn)動(dòng)的外圈的顏色為藍(lán)色
                context.lineWidth = 3; //設(shè)置線(xiàn)寬
                context.beginPath(); //路徑開(kāi)始
                //注意-為順時(shí)針，+為逆時(shí)針
                //用于繪制圓弧context.arc(x坐標(biāo)，y坐標(biāo)，半徑，起始角度，終止角度，順時(shí)針/逆時(shí)針)
                //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(); //路徑結(jié)束
                context.restore();
            }
            //繪制白色外圈，初始的白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                // 下面百分?jǐn)?shù)的字體顏色設(shè)置后上面的外圈的顏色竟然保持一樣
                //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可以保證樣式屬性只運(yùn)用于該段canvas元素
                context.strokeStyle = "#7FFF00";//設(shè)置中間動(dòng)態(tài)百分?jǐn)?shù)的顏色
                context.font = "25px Arial"; //設(shè)置字體大小和字體
                context.textAlign = 'center';//字體水平居中
                context.textBaseline = 'middle';//字體垂直居中
                //繪制字體，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);
                context.stroke(); //執(zhí)行繪制
                context.restore();
            }
            //循環(huán)獲取
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed < 100) {
                    //1可從后臺(tái)獲取值,也是從0~100，step為1，代表速度
                    speed += 1;
                }
            }());
        }

注意到6.3js文件與4.3js文件的區(qū)別了么？一個(gè)有：window.onload =，一個(gè)沒(méi)有，且只有$和小括號(hào)，因?yàn)橥獠康木褪俏募x了一部分功能。

果圖

各位長(zhǎng)友，大家上午好！

今天給各位帶來(lái)的是 CSS3 圓形星點(diǎn)旋轉(zhuǎn)大小變換動(dòng)畫(huà)特效源碼

十分簡(jiǎn)單且炫酷的一個(gè)特效！

大家可以按照自己的意愿修改成喜歡的樣子！

若是有想文件版源碼的可以進(jìn)HTML5前端技術(shù)交流 522323792

廢話(huà)不多說(shuō)，上源碼！

CSS:

html {

background: #111;

}

下是一個(gè)使用HTML和CSS實(shí)現(xiàn)綻放的煙花的示例代碼：

```html

<!DOCTYPE html>

<html>

<head>

<title>綻放的煙花</title>

<style>

.firework {

position: relative;

width: 100px;

height: 100px;

background-color: #ff0000;

border-radius: 50%;

animation: explode 1s ease-in-out infinite;

}

@keyframes explode {

0% {

transform: scale(1);

opacity: 1;

}

50% {

transform: scale(1.5);

opacity: 0.5;

}

100% {

transform: scale(1);

opacity: 1;

}

</style>

</head>

<body>

</body>

</html>

```

這段代碼創(chuàng)建了一個(gè)`div`元素，并將其樣式設(shè)置為一個(gè)圓形的紅色煙花。使用CSS的動(dòng)畫(huà)效果，通過(guò)`@keyframes`定義了一個(gè)名為`explode`的動(dòng)畫(huà)，使煙花在1秒鐘內(nèi)以縮放的方式產(chǎn)生綻放效果。動(dòng)畫(huà)會(huì)無(wú)限循環(huán)播放，直到頁(yè)面關(guān)閉。

你可以將上述代碼保存為一個(gè)HTML文件，并在瀏覽器中打開(kāi)，就能看到綻放的煙花效果了。希望你喜歡！

在線(xiàn)咨詢(xún)

上一篇：教你免費(fèi)下載付費(fèi)文檔，不限次數(shù)不用任何工具，全網(wǎng)資料任意復(fù)制
下一篇：html5+canvas-轉(zhuǎn)盤(pán)抽獎(jiǎng)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

Html、Css、JavaScript制作圓形進(jìn)度條的代碼及基礎(chǔ)分析

CSS:

您的項(xiàng)目需求