整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.說明：
推薦指數：★★★★
通過動畫太極的方法，增加學習興趣，對html的結構和css、JavaScript、div的認識和了解會逐步深入。
2.復習html的結構框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html結構基本框架代碼</title>
</head>
<body>
</body>
</html>3 div法
3.1 代碼：復制下面的代碼，命名為：div法.html，用瀏覽器打開即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div法的旋轉的太極圖</title>
</head>
<!--單獨style，不在head和body，只是在body內有一個div容器-->
<style>
div{
width: 0;
/*這個高就是黑色圓形和白色圓形的直徑和*/
height: 200px;
/*黑色太極部分的圈帶動的黑色的陰影*/
border-left: 100px solid black;
/*白色太極部分的圈帶動的白色的陰影*/
border-right: 100px solid #fff;
box-shadow: 0 0 15px rgba(0,0,0,.5);
/*旋轉半徑100*/
border-radius: 100px;
/*旋轉速度定義,越小越快*/
-webkit-animation:rotation 2.5s linear infinite;
}
div:before{
content: "";
position: absolute;
height: 100px;
z-index: 1;
border-radius: 100px;
/*白色的小半圓*/
border-left: 50px solid #fff;
border-right: 50px solid #fff;
left: -50px;
/*黑色的小半圓，因為轉動拖動黑色陰影*/
box-shadow: 0 100px 0 black;
}
div:after{
content: "";
position: absolute;
/*height是太極里面小圓圈的高30，要和border-radius30一致，才畫出圓*/
height: 30px;
/*這個是顯示小圓圈的,0就是不顯示*/
z-index: 1;
border-radius: 30px;
border-left: 15px solid;
border-right: 15px solid;
/*top和left，決定小圓圈白色和黑色的位置*/
top: 40px;
left: -15px;
/*黑色太極部分里面的小白色圓圈*/
box-shadow: 0 100px 0 white;
}
/*旋轉角度函數定義*/
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(-360deg);}
}
</style>
<body>
<div></div>
</body>
</html>3.2 效果圖
4 css法
4.1 css法.html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css法的旋轉的太極圖</title>
<!--css導入和js導入不一樣，請注意-->
<!--script-- src="./tj.css"></!--script-->
<link rel="stylesheet" type="text/css" href="./tj.css">
</head>
<body>
<div class="tj"></div>
</body>
</html>4.2 tj.css代碼：注意與上面兩個文件放在同一個文件夾下
.tj{
width: 100px;
height: 200px;
border: solid black;
border-width: 2px 100px 2px 2px;
background-color: #fff;
border-radius: 50%;
position: absolute;
/*run是動起來的函數，在最后面設置和定義*/
animation: run 2s linear infinite;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tj:before{
content: " ";
position: absolute;
width: 28px;
height: 28px;
background-color: black;
/*36=(100-28)/2得到的，是小白色圓圈的半徑*/
border: 36px #ffffff solid;
border-radius: 50%;
top: 0;
left: 50%;
}
.tj:after{
content: " ";
position: absolute;
width: 28px;
height: 28px;
background-color: #ffffff;
/*36=(100-28)/2得到的，是小黑色圓圈的半徑*/
border: 36px black solid;
border-radius: 50%;
top: 50%;
left: 50%;
}
/*run動起來的函數定義*/
@keyframes run{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}4.3 效果圖
5 js法=就是JavaScript法
5.1 js法.html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js法的旋轉的太極圖</title>
<!--注意下面2鐘都可以，主要是瀏覽器都支持html5-->
<!--script-- src="script.js" type="text/javascript"></!--script-->
<script src="./script.js"></script>
<!--簡單的css內容就這樣寫在下面，如果css比較復雜，則需要外部導入-->
<style type="text/css">
canvas{
display: block;
margin: 20px auto;
}
</style>
</head>
<body onload="main()">
<!--畫布大小,畫布框的線顏色藍色設置，solid blue是指畫布外框的顏色為藍色-->
<canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>
</body>
</html>5.2 script.js代碼：與上面html放在同一個文件夾下
//注意到沒有null=0，效果是一樣的
var angle = 0;
//var canvas = null;
//var ctx = null;
var canvas = 0;
var ctx = 0;
function main()
{
window.setInterval(function()
{
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
// 畫布大小有關
ctx.clearRect(0, 0, 300, 300);
// 線條寬度0~10，均可
ctx.lineWidth = 0;
ctx.save();
// 旋轉的中心點的坐標位置150,150
ctx.translate(150,150);
ctx.rotate(angle);
// 太極黑色部分
ctx.fillStyle = "black";
ctx.beginPath();
// 注意幾個函數數值的關系，120,60，半徑和坐標的關系，如果要縮小半徑，那么坐標也需要調整
ctx.arc(0, 0, 120, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
// 太極白色部分
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(0, 0, 120, 0, Math.PI, false);
ctx.fill();
ctx.closePath();
// 太極黑色部分
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(60, -0.6, 60, 0, Math.PI, false);
ctx.fill();
ctx.closePath();
// 太極白色部分
ctx.fillStyle = "white";
ctx.lineWidth = 0;
ctx.beginPath();
ctx.arc(-60, 0, 60, 0, Math.PI, true);
ctx.fill();
ctx.closePath();
// 白色太極部分里面的小黑色圓圈
ctx.fillStyle = "black";
ctx.beginPath();
//畫圓的函數：-145,0是坐標，15是半徑，2*Math.PI是一個圓，一個π是半圓
ctx.arc(-60, 0, 15, 0, 2*Math.PI, false);
ctx.fill();
ctx.closePath();
// 黑色太極部分里面的小白色圓圈
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(60, 0, 15, 0, 2*Math.PI, false);
ctx.fill();
ctx.closePath();
// 旋轉角度一次增加多少
ctx.restore();
angle += 0.02;
// 50代表轉速，越大越慢，越小越快
},1);
}
5.3 效果圖
6 值得收藏，慢慢回味。
首先我們看看效果：
實現這樣的功能需要學習以下幾點內容。
1.認識<img/><map><area/></map>基本結構
首先復制一個html框架，命名為“圖片區域鏈接.html”,示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>圖片區域鏈接</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>向<body></body>中添加<img><map><area/></map>基本結構，示例代碼如下：
<body>
<img/>
<map>
<area/>
</map>
</body> 指定要添加區域鏈接的圖片的路徑，如下：
<img src="img/image1.jpg"/>
<map>
<area/>
</map>讓<img>標簽通過<map>的名字來驅使<map>為自己工作。
需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。
第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經常出現。
示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area/>
</map>下面來劃分區域。
2.為圖片劃分區域的方法
<area>是用來劃分區域的標簽，area也是“”區域“”的意思。
默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。
分別添加三個形狀，示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect"/>
<area shape="circ"/>
<area shape="poly"/>
</map>下面我們就要為區域規定參數，也就是在圖像上的位置和范圍大小。
為<area>添加coords屬性可以指定區域的位置和范圍。
如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區域如下：
如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：
如果shape=“poly”，coords的參數不少于3對！注意是“對”！從左到右，兩個數就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如
這組參數畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數變了，參數就不正確了），如圖：
這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？
3.使用Gimp軟件精準定位圖片區域
使用Gimp軟件可以解決這個問題。
Gimp是一款類似于Photoshop的數字圖像處理軟件，不同的是，Gimp是開源免費的。
下載地址：https://www.gimp.org/
雙擊安裝即可，注意選擇一下安裝目錄。
完成安裝之后打開，界面如下：
點擊“文件”找到“打開”：
選擇要打開的圖片名字：
點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：
打開后如圖：
把鼠標放到圖像的任意位置，看左下角：
這里就會顯示我們鼠標所在的像素坐標數值。
這樣我們就能方便地寫“poly”的coords了。
請在空閑時找一張圖片演練一下吧！
4.為區域添加鏈接
在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：
href="https://www.zhihu.com/question/284642168" 添加title屬性可以在鼠標滑過鏈接區域時提示讀者，如下：
title="殲20氣動外形分析"今天的內容結束了，圖像區域鏈接在使用時還有一些注意事項，我們下次再詳細討論。
使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
.說明：
推薦指數：★★★★
通俗易懂，小白一看就會，高手請飄過。
學python也是需要懂一點Html、Css、JavaScript的基礎知識的。
建議使用vscode編輯器。
2.效果圖1
3.代碼：保存為html，用瀏覽器打開即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進度條效果</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%是顯示百分數，動態顯示由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());
//通過計時器來顯示過渡的百分比進度
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();
//當百分比小于等于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.拆分法：把一個含有css和js（JavaScript）的html，拆掉三個文件，一個叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一個文件夾內。這是./的意思，也可以指定文件夾。
4.1 cirbar1.html的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進度條效果v2</title>
<!--如果是style type="text/css"這種直接在html中設置css，注意起始是*，不是點-->
<!--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>
<!--這個外部js文件=jquery.min.js，不能少，否則不能動了-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
<!--同樣的，把寫在html的js，新建一個cirbar1.js，復制下去，保存，這樣子簡潔很多-->
<!--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());
//通過計時器來顯示過渡的百分比進度
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();
//當百分比小于等于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);
}
}
})==============================
再來一個，不用外部js文件的圓形進度條
順帶回顧一下相關知識。
==============================
5.效果圖
6.三個文件，放在同一個文件夾中
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步---標題名稱-->
<title>圓形進度條v1</title>
<!--注意：./代表同一個文件夾下，也就是css和js文件與本html文件放在同一個文件夾下-->
<!--第2-1-3步---導入css文件-->
<link href="./cirbar.css" rel="stylesheet" />
</head>
<!--第2-2步---body部分-->
<body>
<!--第2-2-1步---定義畫布部分，注意沒有逗號隔開，大小設置-->
<canvas class="canvas" id="canvas" width="400" height="400"></canvas>
<!--第2-2-2步---導入js文件部分-->
<script src="./cirbar.js"></script>
<!--注意收尾-->
</body>
<!--注意收尾-->
</html>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 =，一個沒有，且只有$和小括號，因為外部的就是文件定義了一部分功能。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
