一、rem版轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem版轮播图</title>
<style>
*{
margin:0;
padding:0;
}
html{
font-size: 20px;
}
@keyframes aaa {
from {left:0;}
to {left:-400rem;}
}
#aaa{
margin:0 auto;
width:80rem;
height:40rem;
overflow: hidden;
position: relative;
background: red;
}
#bbb{
position: absolute;
width:400rem;
height:40rem;
}
#bbb div{
width:80rem;
height:40rem;
float:left;
}
#bbb div img{
width:100%;
height:100%;
}
#bbb:hover{
animation: aaa 15s ease-in 0.5s infinite;
}
</style>
</head>
<body>
<div id="aaa">
<div id="bbb">
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/></div>
</div>
</div>
<div style="text-align: center;font-size: 4rem;">将鼠标置于图片之上，图片就开始轮播</div>
</body>
</html>
二、原生版轮播图（面对对象）
1、代码分两个部分：
（1）HTML部分，根据注释处理即可；
（2）play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。
（3）效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。
（4）这里可以预览效果。
2、轮播图原理说明：
（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，
（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；
（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推
（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意
（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。
3、使用时，id="boxQC"，这个id不能改动；"可增减区域"里的div可增可减；new Banner('1000px', '500px')，这里的参数可以变化。
（1）写法一：Banner.prototype={}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*style标签及其内的内容，在实际项目中可以不要*/
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--body标签里的内容，没说可以增减或更改的，不要增减或更改-->
<div id="boxQC">
<div>
<!--以下是可增减区域-->
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/>
</div>
<!--以上是可增减区域-->
</div>
</div>
</body>
</html>
<script>
function Banner(width, height) {/*类*/
/*以下最外层div*/
var that = this;
this.width = width;
this.height = height;
this.oBox = document.getElementById("boxQC");
this.oBox.style.width = width;
this.oBox.style.height = height;
this.oBox.style.margin = "0 auto";
this.oBox.style.overflow = "hidden";
this.oBox.style.position = "relative";
/*以下轮播区的div*/
this.oBoxInner = this.oBox.getElementsByTagName('div')[0];
this.oBoxInner.style.height = height;
this.oBoxInner.style.position = "absolute";
this.oBoxInner.style.left = 0;
this.oBoxInner.style.right = 0;
this.aDiv = this.oBoxInner.getElementsByTagName('div');//单个轮播图
this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/;
this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度
for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/
this.aDiv[i].style.width = width;
this.aDiv[i].style.height = height;
this.aDiv[i].style.float = "left";
this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0];
this.aDiv[i].aImg.style.width = "100%";
this.aDiv[i].aImg.style.height = "100%";
}
/*以下是焦点区部分（定位在轮播区的右下方）*/
var oUl = document.createElement('ul');
for (i = 0; i < this.aDiv.length - 1; i++) {
oUl.innerHTML += '<li class=' + i + '===1?"on":null></li>';
}
this.oBox.appendChild(oUl);
this.oUl = this.oBox.getElementsByTagName('ul')[0];
this.oUl.style.position = "absolute";
this.oUl.style.right = "10px";
this.oUl.style.bottom = "10px";
this.aLi = this.oUl.getElementsByTagName('li');
for (i = 0; i < this.aLi.length; i++) {/*遍历焦点区的每个焦点*/
this.aLi[i].style.width = "18px";
this.aLi[i].style.height = "18px";
this.aLi[i].style.float = "left";
this.aLi[i].style.listStyle = "none";
this.aLi[i].style.background = "green";
this.aLi[i].style.borderRadius = "50%";
this.aLi[i].style.marginLeft = "10px";
this.aLi[i].style.cursor = "pointer";
this.aLi[i].index = i;
this.aLi[i].onclick = function () {
that.step = this.index;
that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
that.bannerTip();
}
}
/*以下是向左向右两个箭头式按钮*/
for (i = 0; i < 2; i++) {
var oA = document.createElement('a');
oA.href = "javascript:;"
this.oBox.appendChild(oA);
}
/*以下是左按钮（点击它，图片向左运动）*/
this.oBtnL = this.oBox.getElementsByTagName('a')[0];
this.oBtnL.style.width = "30px";
this.oBtnL.style.height = "30px";
this.oBtnL.style.position = "absolute";
this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px";
this.oBtnL.style.left = "30px";
this.oBtnL.style.border = "10px solid red";
this.oBtnL.style.borderLeft = "none";
this.oBtnL.style.borderBottom = "none";
this.oBtnL.style.opacity = "0.3";
this.oBtnL.style.filter = "alpha(opacity=30)";
this.oBtnL.style.display = "none";
this.oBtnL.style.transform = "rotate(-135deg)";
this.oBtnL.onclick = function () {
if (that.step <= 0) {
that.step = that.aDiv.length - 1;
that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width));
}
that.step--;
that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
that.bannerTip();
};
/*以下是右按钮（点击它，图片向右运动）*/
this.oBtnR = this.oBox.getElementsByTagName('a')[1];
this.oBtnR.style.width = "30px";
this.oBtnR.style.height = "30px";
this.oBtnR.style.position = "absolute";
this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px";
this.oBtnR.style.right = "30px";
this.oBtnR.style.border = "10px solid red";
this.oBtnR.style.borderLeft = "none";
this.oBtnR.style.borderBottom = "none";
this.oBtnR.style.opacity = "0.3";
this.oBtnR.style.filter = "alpha(opacity=30)";
this.oBtnR.style.display = "none";
this.oBtnR.style.transform = "rotate(45deg)";
this.oBtnR.onclick = function () {
if (that.step >= that.aDiv.length - 1) {
that.step = 0;
that.css(that.oBoxInner, 'left', 0)
}
that.step++;
that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 1000);
that.bannerTip();
};
/*以下是其它*/
this.step = 0;//记录每次运动
this.timer = null;//定时器
this.init();//初始化轮播图
}
Banner.prototype = {//类的原型
constructor: Banner,
/*getCss：获取元素的属性值*/
getCss: function (curEle, attr) {
var val = null;
var reg = null;
if (getComputedStyle) {//标准浏览器
val = getComputedStyle(curEle, false)[attr];
} else {//非标准浏览器
if (attr === 'opacity') {
val = curEle.currentStyle.filter; //'alpha(opacity=10)'
reg = /^alpha\(opacity[=:](\d+)\)$/i;
return reg.test(val) ? reg.exec(val)[1] / 100 : 1;
}
val = curEle.currentStyle[attr];
}
reg = /^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
return reg.test(val) ? parseInt(val) : val;
},
/*setCss：设置元素的属性值*/
setCss: function (curEle, attr, value) {
if (attr === 'float') {
curEle.style.cssFloat = value;
curEle.style.styleFloat = value;
return;
}
if (attr === 'opacity') {
curEle.style.opacity = value;
curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')';
return;
}
var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i;
if (reg.test(attr)) {
if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) {
value = parseFloat(value) + 'px';
}
}
curEle.style[attr] = value;
},
/*setGroupCss：设置元素的一组属性值*/
setGroupCss: function (curEle, options) {
if (options.toString() !== '[object Object]') return;
for (var attr in options) {
this.setCss(curEle, attr, options[attr]);
}
},
/*css：getCss、setCss、setGroupCss的合写*/
css: function () {
if (typeof arguments[1] === 'string') {
if (typeof arguments[2] === 'undefined') {
return this.getCss(arguments[0], arguments[1]);//当第三个参数不存在，是获取；
} else {
this.setCss(arguments[0], arguments[1], arguments[2]);//当第三个参数存在时，是设置；
}
}
if (arguments[1].toString() === '[object Object]') {
this.setGroupCss(arguments[0], arguments[1]);//设置元素的一组属性值
}
},
/*animate：轮播图动画函数*/
/*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2：
定时器1里设置的时间>参数时间duration，
如果animate里不声明step变量step，里面使用step的地方，值不一致，
那么就会导致animation运行一次所需要的时间不等于duration。
*/
animate: function (curEle, target, duration) {
/*1.定义动画的运行轨迹*/
function tmpEffect(t, b, c, d) {
return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间
}
/*2.为公式的每个参数做准备*/
var begin = {};
var change = {};
for (var attr in target) {
begin[attr] = this.css(curEle, attr);
change[attr] = target[attr] - begin[attr];
}
duration = duration || 700;
var time = 0;
var that = this;
var step = 10;
/*初稿这里没有这个声明*/
/*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/
clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器
curEle.timer = setInterval(function () {
time += step;
/*4.定时器停止运动的条件（time>=duration）*/
if (time >= duration) {
that.css(curEle, target);
clearInterval(curEle.timer);
return;
}
/*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/
for (var attr in target) {
/*现在位置=开始位置+总距离/参数时间duration*time*/
var curPos = tmpEffect(time, begin[attr], change[attr], duration);
that.css(curEle, attr, curPos);
}
}, step)
},
/*初始化轮播图*/
init: function () {
var that = this;
/*1.开启自动轮播*/
/*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2：
定时器1里设置的时间>参数时间duration，
如果animate里不声明step变量step，里面使用step的地方，值不一致，
那么就会导致animation运行一次所需要的时间不等于duration。
*/
this.timer = setInterval(function () {
that.autoMove();
}, 2000);
/*2.开启焦点，每个焦点与每张轮播图对应*/
this.bannerTip();
/*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/
this.overOut();
},
autoMove: function () {
if (this.step >= this.aDiv.length - 1) {
this.step = 0;
this.css(this.oBoxInner, 'left', 0)
}
this.step++;
this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000);
this.bannerTip();
},
bannerTip: function () {
var tmpStep = this.step >= this.aLi.length ? 0 : this.step;
for (var i = 0; i < this.aLi.length; i++) {
this.aLi[i].className = i === tmpStep ? 'on' : null;
if (this.aLi[i].className === "on") {
this.aLi[i].style.background = "red";
} else {
this.aLi[i].style.background = "green";
}
}
},
overOut: function () {
var that = this;
that.oBox.onmouseover = function () {
clearInterval(that.timer);
that.oBtnL.style.display = 'block';
that.oBtnR.style.display = 'block';
};
that.oBox.onmouseout = function () {
that.timer = setInterval(function () {
that.autoMove()
}, 2000);
that.oBtnL.style.display = 'none';
that.oBtnR.style.display = 'none';
}
}
};
</script>
<script>
new Banner('1000px', '500px');
/*这两个参数分别是轮播区的宽和高，可以根据需要更改*/
</script>
（2）写法二：Banner.prototype.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*style标签及其内的内容，在实际项目中可以不要*/
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--body标签里的内容，没说可以增减或更改的，不要增减或更改-->
<div id="boxQC">
<div>
<!--以下是可增减区域-->
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg"
alt=""/></div>
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg"
alt=""/></div>
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg"
alt=""/>
</div>
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg"
alt=""/>
</div>
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg"
alt=""/>
</div>
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg"
alt=""/>
</div>
<div><img
src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg"
alt=""/>
</div>
<!--以上是可增减区域-->
</div>
</div>
</body>
</html>
<script>
function Banner(width, height) {/*类*/
/*以下最外层div*/
var that = this;
this.width = width;
this.height = height;
this.oBox = document.getElementById("boxQC");
this.oBox.style.width = width;
this.oBox.style.height = height;
this.oBox.style.margin = "0 auto";
this.oBox.style.overflow = "hidden";
this.oBox.style.position = "relative";
/*以下轮播区的div*/
this.oBoxInner = this.oBox.getElementsByTagName('div')[0];
this.oBoxInner.style.height = height;
this.oBoxInner.style.position = "absolute";
this.oBoxInner.style.left = 0;
this.oBoxInner.style.right = 0;
this.aDiv = this.oBoxInner.getElementsByTagName('div');//单个轮播图
this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/;
this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度
for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/
this.aDiv[i].style.width = width;
this.aDiv[i].style.height = height;
this.aDiv[i].style.float = "left";
this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0];
this.aDiv[i].aImg.style.width = "100%";
this.aDiv[i].aImg.style.height = "100%";
}
/*以下是焦点区部分（定位在轮播区的右下方）*/
var oUl = document.createElement('ul');
for (i = 0; i < this.aDiv.length - 1; i++) {
oUl.innerHTML += '<li class=' + i + '===1?"on":null></li>';
}
this.oBox.appendChild(oUl);
this.oUl = this.oBox.getElementsByTagName('ul')[0];
this.oUl.style.position = "absolute";
this.oUl.style.right = "10px";
this.oUl.style.bottom = "10px";
this.aLi = this.oUl.getElementsByTagName('li');
for (i = 0; i < this.aLi.length; i++) {/*遍历焦点区的每个焦点*/
this.aLi[i].style.width = "18px";
this.aLi[i].style.height = "18px";
this.aLi[i].style.float = "left";
this.aLi[i].style.listStyle = "none";
this.aLi[i].style.background = "green";
this.aLi[i].style.borderRadius = "50%";
this.aLi[i].style.marginLeft = "10px";
this.aLi[i].style.cursor = "pointer";
this.aLi[i].index = i;
this.aLi[i].onclick = function () {
that.step = this.index;
that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
that.bannerTip();
}
}
/*以下是向左向右两个箭头式按钮*/
for (i = 0; i < 2; i++) {
var oA = document.createElement('a');
oA.href = "javascript:;"
this.oBox.appendChild(oA);
}
/*以下是左按钮（点击它，图片向左运动）*/
this.oBtnL = this.oBox.getElementsByTagName('a')[0];
this.oBtnL.style.width = "30px";
this.oBtnL.style.height = "30px";
this.oBtnL.style.position = "absolute";
this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px";
this.oBtnL.style.left = "30px";
this.oBtnL.style.border = "10px solid red";
this.oBtnL.style.borderLeft = "none";
this.oBtnL.style.borderBottom = "none";
this.oBtnL.style.opacity = "0.3";
this.oBtnL.style.filter = "alpha(opacity=30)";
this.oBtnL.style.display = "none";
this.oBtnL.style.transform = "rotate(-135deg)";
this.oBtnL.onclick = function () {
if (that.step <= 0) {
that.step = that.aDiv.length - 1;
that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width));
}
that.step--;
that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
that.bannerTip();
};
/*以下是右按钮（点击它，图片向右运动）*/
this.oBtnR = this.oBox.getElementsByTagName('a')[1];
this.oBtnR.style.width = "30px";
this.oBtnR.style.height = "30px";
this.oBtnR.style.position = "absolute";
this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px";
this.oBtnR.style.right = "30px";
this.oBtnR.style.border = "10px solid red";
this.oBtnR.style.borderLeft = "none";
this.oBtnR.style.borderBottom = "none";
this.oBtnR.style.opacity = "0.3";
this.oBtnR.style.filter = "alpha(opacity=30)";
this.oBtnR.style.display = "none";
this.oBtnR.style.transform = "rotate(45deg)";
this.oBtnR.onclick = function () {
if (that.step >= that.aDiv.length - 1) {
that.step = 0;
that.css(that.oBoxInner, 'left', 0)
}
that.step++;
that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 1000);
that.bannerTip();
};
/*以下是其它*/
this.step = 0;//记录每次运动
this.timer = null;//定时器
this.init();//初始化轮播图
}
Banner.prototype.getCss = function (curEle, attr) {/*getCss：获取元素的属性值*/
var val = null;
var reg = null;
if (getComputedStyle) {//标准浏览器
val = getComputedStyle(curEle, false)[attr];
} else {//非标准浏览器
if (attr === 'opacity') {
val = curEle.currentStyle.filter; //'alpha(opacity=10)'
reg = /^alpha\(opacity[=:](\d+)\)$/i;
return reg.test(val) ? reg.exec(val)[1] / 100 : 1;
}
val = curEle.currentStyle[attr];
}
reg = /^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
return reg.test(val) ? parseInt(val) : val;
},
Banner.prototype.setCss = function (curEle, attr, value) {/*setCss：设置元素的属性值*/
if (attr === 'float') {
curEle.style.cssFloat = value;
curEle.style.styleFloat = value;
return;
}
if (attr === 'opacity') {
curEle.style.opacity = value;
curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')';
return;
}
var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i;
if (reg.test(attr)) {
if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) {
value = parseFloat(value) + 'px';
}
}
curEle.style[attr] = value;
},
Banner.prototype.setGroupCss = function (curEle, options) {/*setGroupCss：设置元素的一组属性值*/
if (options.toString() !== '[object Object]') return;
for (var attr in options) {
this.setCss(curEle, attr, options[attr]);
}
},
Banner.prototype.css = function () {/*css：getCss、setCss、setGroupCss的合写*/
if (typeof arguments[1] === 'string') {
if (typeof arguments[2] === 'undefined') {
return this.getCss(arguments[0], arguments[1]);//当第三个参数不存在，是获取；
} else {
this.setCss(arguments[0], arguments[1], arguments[2]);//当第三个参数存在时，是设置；
}
}
if (arguments[1].toString() === '[object Object]') {
this.setGroupCss(arguments[0], arguments[1]);//设置元素的一组属性值
}
},
/*animate：轮播图动画函数*/
/*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2：
定时器1里设置的时间>参数时间duration，
如果animate里不声明step变量step，里面使用step的地方，值不一致，
那么就会导致animation运行一次所需要的时间不等于duration。
*/
Banner.prototype.animate = function (curEle, target, duration) {
/*1.定义动画的运行轨迹*/
function tmpEffect(t, b, c, d) {
return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间
}
/*2.为公式的每个参数做准备*/
var begin = {};
var change = {};
for (var attr in target) {
begin[attr] = this.css(curEle, attr);
change[attr] = target[attr] - begin[attr];
}
duration = duration || 700;
var time = 0;
var that = this;
var step = 10;
/*初稿这里没有这个声明*/
/*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/
clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器
curEle.timer = setInterval(function () {
time += step;
/*4.定时器停止运动的条件（time>=duration）*/
if (time >= duration) {
that.css(curEle, target);
clearInterval(curEle.timer);
return;
}
/*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/
for (var attr in target) {
/*现在位置=开始位置+总距离/参数时间duration*time*/
var curPos = tmpEffect(time, begin[attr], change[attr], duration);
that.css(curEle, attr, curPos);
}
}, step)
},
Banner.prototype.init = function () {/*初始化轮播图*/
var that = this;
/*1.开启自动轮播*/
/*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2：
定时器1里设置的时间>参数时间duration，
如果animate里不声明step变量step，里面使用step的地方，值不一致，
那么就会导致animation运行一次所需要的时间不等于duration。
*/
this.timer = setInterval(function () {
that.autoMove();
}, 2000);
/*2.开启焦点，每个焦点与每张轮播图对应*/
this.bannerTip();
/*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/
this.overOrOut();
},
Banner.prototype.autoMove = function () {
if (this.step >= this.aDiv.length - 1) {
this.step = 0;
this.css(this.oBoxInner, 'left', 0)
}
this.step++;
this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000);
this.bannerTip();
},
Banner.prototype.bannerTip = function () {
var tmpStep = this.step >= this.aLi.length ? 0 : this.step;
for (var i = 0; i < this.aLi.length; i++) {
this.aLi[i].className = i === tmpStep ? 'on' : null;
if (this.aLi[i].className === "on") {
this.aLi[i].style.background = "red";
} else {
this.aLi[i].style.background = "green";
}
}
},
Banner.prototype.overOrOut = function () {
var that = this;
that.oBox.onmouseover = function () {
clearInterval(that.timer);
that.oBtnL.style.display = 'block';
that.oBtnR.style.display = 'block';
};
that.oBox.onmouseout = function () {
that.timer = setInterval(function () {
that.autoMove()
}, 2000);
that.oBtnL.style.display = 'none';
that.oBtnR.style.display = 'none';
}
}
</script>
<script>
new Banner('1000px', '500px');
/*这两个参数分别是轮播区的宽和高，可以根据需要更改*/
</script>
三、jQuery版轮播图
1、代码分两个部分：
（1）HTML部分，根据注释处理即可；
（2）基于jQuery的play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。
（3）效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。（4）这里可以预览效果。
2、轮播图原理说明：
（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，
（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；
（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推
（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意
（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。
3、也可以用命名空间的方式进行扩展：
（1）说明
<script>
$.myPlugin = { banner: function (width, height) {----插件代码---- } };
</script>
<script>
$.myPlugin.banner('500px', '250px');
</script>
（2）示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*style标签及其内的内容，在实际项目中可以不要*/
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--body标签里的内容，没说可以增减或更改的，不要增减或更改-->
<div id="box">
<div>
<!--以下是可增减区域-->
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/>
</div>
<!--以上是可增减区域-->
</div>
</div>
</body>
</html>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
(function($){
$.fn.extend({
banner: function (width, height) {
var $oBox = $("#box");
/*以下最外层div*/
$oBox.css({
"height": height,
"width": width,
"margin": "0 auto",
"overflow": "hidden",
"position": "relative"
});
/*以下轮播区的div*/
var $oBoxInner = $oBox.children('div');
var aDiv = $oBoxInner[0].innerHTML;
/* 轮播区内部原来的值*/
var aDiv0 = $oBoxInner.children('div')[0].outerHTML;
/*第一个轮播图片的外部*/
$oBoxInner.html(aDiv + aDiv0);
/* 用jQuery的方法给轮播区内部重新赋值*/
var $width = parseFloat(width) * $oBoxInner.children('div').length + "px";
$oBoxInner.css({
"height": height,
"width": $width,
"position": "absolute",
"left": 0,
"right": 0,
"float": "left"
});
$oBoxInner = $oBox.children('div');
var $aDiv = $oBoxInner.children("div");
$aDiv.css({"width": width, "height": height, "float": "left"});
$aDiv.children('img').css({"width": "100%", "height": "100%"});
/*以下是焦点区部分（定位在轮播区的右下方）*/
$oBox.append("<ul></ul>");
var $ul = $oBox.children("ul");
var $li = "";
$aDiv.each(function (index) {
if (index < $aDiv.length - 1) {
$li += '<li></li>';
}
});
$ul.append($li);
$ul = $oBox.children("ul");
$ul.css({"position": "absolute", "right": "10px", "bottom": "10px"});
$li = $ul.children("li");
$li.css({
"width": "18px",
"height": "18px",
"float": "left",
"listStyle": "none",
"background": "green",
"borderRadius": "50%",
"marginLeft": "10px",
"cursor": "pointer"
});
/*以下是向左向右两个箭头式按钮*/
var $a = "<a href = 'javascript:;'></a><a href = 'javascript:;'></a>";
$oBox.append($a);
/*以下是左按钮（点击它，图片向左运动）*/
var $oBtnL = $oBox.children('a').eq(0);
$oBtnL.css({
"width": "30px",
"height": "30px",
"position": "absolute",
"top": (parseFloat(height) / 2 - 15) + "px",
"left": "30px",
"border": "10px solid red",
"borderLeft": "none",
"borderBottom": "none",
"opacity": 0.6,
"filter ": "alpha(opacity=60)",
"display": "none",
"transform": "rotate(-135deg)"
});
$oBtnL.click(function () {
if ($step <= 0) {
$step = $aDiv.length - 1;
$oBoxInner.css('left', -$step * parseFloat(width));
}
$step--;
$oBoxInner.animate({left: -$step * parseFloat(width)});
$bannerTip();
});
/*以下是右按钮（点击它，图片向右运动）*/
var $oBtnR = $oBox.children('a').eq(1);
$oBtnR.css({
"width": "30px",
"height": "30px",
"position": "absolute",
"top": (parseFloat(height) / 2 - 15) + "px",
"right": "30px",
"border": "10px solid red",
"borderLeft": "none",
"borderBottom": "none",
"opacity": 0.6,
"filter": "alpha(opacity=60)",
"display": "none",
"transform": "rotate(45deg)"
});
$oBtnR.click(function () {
if ($step >= $aDiv.length - 1) {
$step = 0;
$oBoxInner.css('left', 0)
}
$step++;
$oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);
$bannerTip();
});
var $step = 0;//记录每次运动
var $timer = null;//定时器
$init();//初始化轮播图
function $init() {
/*1.开启自动轮播*/
$timer = setInterval(function () {
$autoMove();
}, 2000);
/*2.开启焦点，每个焦点与每张轮播图对应*/
$bannerTip();
/*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/
$overOut();
}
$li.each(function (index) {
$(this).on('click', function () {
$step = index;
$oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);
$bannerTip();
})
});
function $autoMove() {
if ($step >= $aDiv.length - 1) {
$step = 0;
$oBoxInner.css('left', 0)
}
$step++;
$oBoxInner.animate({left: -$step * parseFloat(width)}, 1000);
$bannerTip();
}
function $bannerTip() {
var tmpStep = $step >= $li.length ? 0 : $step;
$li.each(function (index) {
$li.eq(index).attr("class",index === tmpStep ? 'on' : null);
if ($li.eq(index).attr("class") === "on") {
$li.eq(index).css("background","red");
} else {
$li.eq(index).css("background","green");
}
})
}
function $overOut() {
$oBox.mouseover(function () {
clearInterval($timer);
$oBtnL.css({"display": "block"});
$oBtnR.css({"display": "block"});
});
$oBox.mouseout(function () {
$timer = setInterval(function () {
$autoMove()
}, 2000);
$oBtnL.css({"display": "none"});
$oBtnR.css({"display": "none"});
});
}
}
})
})(jQuery)
</script>
<script>
$("#box").banner('500px', '250px');
</script>
四、table表格
1、重要特征
（1）表格样式
table{
border-collapse:collapse;//单元格边框与边框之间_合
}
table{
border-collapse:separate;//单元格边框与边框之间_分
border-spacing:5px;//单元格边框与边框之间_距离（cellspacing）
}
table tr th,table tr td{
padding:5px;//每个单元格内补_大小（cellpadding）
border:1px solid grey;//每个单元格框线_宽度
}
（2）表格标签属性
<table cellspacing="5" cellpadding="20"></table>
（3）表头单元格th属性
<th rowspan="2" colspan="2"></th>
（4）表体单元格td属性
<td rowspan="2" colspan="2"></td>
2、table表格嵌套合并
<table class="table">
<thead>
<tr>
<th>
<button>序号</button>
</th>
<th ng-repeat="li in title track by $index">
<button>{{li}}</button>
</th>
</tr>
</thead>
<tbody ng-repeat="li in list__detail track by $index">
<tr>
<td>
<div>
<img ng-src="{{''}}" alt=""/>
</div>
</td>
<td ng-bind="li.name"></td>
<td ng-bind="li.name"></td>
<td ng-bind="li.name"></td>
<td ng-bind="li.name"></td>
</tr>
<tr ng-if="li.is_show">
<td colspan="9999"><!-- 这点很重要，td下面放div -->
<div id="JSONData">
<div>此处可以通过jquery.json-viewer.js，格式化JSON数据</div>
<div>js代码为$('#JSONData').jsonViewer(JSON.parse(data))</div>
</div>
</td>
</tr>
<tr ng-if="li.is_show">
<td colspan="9999"><!-- 这点很重要，td下面放table -->
<table>
<thead>
<tr>
<th>文字</th>
<th>文字</th>
<th>文字</th>
<th>文字</th>
<th>文字</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list track by $index">
<td ng-bind="item.name"></td>
<td ng-bind="item.name"></td>
<td ng-bind="item.name"></td>
<td ng-bind="item.name"></td>
<td ng-bind="item.name"></td>
</tr>
<tr>
<td colspan="9999" ng-if="list.length<1">暂无数据可显示。</td>
</tr>
</tbody>
</table>
<!-- 此处分页组件 -->
</td>
</tr>
</tbody>
</table>
3、table表格数据，嵌套变平级
var allDatas = res.data[0];
var fourMenuLast = [];
var repeatA = '';
var repeatB = '';
angular.forEach(allDatas.children, function (item1) {//步骤1,40
var fourMenu = {//步骤2,
myMenu1: {},
myMenu2: {},
myMenu3: {}
};
fourMenu.myMenu1.name = item1.name;//步骤3,
fourMenu.myMenu1.id = item1.id;//步骤4,
fourMenu.myMenu1.showname = item1.name;//步骤5,
angular.forEach(item1.children, function (item2) {//步骤6,20,
fourMenu.myMenu2.name = item2.name;//步骤7,21,
fourMenu.myMenu2.id = item2.id;//步骤8,22,
fourMenu.myMenu2.showname = item2.name;//步骤9,23,
angular.forEach(item2.children, function (item3) {//步骤10,15，24,30,35，
fourMenu.myMenu3.name = item3.name;//步骤11，16，25,31,36，
fourMenu.myMenu3.id = item3.id;//步骤12，17，26,27,32,37，
fourMenu.myMenu3.showname = item3.name;//步骤13，18，28,33,38，
fourMenuLast.push(angular.copy(fourMenu));//步骤14，19，29,34，39，
});
});
//fourMenuLast=[fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu,fourMenu];
$scope.rowSpan1 = {}; //某个一级导航合并的行数
angular.forEach(fourMenuLast, function (item) {
if ($scope.rowSpan1[item.myMenu1.id]) {
$scope.rowSpan1[item.myMenu1.id] += 1;
} else {
$scope.rowSpan1[item.myMenu1.id] = 1;
}
if (item.myMenu1.id === repeatA) {
item.myMenu1.name = '';
} else {
repeatA = item.myMenu1.id;
}
});
$scope.rowSpan2 = {}; //某个二级导航合并的行数
angular.forEach(fourMenuLast, function (item) {
if ($scope.rowSpan2[item.myMenu2.id]) {
$scope.rowSpan2[item.myMenu2.id] += 1;
} else {
$scope.rowSpan2[item.myMenu2.id] = 1;
}
if (item.myMenu2.id === repeatB) {
item.myMenu2.name = '';
} else {
repeatB = item.myMenu2.id;
}
});
$scope.allroles = fourMenuLast;
})
4、table表格示例（含固定栏和滑动栏）
<!DOCTYPE html>
<html lang="en">
<head>
<title>左侧固定宽，右侧占满剩余宽</title>
<meta charset="utf-8"/>
<style>
* {
padding: 0;
margin: 0;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 17px;
height: 17px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
background: #dabda2;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-top-left-radius: 0
}
/* 滚动条滑块*/
::-webkit-scrollbar-thumb {
background: #bb8459;
border-radius: 10px;
box-shadow: inset 0 0 6px gray;
}
table {
border: 1px solid black;
width: 1000px;
color: #000000;
text-align: center;
border-collapse: collapse;
}
table thead tr th,
table tbody tr td {
border: 1px solid black;
min-width: 100px;
white-space: nowrap;
padding: 5px 20px;
}
.leftDiv{
width:300px;
padding:20px;
border-radius: 10px;
border:1px solid gray
}
.leftDiv p{
padding:10px;
font-size: 20px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
init();
function init() {
var str = makeTableBodyString();
var width = document.body.clientWidth-300;
$("tbody").html(str);
fixColumnTable("myTable", 4, width, 600);
}
window.onresize = function () {
init();
}
function fixColumnTable(tableID, fixColumnNumber, width, height) {
//1、以下给"哥哥表格"添加1个"弟弟div"
var tableIDSibling = "";
tableIDSibling += "<div id='" + tableID + "sibling' style='overflow:hidden;height:" + height + "px;";
tableIDSibling += " width:" + width + "px;border:1px solid gray;border-radius:10px;'></div>";
$("#" + tableID).after(tableIDSibling);
//2、在"弟弟div"内，插入4个"儿子div"，并设置堆叠顺序
var tableIDSiblingInner = "";
tableIDSiblingInner += '<div id="' + tableID + 'HeadFix"></div>';
tableIDSiblingInner += '<div id="' + tableID + 'HeadMove"></div>';
tableIDSiblingInner += '<div id="' + tableID + 'BodyFix"></div>';
tableIDSiblingInner += '<div id="' + tableID + 'BodyMove"></div>';
$(tableIDSiblingInner).appendTo("#" + tableID + "sibling");
$("#" + tableID + "HeadFix").css({ "overflow": "hidden", "z-index": "50", "background-color": "silver" });
$("#" + tableID + "HeadMove").css({ "overflow": "hidden", "z-index": "45", "background-color": "silver", "width": width - 17 });
$("#" + tableID + "BodyFix").css({ "overflow": "hidden", "z-index": "40", "background-color": "silver", "height": height - 17 });
$("#" + tableID + "BodyMove").css({ "overflow": "scroll", "z-index": "35", "width": width, "height": height });
//3、以下给"哥哥表格"和3个克隆，分别插入到4个"儿子div"中，生成4个"孙子表格"
var oldTable = $("#" + tableID);
var headFix = oldTable.clone(true);
var headMove = oldTable.clone(true);
var bodyFix = oldTable.clone(true);
$("#" + tableID + "HeadFix").append(headFix);
$("#" + tableID + "HeadMove").append(headMove);
$("#" + tableID + "BodyFix").append(bodyFix);
$("#" + tableID + "BodyMove").append(oldTable);
//4、以下获取"哥哥表格"头部固定栏的高和左侧固定栏的宽
var columnsWidth = 2;
var headHeight = $("#" + tableID + " thead").height()+2;
$("#" + tableID + " tr:last td:lt(" + fixColumnNumber + ")").each(function () {
columnsWidth += $(this).outerWidth(true);
});
//5、以下设置其中3个"儿子div"的宽或高，高度变小后，下面的div会上升
$("#" + tableID + "HeadFix").css("height", headHeight);//设置左上方"儿子div"的高
$("#" + tableID + "HeadFix").css("width", columnsWidth);//设置左上方"儿子div"的宽
$("#" + tableID + "HeadMove").css("height", headHeight);//设置上方"儿子div"的高
$("#" + tableID + "BodyFix").css("width", columnsWidth);//设置左侧"儿子div"的宽
//6、以下将4个"儿子div"定位到"弟弟div"的正上方
//offset方法：“获取”或“设置”匹配元素相对于文档的偏移
//（1）“获取”借助于getBoundingClientRect来实现
//（2）“设置”借助于jQuery.offset.setOffset来实现，其内部用position“获取”父级定位元素的位置
//（3）在setOffset源码中，相对定位和绝对定位走不同的逻辑，实现相同的定位效果
$("#" + tableID + "HeadFix").offset($("#" + tableID + "sibling").offset());//$HeadFix.css({top: -1, left: -1})
$("#" + tableID + "HeadMove").offset($("#" + tableID + "sibling").offset());//$HeadMove.css({top: -35, left: -1})
$("#" + tableID + "BodyFix").offset($("#" + tableID + "sibling").offset());//$BodyFix.css({top: -69, left: -1})
$("#" + tableID + "BodyMove").offset($("#" + tableID + "sibling").offset());//$BodyMove.css({top: -652, left: -1})
//7、以下当第4个"儿子div"的滑动时，第2个或第3个"儿子div"同步滑动
$("#" + tableID + "BodyMove").scroll(function () {
$("#" + tableID + "HeadMove").scrollLeft($("#" + tableID + "BodyMove").scrollLeft());
$("#" + tableID + "BodyFix").scrollTop($("#" + tableID + "BodyMove").scrollTop());
});
}
function randomMath(n, m) {
return Math.round(Math.random() * (m - n) + n);
}
function makeTableBodyString() {
var firstName = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶江';
var lastName = '枯藤老树昏鸦小桥流水人家古道西风瘦马夕阳西下断肠人在天涯马致远天净沙秋思';
var ary = [];
for (var i = 1; i <= 60; i++) {
var obj = {
name: firstName[randomMath(0, 31)] + lastName[randomMath(0, 35)] + lastName[randomMath(0, 35)],
yuwenScore: randomMath(60, 100) + "分",
shuxueScore: randomMath(60, 100) + "分",
yingyuScore: randomMath(60, 100) + "分",
zhengzhiScore: randomMath(60, 100) + "分",
lishiScore: randomMath(60, 100) + "分",
diliScore: randomMath(60, 100) + "分",
wuliScore: randomMath(60, 100) + "分",
huaxueScore: randomMath(60, 100) + "分",
shengwuScore: randomMath(60, 100) + "分",
tiyuScore: randomMath(60, 100) + "分",
yingyueScore: randomMath(60, 100) + "分",
meishuScore: randomMath(60, 100) + "分"
};
ary.push(obj);
}
var str = ""
$.each(ary, function (index, item) {
str += "<tr>";
str += "<td>" + item.name + "</td>";
str += "<td>" + item.yuwenScore + "</td>";
str += "<td>" + item.shuxueScore + "</td>";
str += "<td>" + item.yingyuScore + "</td>";
str += "<td>" + item.zhengzhiScore + "</td>";
str += "<td>" + item.lishiScore + "</td>";
str += "<td>" + item.diliScore + "</td>";
str += "<td>" + item.wuliScore + "</td>";
str += "<td>" + item.huaxueScore + "</td>";
str += "<td>" + item.shengwuScore + "</td>";
str += "<td>" + item.tiyuScore + "</td>";
str += "<td>" + item.tiyuScore + "</td>";
str += "<td>" + item.meishuScore + "</td>";
str += "<td>" + "===================================" + "</td>";
str += "</tr>";
})
return str;
}
});
</script>
</head>
<body>
<div style="display: flex;">
<div class="leftDiv">
<p>效果说明：</p>
<p>左侧固定宽，</p>
<p>右侧表格占满余下宽，</p>
<p>窗口宽度变化时，</p>
<p>依然保持这个效果。</p>
</div>
<div style="flex:1;height:600px">
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>政治</th>
<th>历史</th>
<th>地理</th>
<th>物理</th>
<th>化学</th>
<th>生物</th>
<th>体育</th>
<th>音乐</th>
<th>美术</th>
<th>备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 模仿来源https://blog.csdn.net/qq_29170981/article/details/79221644 -->
</body>
</html>
五、js根据表达式画曲线
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
</head>
<body>
<div id="box" style="width:500px;height:1000px"></div>
<script>
//参数说明 https://www.javascriptcn.com/read-36947.html
functionPlot({
target:document.getElementById("box"),
data:[
{fn:"x^4+x^3+x^2+x+1"}
],
title:"ddddddd",
xAxis:{
domain:[-5,5],
},
yAxis:{
domain:[0,70],
}
})
</script>
</body>
</html>
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
</head>
<body>
<div id="box" style="width:500px;height:1000px"></div>
<script>
functionPlot({
target:document.getElementById("box"),
data:[
{fn:"sqrt(4-x^2)"},
{fn:"-sqrt(4-x^2)"},
],
title:"ddddddd",
xAxis:{
domain:[-5,5],
},
yAxis:{
domain:[-3,3],
},
grid:true,
disableZoom:true
})
</script>
</body>
</html>
示例三：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>plot 绘制图像</title>
</head>
<body>
<div id="tester" style="width:600px;height:250px;"></div>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
TESTER = document.getElementById('tester');
Plotly.plot(TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16]
}], {
margin: {t: 0}
});
</script>
</html>
示例四：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>plot 绘制图像</title>
</head>
<body>
<div id="math-function" style="width:600px;height:250px;"></div>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
TESTER = document.getElementById('math-function');
var x = [], y = [];
for(var i = -10; i < 10; i += 1) {
x.push(i);
y.push(2*i+1);
}
Plotly.plot(TESTER, [{
x: x,
y: y
}], {
margin: {t: 0}
});
</script>
</html>
六、10行实现不重复验证码
不重复的6位随机验证码非常常用，这里是最简单的两种实现方式：（1）自动生成，（2）点击更新。
1、自动生成：每隔1秒自动生成1次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#yard{
font-size: 170px;
background: grey;
}
</style>
<body>
<div id="yard"></div>
</body>
</html>
<script>
var div = document.getElementById("yard");
function fn(){
var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var str = '';
while (str.length < 6) {
var str1 = strCode.charAt(Math.round(Math.random() * 61));
if (str.indexOf(str1) === -1) {
str += str1;
}
}
div.innerHTML=str;
}
fn();
var timer=setInterval(fn,1000)
</script>
2、点击更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#yard{
font-size: 170px;
background: grey;
cursor: pointer;/*比“1、自动生成”多出的代码*/
-webkit-user-select:none;/*比“1、自动生成”多出的代码*/
}
</style>
<body>
<div id="yard"></div>
</body>
</html>
<script>
var div = document.getElementById("yard");
div.onclick=fn;
function fn(){
var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var str = '';
while (str.length < 6) {
var str1 = strCode.charAt(Math.round(Math.random() * 61));
if (str.indexOf(str1) === -1) {
str += str1;
}
}
div.innerHTML=str;
}
fn();
</script>
七、8行实现发电报效果，电视剧中经常出现文字一个一个地出现的显示屏上，好像是发电报一样，方案2用8行代码实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
background: #000;
padding: 0;
margin: 0;
}
p {
color: white;
font-size: 65px;
text-indent: 130px;
font-family:"kaiti";
}
</style>
</head>
<body>
<p id="transmitter"></p>
</body>
</html>
<script>
//以下方案1：
var now = new Date();
var past = new Date('2016-01-01 00:00:00');
var nowMilliseconds = now.getTime();
var pastMilliseconds = past.getTime();
var seconds = Math.floor((nowMilliseconds - pastMilliseconds)/1000)
var year = Math.floor(seconds / (86400*365)) + '年';// 3600*24 = 86400;
var month = Math.floor((seconds % (86400*365)) / (86400*30)) + '个月';
var str = year + month;
//以下方案2：
//var str = new Date().getFullYear() - 2016 + '年';
//以下公共部分：
var transmitter = document.getElementById("transmitter");
var allCharacters = "钱成，河南省固始县人，2016年初至今，从事前端工作"+ str +"有余，现在是人类最优秀的前端工程师。联系电话：137 1616 4418。完！";
var n = 0;
var timer = setInterval(function () {
transmitter.innerHTML += allCharacters.charAt(n);
n++;
console.log( n );
if (n >= allCharacters.length)clearInterval(timer);
}, 100);
</script>
八、css样式汇总
1、光标与选中
（1）cursor: pointer;光标类型：小手
（2）user-select: none;用户选择：禁止选中文字
2、样式动态添加与计算
（1）obj.style可读（写在元素标签中，style属性里的样式）、可写（如下）
A、obj.style.width = '400px';
B、obj.style.cssText = "width:400px; height:300px";
（2）getComputedStyle可读（元素的所有样式，如下）、不可写
A、var first=document.getElementById("first");
B、window.getComputedStyle(first,null).backgroundColor
3、出错与解决
（1）问题1
现象，{overflow:hidden}导致错位
解决，{overflow:hidden;vertical-align:top/middle/bottom }
（2）问题2，滚动条破坏布局，
现象，当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏
原因，滚动条的宽度是计算到内容 content 里的
解决，增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变
4、隐藏滚动条
*::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar {
width: 0;
}
5、单行文本溢出显示省略号
div{
overflow: hidden;/*溢出隐藏*/
text-overflow:ellipsis;/*隐藏的部分用...表示*/
white-space: nowrap;/*文字不能转行*/
}
6、兄弟叠加
需求：
A、哥哥盒子不隐藏，弟弟盒子放在哥哥盒子上，
B、哥哥盒子隐藏，弟弟元素占据哥哥盒子的位置，
实现：
.search-outer{margin-bottom: -90px;}
7、多行文本溢出显示省略号
div{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
8、tabIndex和a标签
（1）给div标签添加属性tabIndex=-1，可以使该div有onfocus与onblur事件
（2）a标签focus()不聚焦解决方案，给它添加属性href为#
（3）a标签有黑框解决方案，设置样式outline为none
（4）a标签点击后，响应用户自定义的点击事件
<a href="javascript:void(0);" onclick="doSomething()">test</a>
<a href="javascript:;" onclick="doSomething()">test</a>
<a href="####" onclick="doSomething()">test</a>
9、a标签之target属性的取值
示例：<a target="_blank|_self|_parent|_top|framename"></a>
（1）_self：默认，当前页面跳转
（2）_blank：新窗口打开
（3）_parent：在父窗口中打开链接
（4）_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)
10、清除浮动的7种方法
原因：父元素不浮动，子元素浮动，引发父元素塌陷
解决方案：
（1）子级结尾处加空div标签 clear:both
（2）父级div 也一起浮动
（3）父级div定义 width
（4）父级div定义 伪类:after .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
（5）父级div定义 overflow: hidden 或者 auto
（6）父级div定义 display:table
11、块级元素A及其内部的块级元素B，
（1）A浮动，B不浮动，B的宽度为B实际需要的宽度，A的宽度由B决定；
（2）A不浮动，B浮动，会引发A塌陷。
（3）A和B都浮动，不会引发A塌陷。
12、块级元素A及其弟弟块级元素B的默认宽度是100%；
（1）A浮动，B不浮动，A的宽度为A实际需要的宽度，B会插到A的下面；
（2）A不浮动，B浮动，B浮到A的上方。
（3）A和B都浮动，则A和B同行，宽度为它们实际需要的宽度
13、后台返回字符串中的\n或\r，前端展示为换行
实现方案，用js把字符串插入到html的标签中
<p style="display: flex;border: 1px solid #c7d2e0;width:700px;margin-left: 34px" >
<textarea readonly ng-bind="detailDialogCache.res.pcap_str" class="textarea" style="width:500px;padding:20px;font-family: '宋体';border:none;resize: none;"></textarea>
<textarea readonly ng-bind="detailDialogCache.res.ascii_str" class="textarea" style="flex:1;padding:20px;font-family: '宋体';border:none;resize: none;" ></textarea>
</p>
var height = 0;
$('.textarea').each(function () {
if (this.scrollHeight > height) height = this.scrollHeight;
});
$('.textarea').each(function () {
$(this).height(height - 40);
});
14、hover悬停时，内部样式更换
<div class="outer" @click="goSearch" >
<div class="black"><svg-icon icon-class="search"></svg-icon></div>
<div class="white"><svg-icon icon-class="searchWhite"></svg-icon></div>
</div>
.outer {
.black{
display: block;
color: black;
}
.white{
display: none;
}
}
.outer:hover {
.black{
display: none;
}
.white{
display: block;
color: white;
}
}
15、媒体查询，以下（2）（3）可重复
@media mediaType key (mediaFeature) {
CSS-Code;
}
（1）mediaType，媒体类型，可省略
A、all，所有设备
B、print，打印机等设备
C、screen，彩色屏幕（手机，电脑）
（2）key，关键字，可省略
A、and：可以将多个媒体特性连接到一起，相当于“且”的意思
B、not：排除某个媒体类型，相当于“非”的意思
C、only：指定某个特定的媒体类型
（3）mediaFeature，媒体特性，可省略
A、width
B、min-width
C、max-width
D、orientation，方向； portrait，竖屏；landscape，横屏；
（4）示例
@media (min-width: 900px) {
body{
font-size: 50px;
}
}
@media screen and (min-width: 960px) {
body {
font-size: 50px;
}
}
@media screen and (min-width: 400px) and (max-width: 800px) and (orientation: landscape) {
body {
font-size: 200px;
}
}
@media (min-width:768px) {
.container {
max-width: 720px
}
}
@media screen and (prefers-reduced-motion:reduce) {
.form-control {
transition: none
}
}
（5）媒体查询的实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>媒体查询的实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*>=1440的设备*/
@media (min-width: 900px) {
body{
font-size: 50px;
}
}
/*>=1960的设备*/
@media (min-width: 1200px) {
body{
font-size: 200px;
}
}
</style>
</head>
<body>
<div> 字体大小 </div>
</body>
</html>
16、BEM
（1）CSS命名规范，缺点是名称很长
（2）BEM，块（block）、元素（element）、修饰符（modifier）
（3）CSS示例
.overview{} /* 块 */
.overview__row{} /* 元素 */
.overview__row--right{} /* 修饰符 */
（4）HTML示例
<div class="overview">
<div class="overview__row overview__row--right"></div>
<div class="overview__row overview__row--right"></div>
<div class="overview__row overview__row--right"></div>
</div>
17、栅格布局的说明
（1）col-6，任何网页，占6栏
（2）col-xs-6，超小网页，占6栏，<768px
（3）col-sm-6，小网页，占6栏，>=768px
（4）col-md-6，中等网页，占6栏，>=992px
（5）col-lg-6，大网页，占6栏，>=1200px
（6）层级：container-->row-->col-6-->form-inline-->form-group-->form-control
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form class="form-inline">
<div class="form-group">
<label>todotext</label>
<input class="form-control" type="text">
</div>
</form>
</div>
</div>
</div>
</body>
（7）栅格布局的实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>栅格布局实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.border{
border:1px solid gray
}
div{
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="border col-xs-4 padding" style="padding:0 15px;">.col-xs-4，"网页的宽"小于768px时，占4格</div>
</div>
<div class="row">
<div class="border col-sm-4">.col-sm-4，"网页的宽"大于等于768px时，占4格</div>
<div class="border col-sm-4"></div>
<div class="border col-sm-4"></div>
</div>
<div class="row">
<div class="border col-md-4">.col-md-4，"网页的宽"大于等于992px时，占4格</div>
<div class="border col-md-4"></div>
<div class="border col-md-4"></div>
</div>
<div class="row">
<div class="border col-lg-4">.col-lg-4，"网页的宽"大于等于1200px，占4格</div>
<div class="border col-lg-4"></div>
<div class="border col-lg-4"></div>
</div>
<div class="row">
<div class="border col-4">.col-4，不管"网页的宽"是多少，都占4格</div>
<div class="border col-4"></div>
<div class="border col-4"></div>
</div>
</div>
</body>
</html>
18、背景图片撑开盒子
方案，根据盒子的宽和背景图片的宽、高，间接或直接地设定盒子高，这样背景图片正好能等比例地盖住盒子
补充，伪类问题：
A、div:before,在div元素内部的开始增加一个元素
B、div:after,在div元素内部的结束增加一个元素
补充，其它
A、块级元素，默认宽为100%、高为0
B、postcss.config.js的postcss-pxtorem插件，可以将程序员写的px自动转化为rem，插件配置项rootValue: 37.5，意思是设计图的宽度是375px
（1）宽为百分比，不能添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的宽可以是百分比，盒子内部不可以添加内容</title>
<style>
* {
padding: 0;
margin: 0;
}
.outer {
width: 40%; /* 移动端使用时，这个数字应该是设计稿宽度的40% */
background: url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg) no-repeat;
background-size: 100%;
/* 以上为PC端和移动端公用，以下为PC端私用 */
border:10px green dashed;
margin: 0 auto;
}
.outer:after {/*也可以是.outer:before */
content: ""; /*padding-top已经占据了整个盒子的高度，所以这里不能有任何内容，否则内容会下移到盒子外下方*/
display: block;
padding-top: 66.67%; /*66.67%=图片的高/宽；盒子的高度由图片决定,也可以是padding-bottom: 66.67%; */
}
</style>
</head>
<body>
<div class="outer"></div>
<div style="border:10px green dashed; width: 900px; margin: 20px auto;">
<h2>实施方案</h2>
<div>1、盒子的宽度定死</div>
<div>2、盒子的高度，根据“图片的高/宽”计算伪元素的padding-top或bottom，背景尺寸取值cover、100%、contain都行</div>
<div>3、盒子的标签之间不能有任何内容</div>
<div>4、背景图片填充，默认从padding开始</div>
</div>
</body>
</html>
（2）宽为像素，能添加内容
注意、在IOS的设备上，background-image: url(example.png);自动引入后面对应图片，example.png、example@2x.png、example@3x.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的宽度不能是百分比，盒子内部可以添加内容</title>
<style>
* {
padding: 0;
margin: 0;
}
.outer {
width: 375px;/* 移动端使用时，这个数字应该是设计稿的宽度 */
height: 250px;/* 根据盒子宽度和“图片的高/宽”计算出盒子的高度；height小于250px，背景显示不全；height大于250px，会出现空白 */
background: url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg) no-repeat;
background-size: 100% auto;
/* 以上为PC端和移动端公用，以下为PC端私用 */
border: 10px green dashed;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="outer"></div>
<div style="border:10px green dashed; width: 900px; margin: 20px auto;">
<h2>实施方案</h2>
<div>1、盒子的宽度定死</div>
<div>2、盒子的高度，根据盒子宽度和“图片的高/宽”计算，背景尺寸取值cover、100%、contain都行</div>
<div>3、盒子的标签之间能有任何内容</div>
<div>4、背景图片填充，默认从padding开始</div>
<h2>background-size的几种取值</h2>
<div>1、background-size:100%: X轴与Y轴等比例放大至“X轴”铺满为止，Y轴可能被剪裁或出现空白，图片不变形</div>
<div>2、background-size:contain: X轴与Y轴等比例放大至“最先一个”铺满为止，“最后一个”可能出现空白，图片不变形</div>
<div>3、background-size:cover: X轴与Y轴等比例放大至“最后一个”铺满为止，“最前一个”可能被剪裁，图片不变形</div>
<div>4、background-size:100% 100%: X轴与Y轴都放大至容器正好铺满，不会超出容器，图片可能会变形</div>
</div>
</body>
</html>
19、变量var--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式变量和禁用密码框的背景色</title>
<style>
:root {
--colorGreen:green;
}
html{
--fontSize40:20px;
}
.div{
color:var(--colorGreen);
font-size:var(--fontSize40);
}
.other{
--colorGreen:green;
--fontSize40:20px;
color:var(--colorGreen);
font-size:var(--fontSize40);
}
</style>
</head>
<body>
<div class="div">
<pre>
全局定义样式变量
:root {
--colorGreen:green;
}
html{
--fontSize40:40px;
}
局部使用样式变量
.div{
color:var(--colorGreen);
font-size:var(--fontSize40);
}
</pre>
</div>
<div class="other">
<pre>
局部定义、使用样式变量
.other{
--colorGreen:green;
--fontSize40:20px;
color:var(--colorGreen);
font-size:var(--fontSize40);
}
</pre>
</div>
</body>
</html>
20、密码框
（1）禁用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式变量和禁用密码框的背景色</title>
<style>
input[type=password]:disabled{
width: 200px;
height: 30px;
font-size: 20px;
border-radius: 6px;
background: gray;
}
</style>
</head>
<body>
<div>
<pre>
<label>禁用密码框样式：</label>
<input disabled type="password" value="这是我的密码"/>
input[type=password]:disabled{
}
</pre>
</div>
</body>
</html>
（2）各种禁止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码框的各种禁止</title>
</head>
<body>
<input
id="pwd"
name="pwd"
type="password"
autocomplete="off"
oncut="return false"
oncopy="return false"
onpaste="return false"
onselectstart="return false"
oncontextmenu="return false"
style="width:400px;height:30px;"
/>
<p>
<span>禁用自动完成功能：</span>
<span>autocomplete="off"</span>
</p>
<p>
<span>禁止剪贴：</span>
<span>oncut = "return false"</span>
</p>
<p>
<span>禁止复制：</span>
<span>oncopy = "return false"</span>
</p>
<p>
<span>禁止粘贴：</span>
<span>onpaste = "return false"</span>
</p>
<p>
<span>禁止选中：</span>
<span>onselectstart="return false"</span>
</p>
<p>
<span>禁止右键：</span>
<span>oncontextmenu="return false"</span>
</p>
</body>
</html>
21、半包围效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<span style="color:red;">被包围者</span>
<span style="color:green;">包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者包围者</span>
</p>
</body>
</html>
22、点击事件之显示执行与隐式执行示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width:100px;height:100px;background:red;margin:20px;}
</style>
</head>
<body>
<div onclick="myClick(event,'second','third')" ></div>
<div id="myDiv" ></div>
<!--这是显示执行，有定义，有执行。执行时，除了浏览器向其传参'event'，还可以人为传参'second'、'third'-->
</body>
</html>
<script>
function myClick(first,second,third){
console.log(first);
console.log(second);
console.log(third);
}
document.getElementById("myDiv").onclick=function (myEvent) {
/*这是隐式执行，有定义，无执行。执行时，除了浏览器向其传参'event'，没办法人为传参'second'、'third'*/
console.log(myEvent);
}
</script>
23、旋转的正方体
实现思路：（1）把6个正方形通过定位叠放在一起；（2）1个不动，4个旋转90度与前者垂直，形成1个无盖盒子，最后1个通过平移作为盒盖！（3）添加CSS3动画，实现旋转。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转的正方体</title>
<style type="text/css">
*{
margin: 0;
padding:0
}
.wrap{
perspective:2000px;
}
.wrap ul{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
animation: move 5s infinite;
transform-style: preserve-3d;
transform-origin: 100px 100px -100px;
}
.wrap ul li{
left: 0;
top: 0;
width: 196px;
height: 196px;
color: #fff;
font-size: 60px;
list-style: none;
text-align: center;
line-height: 196px;
position: absolute;
border:2px solid #000;
background: rgba(000,000,000,0.5);
}
.wrap ul li:nth-child(1){
transform-origin: top;
transform: rotateX(-90deg);
}
.wrap ul li:nth-child(2){
transform-origin: bottom;
transform: rotateX(90deg);
}
.wrap ul li:nth-child(3){
transform-origin: left;
transform: rotateY(90deg);
}
.wrap ul li:nth-child(4){
transform-origin: right;
transform: rotateY(-90deg);
}
.wrap ul li:nth-child(5){
transform: translateZ(-200px);
}
.wrap ul li:nth-child(6){
transform:translateZ(0px);
}
@keyframes move {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
24、html|css图形代码示例
<html>
<head>
<style type="text/css">
table{
border-collapse:collapse;
}
table tr th,table tr td{
width:250px;
text-align: left;
font-size: 18px;
border:1px solid grey;
font-weight: lighter;
padding-left: 5px;
}
table tr td.big{
font-size: 40px;
}
table tr td.color{
color:green;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>图形</th>
<th>说明</th>
<th>html代码（去掉第3个字符“|”）</th>
<th>css代码</th>
</tr>
</thead>
<tbody>
<tr>
<td class="big color">☞</td>
<td>空心右指索引</td>
<td>&#|9758;</td>
<td>\261E</td>
</tr>
<tr>
<td class="big color">▸</td>
<td>实心右指小型三角</td>
<td>&#|9656;</td>
<td>\25B8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">HTML代码和CSS代码来源：https://unicode-table.com/cn/</td>
</tr>
</tfoot>
</table>
</body>
</html>
25、太极图
（1）三层div实现
思路：
A、通过渐变把外层圆形div的content分成上下黑白两个区域；
B、用中间层两个圆形div的content颜色来改变本区域的颜色；
C、用内层两个圆形div的content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极</title>
<style class="cp-pen-styles">
*{
padding:0;
margin:0;
}
.outer{
background: linear-gradient(to bottom,white 50%,black 50%);
margin:100px auto;
width:200px;
height:200px;
border-radius: 50%;
position:relative;
border:1px solid black;
transition: all 5s ease;
}
.outer:hover{
transform: rotate(360deg) scale(1.5);
}
.outer .left{
background: white;
width:100px;
height:100px;
border-radius: 50%;
position:absolute;
left: 0;
top:50px;
}
.outer .left .leftInner{
background: black;
width:40px;
height:40px;
border-radius: 50%;
position:absolute;
left: 30px;
top:30px;
}
.outer .right{
background: black;
width:100px;
height:100px;
border-radius: 50%;
position:absolute;
right: 0;
top:50px;
}
.outer .right .rightInner{
background: white;
width:40px;
height:40px;
border-radius: 50%;
position:absolute;
left:30px;
top:30px;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">
<div class="leftInner"></div>
</div>
<div class="right">
<div class="rightInner"></div>
</div>
</div>
</body>
</html>
（2）伪类实现
思路：
A、通过渐变把外层圆形div分成上下黑白两个区域；
B、添加伪类，用伪类的圆形边框颜色来改变本区域的颜色；
C、通过伪类的圆形content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极</title>
<style>
*{
margin:0;
padding:0;
}
div, :before, :after {
box-sizing: border-box;
}
#taiji {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background: linear-gradient(0deg, black 50%, white 50%);
border-radius: 50%;
border:1px black solid;
}
@keyframes taiji {
from{
transform: rotate(0deg) scale(1);
}
to{
transform: rotate(360deg) scale(2);
}
}
#taiji:hover {
animation: taiji 1s ease 0s infinite;
}
#taiji:before, #taiji:after {
content: "";
display: block;
position: absolute;
width: 50%;
height: 50%;
top: 25%;
border-radius: 50%;
border: 35px solid transparent;
}
#taiji:before {
left: 0;
border-color: black;
}
#taiji:after {
right: 0;
border-color: white;
}
</style>
</head>
<body>
<div id="taiji"></div>
</body>
</html>
26、字符换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符换行</title>
<style>
*{
margin:0;
padding:10px;
}
html{
font-size: 20px;
}
.common{
margin:0 auto;
width:350px;
background: gray;
margin-top: 20px;
}
.aaa{
word-break: keep-all;
}
.bbb{
word-wrap:break-word
}
.ccc{
word-break: break-all;
color:#ffffff;
}
</style>
</head>
<body>
<div class="common">000-0,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="common">000-1，abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="common aaa">aaa-1、word-break: keep-all；只能在半角空格或连字符处换行abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="common aaa">aaa-2、word-break: keep-all；只能在半角空格或连字符处换行https://www.runoob.com/cssref/css3-pr-word-wrap.html</div>
<div class="common bbb">bbb-1、word-wrap:break-word；在长单词或URL地址内部进行换行abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="common bbb">bbb-2、word-wrap:break-word；在长单词或URL地址内部进行换行https://www.runoob.com/cssref/css3-pr-word-wrap.html</div>
<div class="common ccc">ccc-1、word-break: break-all；允许在单词内换行abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="common ccc">ccc-2、word-break: break-all；允许在单词内换行https://www.runoob.com/cssref/css3-pr-word-wrap.html</div>
</body>
</html>
九、CSS伪类伪元素选择器
来源：https://www.w3school.com.cn/css/css_pseudo_elements.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>伪类与伪元素</title>
<style>
h3:first-child{
background-color:rgb(172, 219, 231);
}
div:nth-child(2){
background-color:rgb(195, 219, 164);
}
div:nth-of-type(2){
background-color:rgb(79, 177, 139);
}
p{
font-size:16px;
}
p::first-line {
color: #ff0000;
}
p::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: #ff0000;
}
::selection { /* 使所选文本在蓝色背景上显示为红色 */
color: red;
background:blue;
}
</style>
</head>
<body>
<p>p元素第1行<br/>p元素第2行</p>
<pre>
<h3>1、基本选择器</h3>
<div>
（1）*：通配选择器
（2）E：元素选择器 选择指定类型的HTML元素
（3）#id：ID选择器 选择指定ID属性值为“id”的任意类型元素
（4）.class：类选择器
（5）selector1,selectorN：群组选择器
</div>
<h3>2、层次选择器</h3>
<div>
（1）E F：后代选择器
（2）E>F：子选择器
（3）E+F：相邻兄弟选择器
（4）E~F：通用选择器，选择E元素后的所有匹配的F元素
</div>
<h3>3、伪类选择器</h3>
<div>
A、定义，为“在文档树中”的元素的不同状态，添加样式
B、使用情形
（1）链接
（2）悬停
（3）焦点
C、示例1
（1）a:link，选择所有未被访问的链接
（2）a:hover，选择鼠标悬停其上的链接，:hover选择器可用于所有元素，不只是链接
（3）a:active，选择活动的链接，鼠标按下去之后、弹起来之前的状态
（4）a:visited，选择所有已访问的链接
（5）input:checked，选择每个被选中的input元素
（6）input:disabled，选择每个被禁用的input元素
（7）input:enabled，选择每个已启用的input元素
（8）input:focus，选择获得焦点的input元素
（9）input:in-range，选择具有指定范围内的值的input元素
（10）input:invalid，选择所有具有无效值的input元素
（11）input:optional，选择不带"required"属性的input元素
（12）input:out-of-range，选择值在指定范围之外的input元素
（13）input:read-only，选择指定了"readonly"属性的input元素
（14）input:read-write，选择不带"readonly"属性的input元素
（15）input:required，选择指定了"required"属性的input元素
（16）input:valid，选择所有具有有效值的input元素
D、示例2
（1）p:first-child，p作为子元素第1个出现时，则选中p元素
（2）p:nth-child(2)，p作为子元素第2个出现时，则选中p元素
（3）p:last-child，p作为子元素倒数第1个出现时，则选中p元素
（4）p:nth-last-child(2)，p作为子元素倒数第2个出现时，则选中p元素
（5）p:only-child，p作为子元素唯一1个出现时，则选中p元素
h3:first-child{
background-color:rgb(172, 219, 231);
}
div:nth-child(2){
background-color:rgb(195, 219, 164);
}
E、示例3
（1）p:first-of-type，p作为子元素第1次出现时，则选中p元素
（2）p:nth-of-type(2)，p作为子元素第2次出现时，则选中p元素
（3）p:last-of-type，p作为子元素倒数第1次出现时，则选中p元素
（4）p:nth-last-of-type(2)，p作为子元素倒数第2次出现时，则选中p元素
（5）p:only-of-type，p作为子元素唯一1种出现时，则选中p元素
div:nth-of-type(2){
background-color:rgb(79, 177, 139);
}
F、示例4
（1）p:empty，p元素没有子元素，则选中p元素
（2）p:lang(it)，p元素的lang属性值以"it"开头，则选中p元素；(span lang="fr")这里包含一些法语(/span)
（3）:not(p)，不是p元素，则选中该元素
（4）:root，是根元素，则选中该元素
（5）#news:target，选择当前活动的#news元素（单击包含该锚名称的 URL）
</div>
<h3>4、伪元素选择器</h3>
<div>
A、定义，创建“不在文档树中”的元素，并为其添加样式
B、使用情形
（1）首字母、首行的样式
（2）之前、之后插入内容
C、示例
（1）p::after，在每个p元素内部的后面插入内容
（2）p::before，在每个p元素内部的前面插入内容
（3）p::first-letter，选择每个p元素的首字母
（4）p::first-line，选择每个p元素的首行
（5）p::selection，选择用户选择的元素部分
p{
font-size:16px;
}
p::first-line {
color: #ff0000;
}
p::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: #ff0000;
}
::selection { //使所选文本在蓝色背景上显示为红色
color: red;
background:blue;
}
</div>
</pre>
</body>
</html>
