整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.说明：
推荐指数：★★★★
通过动画太极的方法，增加学习兴趣，对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小时内与您取得联系。
