1、自定义属性
任何的html标签都有自己的一个属性，当时那都是它本身的固定属性，而我们在项目中可能会遇到需要给标签添加一些自定义的属性，去判断替换内容或者赋值等等，那么就需要给标签设定一个属性来作为判断标准或者赋值的标准
JS可以为任何HTML元素、添加任意个自定义属性
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script type="text/javascript">
var aBtn = document.getElementsByTagName('input');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].abc = 123 // 这句话，相当于给 3个input添加 自定义属性 abc = 123
// <input abc="123" type="button" value="按钮1">
// <input abc="123" type="button" value="按钮2">
// <input abc="123" type="button" value="按钮3">
} // 但在审查元素中，并不可见
</script>
</body></html>
1.1、自定义一组开关(onOff)
2121517217752_.pic.jpg
<html lang="en">
<head>
<meta charset="UTF-8">
<style media="screen">
li {
float: left;
width: 100px; height: 100px; margin: 10px;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].onOff = true; // 给每一个"li"添加 自定义属性 onOff = true
aLi[i].onclick = function () {
if (this.onOff) { // 判断当前（this）开关为真时执行以下...
this.style.cssText = 'background-color:blue; // 像这种点击一次发生俩件事情、就要用if语句
}else { // 否则 为假时执行以下...
this.style.backgroundColor = 'red';
}
this.onOff = !this.onOff; // 当再次点击时、真的 就会变为 假的
}
}
</script>
</body></html>
1.2、获取自身递增数字（num）及匹配数组（arr）内容
匹配数组时就要用到num
点击事件、点击一次、俩次、三次...而执行不同的图片/文字[这里取决于数组内容]
aBtn[i].num = 0;
this.num ++;
类似于轮播图的按钮功能，点击按钮换图片这里是替换字母
2141517361528_.pic.jpg
<html lang="en">
<head>
<meta charset="UTF-8">
</head><body>
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
<script type="text/javascript">
var aBtn = document.getElementsByTagName('input');
var arr = ['A','B','C','D']; // 可以替换成文字、图片地址
for (var i = 0; i < aInput.length; i++) { // 当你想要同时操作多个元素，就用for循环（这里是3个按钮）
aBtn[i].num = 0; // 给每一个"li"添加 自定义属性 onOff = true
aBtn[i].onclick = function () {
this.value = arr[this.num];
this.num ++;
if (this.num == arr.length) {
this.num = 0;
}
}
}
</script>
</body></html>
1.3、添加索引值（index）、匹配数组
index是我们自己定义的属性名称（也可改成其他单词） 这里的 " i" 是for循环里" i" 的 0.1.2
aBtn[i].index = i;
2131517361207_.pic.jpg
<html lang="en">
<head>
<meta charset="UTF-8">
</head><body>
<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
<p>大哥：</p>
<p>二弟：</p>
<p>三弟：</p>
<script type="text/javascript">
var aBtn = document.getElementsByTagName('input');
var aP = document.getElementsByTagName('p');
var arr = ['刘备','关羽','张飞']
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i; // index是我们自己定义的属性名称（也可改成其他单词） 这里的 "i" 是for循环里" i" 的 0.1.2
// 给第 1个"input"添加 自定义属性 index = 0
// 给第 2个"input"添加 自定义属性 index = 1
// 给第 3个"input"添加 自定义属性 index = 0
aBtn[i].onclick = function () { // 每一次 按钮 の点击事件
this.value = arr[this.index]; // this 代表 当前点击的"这个"按钮
aP[this.index].innerHTML += arr[this.index];
}
}
</script>
</body></html>
案例1、轮播图（含按钮 和 小圆点）无定时器
屏幕快照 2018-01-31 下午1.34.33.png
<html lang="en">
<head>
<meta charset="UTF-8">
<style media="screen">
* {
margin: 0; padding: 0;
list-style: none;
background-color: #ccc;
}
#pic {
width: 1200px;
height: 450.23px;
margin: 100px auto;
background: url(img/loader_ico.gif) no-repeat center #fff;;
position: relative;
}
#pic img{
width: 1200px;
height: 450.23px;
}
#pic span,#pic p {
position: absolute;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
background-color: #333;
text-align: center;
color: #fff;
}
#pic span { top: 0px; }
#pic p { bottom: 0px; }
#pic ul{
position: absolute;
top: 0;
right: -60px;
}
#pic li{
width: 40px;
height: 40px;
background-color: #666;
margin-bottom: 5px;
}
#pic li.active{ background-color: #fc3; }
</style>
</head>
<body>
<div id="pic">
<img src="" width="1200" alt="">
<span>数量正在加载中...</span>
<p>文字说明正在加载中...</p>
<ul></ul>
</div>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var arrText = ['小米MIX','红米5A','小米圈铁耳机Pro','小米路由器3'];
var num = 0;
//HTML部分并没有写 "li" .而是在JS中写的
for (var i = 0; i < arrUrl.length; i++) {
oUl.innerHTML += '<li></li>';
}
//初始化
oImg.src = arrUrl[num]; // 'images/1.jpg'
oSpan.innerHTML = (num+1) + '/' + arrUrl.length; // '1/4'
oP.innerHTML = arrText[num]; // '小米MIX'
aLi[num].className = 'active'; // 默认第一个小方块变黄色
//小方块的点击事件 => 图片更换
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function () {
oImg.src = arrUrl[this.index];
oSpan.innerHTML = (this.index+1)+'/'+ arrUrl.length;
oP.innerHTML = arrText[this.index];
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = ''; // 清空样式
}
this.className = 'active' // 当前点击的小方块变黄色
}
}
}
</script>
</body></html>
案例2、轮播图（含左右按钮 的顺序播放和循环播放）
屏幕快照 2018-01-31 下午1.19.04.png
<html lang="en">
<head>
<meta charset="UTF-8">
<style media="screen">
* { margin: 0; padding: 0;}
.wrap {
width: 520px;
overflow: hidden;
margin: 100px auto;
}
.wrap_imgs {
width: 518px;
height: 348px;
border: 1px solid #333;
/* background: url(img/1.jpg) */
position: relative;
}
.wrap_top,
.wrap_bottom {
width: 206px;
margin: 5px 150px;
}
input {
width: 100px;
line-height: 30px;
border-radius: 8px;
background-color: #555;
color: #fff;
}
.wrap_imgs p {
width: 518px;
height: 30px;
position: absolute;
left: 0;
line-height: 30px;
background-color: rgba(0,0,0,.5);
text-align: center;
z-index: 1;
color: #fff;
}
.wrap_imgs p.text { top: 0; }
.wrap_imgs p.number { bottom: 0; }
.wrap_imgs #imgs {
position: absolute;
top: 0;
left: 0;
width: 518px;
height: 348px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_top">
<input id="order" type="button" value="顺序播放">
<input id="loop" type="button" value="循环播放">
</div>
<div class="wrap_imgs">
<p id="text" class="text">小船</p>
<p id="number" class="number">1/4</p>
<img id="imgs" src="img/1.jpg" >
</div>
<div class="wrap_bottom">
<input id="prev" type="button" value="上一张">
<input id="next" type="button" value="下一张">
</div>
</div>
<script type="text/javascript">
var oPrev = document.getElementById('prev'); // 上一张
var oNext = document.getElementById('next'); // 下一张
var oImgs = document.getElementById('imgs'); // 图片
var oText = document.getElementById('text'); // 文本内容
var oNumber = document.getElementById('number'); // 1/4
var oOrder = document.getElementById('order'); // 顺序播放 按钮
var oLoop = document.getElementById('loop'); // 循环播放 按钮
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText = ['小船','竹林','荷花','山川'];
var num = 0;
var onOff = true; //默认true记录为顺序播放模式 ，false为循环播放
oOrder.onclick = function () { // true 顺序播放
onOff = true;
}
oLoop.onclick = function () { // false 循环播放
onOff = false;
}
function fnTab() { // 公共函数 带入上下按键
oImgs.src = arrUrl[num];
oText.innerHTML = arrText[num];
oNumber.innerHTML = (num+1)+'/'+arrText.length;
}
oNext.onclick = function () { // 下一张
num ++;
if (num == arrText.length) {
if (onOff) { // true 顺序播放
num = arrText.length-1;
// alert('最后一张了')
}else { // false 循环播放
num = 0;
}
}
fnTab()
}
oPrev.onclick = function () { // 上一张
num --;
if (num < 0) {
if (onOff) { // true 顺序播放
num = 0;
// alert('第一张了')
}else { // false 循环播放
num = arrText.length-1;
}
}
fnTab()
}
</script>
</body></html>
案例3、下拉菜单
屏幕快照 2018-01-31 下午10.09.32.png
<html>
<head>
<meta charset="UTF-8">
<style>
ul,li{ list-style: none; padding: 0; margin: 0;}
ul{ display: none;}
h3{ margin: 0; background: cornflowerblue;}
div{ text-indent: 20px; width: 200px;}
.active{ background: coral;}
</style>
</head>
<body>
<div>
<h3>分组1</h3>
<ul>
<li>分组11</li>
<li>分组12</li>
</ul>
</div>
<div>
<h3>分组2</h3>
<ul>
<li>分组21</li>
<li>分组22</li>
</ul>
</div>
<div>
<h3>分组3</h3>
<ul>
<li>分组31</li>
<li>分组32</li>
<li>分组33</li>
<li>分组34</li>
<li>分组35</li>
</ul>
</div>
<script>
var h3s = document.getElementsByTagName("h3");
var uls = document.getElementsByTagName("ul");
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function(){
for(i = 0; i < lis.length; i++) {
lis[i].style.background = "";
}
this.style.background = "yellow";
}
lis[i].onmouseout = function(){
for(i = 0; i < lis.length; i++) {
lis[i].style.background = "";
}
}
}
for(var i = 0;i<h3s.length;i++){
h3s[i].onoff = true;
h3s[i].index = i;
h3s[i].onclick = function(){
for (var i = 0; i < h3s.length; i++) {
if(i != this.index){ // 除了点击的h3以外的所有h3
h3s[i].className = "";
h3s[i].onoff = true;
uls[i].style.display = "none";
}
}
if(this.onoff){
this.className = "active";
uls[this.index].style.display = "block";
}else{
this.className = "";
uls[this.index].style.display = "none";
}
this.onoff = !this.onoff;
}
}
</script>
</body></html>