WebApi
Web API: 浏览器提供的一套API（方法），通过这套API我们可以非常轻易的操作页面的元素和浏览器的一些功能。API是一些预先定义的方法，这些方法能够实现某些特定的功能，我们无须知道这些API的实现方式，但是我们需要知道这些API如何使用。通俗的讲，API就是编程语言给我提供的一些工具，通过这些工具，我们可以非常轻易的完成一些功能。
案例地址: https://github.com/pengjunshan/WebPJS/WebApi
其它Web文章
HtmlCss基础学习第一章
CSS基础学习第二章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......
主要是操作DOM和BOM
DOM概念
DOM（Document Object Model）可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
经常进行的操作有：获取元素、对元素进行操作(设置其属性或调用其方法)、动态创建元素、事件(什么时机做相应的操作)、等等；
DOM文档树模型
BOM概念
BOM(Browser Object Model) 是指浏览器对象模型，BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
经常进行的操作有：对话框、定时器、location对象、history对象、等等；
本编文章会讲到的知识点
- 获取页面元素
- 属性操作
- 创建元素
- 节点操作
- 事件对象
- BOM对象
获取页面元素
需要操作页面上的某部分元素(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。
1.根据id获取元素
参数：字符串类型 id，返回值：元素， 如果找不到，返回的是null。
var div = document.getElementById('main');
console.log(div);
2.根据标签名获取元素
get:获取 elements:元素 by:通过 tagName:标签名
返回值：伪数组，伪数组不是数组，但是可以跟数组一样遍历，也可以通过下标操作。不能用数组的方法。
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
3.根据name获取元素
和getElementById()差不多，根据元素中name属性值来查找，返回值也是个伪数组。
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
4.根据类名获取元素
ClassName:一目了然是根据class类名来查找，返回值是伪数组。
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
5.根据选择器获取元素
参数： 字符串类型的 css选择器;
querySelector(".cool")，返回值：元素， 如果是多个，只会返回第一个。
querySelectorAll(".cool")，返回值： 伪数组。
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
案例
用到了这六种方式来获取页面中的元素。案例请到https://github.com/pengjunshan/WebPJS中查看
<body>
<h1 name="pjs"></h1>
<ul id="imgs">
<li>
<a href="../img/1.jpg" title="美女A">
<img src="../img/1-small.jpg" alt="">
</a>
</li>
<li>
<a href="../img/2.jpg" title="美女B">
<img src="../img/2-small.jpg" alt="">
</a>
</li>
<li>
<a href="../img/3.jpg" title="美女C">
<img src="../img/3-small.jpg" alt="">
</a>
</li>
<li>
<a href="../img/4.jpg" title="美女D">
<img src="../img/4-small.jpg" alt="">
</a>
</li>
</ul>
<img src="../img/placeholder.png" width="400" height="250" alt="" id="bigImg">
<!--标签的内容-->
<p class="des">这是描述信息</p>
<p class="des">这是描述信息</p>
<p class="des">这是描述信息</p>
<script>
//1. 点击a标签时，能够呵呵就行。
//2. 修改大图片的src p标签的innerText
//1. 找对象
var imgs = document.getElementById("imgs");//ul
var links = imgs.getElementsByTagName("a");//所有的a标签
var bigImg = document.querySelector("#bigImg");//大图片
var des = document.querySelectorAll(".des");
var pjs = document.getElementsByName("pjs");
pjs[0].innerText = "美女相册";
//2. 给所有的a标签注册点击事件
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
//3. 修改大图片的src属性， this.href
bigImg.src = this.href;
//4. 修改p标签的内容, innerText:内部的文本
des[0].innerText = this.title;
//5. 阻止a跳转
return false;
}
}
</script>
</body>
属性操作
通过DOM对象也就是我们获取的元素，可以进行属性操作、类名操作、样式操作、等等。
1.非表单元素的属性
href、title、id、src、className、innerHTML、innerText等等属性。
innerHTML可以从字符中识别标签，innerText只认为都是字符串。
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
2.表单元素属性
value 用于大部分表单元素的内容获取(option除外)、type 可以获取input标签的类型(输入框或复选框等)、disabled 禁用属性、checked 复选框选中属性、selected 下拉菜单选中属性；
this.value = "钢琴";
if (inputs[i].type === "text") {
inputs[i].disabled = true;
} else if (inputs[i].type === "checkbox") {
inputs[i].checked = true;
}
var options = document.getElementsByTagName("option");
btn.onclick = function () {
//写一个随机数
//[0,1)
//随机数需要写在事件里头，每次点击都要重新生成随机数
var random = parseInt(Math.random() * options.length);
options[random].selected = true;
}
3.自定义属性操作
getAttribute() 获取标签行内属性、setAttribute() 设置标签行内属性、removeAttribute() 移除标签行内属性。setAttribute()可以修改属性值也可以添加属性
<div id="pp" index="1" aa="a"></div>
var pp = document.getElementById("pp");
console.log(pp.getAttribute("index"))
pp.setAttribute("index", "2");
console.log(pp.getAttribute("index"))
pp.setAttribute("name", "pjs")
pp.removeAttribute("aa")
console.log(pp)
4.样式操作
使用style方式设置的样式显示在标签行内,obj.style.=,始终对应的都是行内样式， 获取的也是行内样式， 设置的也是行内样式。通过样式属性设置宽高、位置的属性类型是字符串，需要加上px。
<div id="box"></div>
var box = document.getElementById("box");
box.style.borderRadius = "50%";
box.style.backgroundColor = "pink";
box.style.width = "200px";
box.style.height = "100px"
console.log(box.style.backgroundColor)
5.类名操作
修改标签的className属性相当于直接修改标签的类名。
#sd{
width: 200px;
height: 200px;
background-color: red;
}
.show{
display: block;
}
.none{
display: none;
}
<input type="button" value="切换类名">
<div id="sd" class="show"></div>
/**
* 类名操作 切换类名
*/
var sdDiv = document.getElementById("sd");
var inputs = document.getElementsByTagName("input");
for(var i = 0; i<inputs.length; i++){
if(inputs[i].type == "button"){
inputs[i].onclick = function(){
if(sdDiv.className === "show"){
sdDiv.className = "none";
}else{
sdDiv.className = "show";
}
}
}
}
6.案例
table栏切换效果，案例请到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab .tab-item {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="../img/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="../img/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="../img/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="../img/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
//思路：
//1. 找对象
//2. 给所有的li注册onmouseover事件
//3. 排他
var lis = document.querySelectorAll(".tab-item");
var divs = document.querySelectorAll(".main");
//注册事件
for (var i = 0; i < lis.length; i++) {
//存储一个下标
lis[i].index = i;
lis[i].onmouseover = function () {
//干掉所有人 仅仅是active这个类清除
for (var i = 0; i < lis.length; i++) {
lis[i].className = "tab-item";
divs[i].className = "main";
}
//复活我自己
this.className = "tab-item active";
divs[this.index].className = "main selected";
}
}
</script>
</body>
</html>
创建元素
动态创建元素有三种方式：document.write()、innerHTML()、document.createElement()；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>我是印第安人</div>
<div id="dd"></div>
<script>
/**
*document.write()
*/
document.write('我是document.write()创建的标签：<span>标签也可以生成</span>');
/**
* innerHTML
*/
var dd = document.getElementById("dd");
dd.innerHTML = "我是innerHTML()创建的标签：<span>标签也可以生成</span>";
/**
* document.createElement()
*/
var dd2 = document.createElement("div");
dd2.innerText = "我是document.createElement()创建的元素"
document.body.appendChild(dd2)
</script>
</body>
</html>
节点操作
整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点；
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
1.节点层次，属性
通过DOM对象查找子节点(childNodes children)、父节点(parentNode parentElement)、兄弟节点(previousSibling previousElementSibling nextSibling nextElementSibling)、第一个节点(firstChild firstElementChild)、最后一个节点(lastChild lastElementChild)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="pp">
<div>敏文兄</div>
<div>平平</div>
<div id="dyy">短圆圆</div>
<p>邱航</p>
<p>胖子</p>
</div>
<script>
var pp = document.querySelector("#pp");
var dyy = document.getElementById("dyy");
//childNodes:可以获取到某个元素所有的子节点
var childs = pp.childNodes;
console.log(childs)
//我们需要的是标签节点，元素 判断一个节点是不是标签： nodeType === 1
for (var i = 0; i < childs.length; i++) {
if (childs[i].nodeType === 1) {
console.log(childs[i]);
}
}
//children : 获取某个元素中所有的子元素（children）
var childrens = pp.children;
console.log(childrens)
//第一个孩子节点
console.log(pp.firstChild)
// console.log(childs[0])
//第一个孩子元素
console.log(pp.firstElementChild)
// console.log(childrens[0])
//最后一个孩子节点
console.log(pp.lastChild)
// console.log(childs[childs.length-1])
//最后一个孩子元素
console.log(pp.lastElementChild)
// console.log(childrens[childrens.length-1])
//兄弟姐妹：sibling
//上一个兄弟节点
console.log(dyy.previousSibling)
//上一个兄弟元素
console.log(dyy.previousElementSibling);
//下一个兄弟节点
console.log(dyy.nextSibling);
//下一个兄弟元素
console.log(dyy.nextElementSibling);
//父节点
console.log(dyy.parentNode)
//父元素
console.log(dyy.parentElement)
</script>
</body>
</html>
2.节点操作，方法
通过节点对象可以进行 添加节点(appendChild())、插入节点(insertBefore())、删除节点(removeChild())、替换节点(replaceChild())、克隆节点(cloneNode())；代码中注释请仔细查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="pp">
<div>敏文兄</div>
<div>平平</div>
<div id="dyy">短圆圆</div>
<p>邱航</p>
<p>胖子</p>
</div>
<script>
var pp = document.querySelector("#pp");
var dyy = document.getElementById("dyy");
//克隆节点cloneNode(*) *: 为布尔值，如果为true，那么将克隆原节点，以及所有子节点；为false时，仅复制节点本身
var cldyy = dyy.cloneNode(true);
//添加节点appendChild()添加到尾端
// pp.appendChild(cldyy);
//插入节点insertBefore(newChild，*)第一个参数：newChild 需要添加的元素,
//第二个参数：refChild 添加到哪个子元素前面 传null默认最后末端.
pp.insertBefore(cldyy, pp.children[0])
console.log(pp)
//移除节点removeChild(*) *:要移除的节点
pp.removeChild(pp.children[1]);
console.log(pp)
</script>
</body>
</html>
3.案例
动态创建table表格、删除表格、增加表格功能。案例请到https://github.com/pengjunshan/WebPJS中查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border: 1px solid #000;
/*边框合并*/
border-collapse: collapse;
}
th {
border: 1px solid #000;
height: 40px;
background-color: #ccc;
}
td {
border: 1px solid #000;
height: 30px;
text-align: center;
padding: 0 30px;
}
</style>
</head>
<body>
<button class="addBtn">增加</button>
<script>
//js对象 json ajax
var data = {
"header": ["姓名", "性别", "年龄", "描述"],
"content": [
{ "name": "王琨", "gender": "女", "age": 30, "desc": "曾经是个王者" },
{ "name": "王梦茹", "gender": "女", "age": 18, "desc": "小仙女" },
{ "name": "罗杰", "gender": "男", "age": 23, "desc": "海贼王船长" },
{ "name": "袁小雨", "gender": "男", "age": 38, "desc": "打酱油的" },
{ "name": "黄张龙", "gender": "女", "age": 28, "desc": "社会我龙哥，人狠话不多" },
{ "name": "王浩", "gender": "男", "age": 23, "desc": "死基佬，死基佬" },
{ "name": "孙广明", "gender": "男", "age": 3, "desc": "学霸，大神" },
]
}
//1. 创建一个table，添加到body
var mTable = document.createElement("table");
document.body.appendChild(mTable);
//2. 创建一个thead，添加到table
var mThead = document.createElement("thead");
mTable.appendChild(mThead);
//2.1 创建一个tr，添加到thead
var theadTr = document.createElement("tr");
mThead.appendChild(theadTr);
//2.2 创建多个th, 添加到tr中， 设置内容
var headerList = data.header;
for (let i = 0; i < headerList.length; i++) {
var mTh = document.createElement("th");
mTh.innerText = headerList[i];
theadTr.appendChild(mTh);
}
//3. 创建tbody，添加到table
var mTbody = document.createElement("tbody");
mTable.appendChild(mTbody);
//3.1 创建多个tr，添加tbody
//3.2 创建多个td，添加到tr中， 设置内容
//4.添加删除功能
var contentList = data.content;
for (let i = 0; i < contentList.length; i++) {
var tr = document.createElement("tr");
mTbody.appendChild(tr);
var obj = contentList[i];
for (const key in obj) {
var td = document.createElement("td")
tr.appendChild(td)
td.innerText = obj[key]
}
var delTd = document.createElement("td");
tr.appendChild(delTd);
var btn = document.createElement("button");
btn.innerText = "删除";
delTd.appendChild(btn);
btn.onclick = function () {
mTbody.removeChild(this.parentNode.parentNode);
}
}
var delTh = document.createElement("th");
delTh.innerText = "删除"
theadTr.appendChild(delTh)
//5.新增表格
var addBtn = document.getElementsByClassName("addBtn")
console.log(addBtn)
addBtn[0].onclick = function () {
console.log("11111111")
var addTr = document.createElement("tr");
mTbody.appendChild(addTr);
var nameTd = document.createElement("td");
nameTd.innerText = "张三";
addTr.appendChild(nameTd)
var sexTd = document.createElement("td");
sexTd.innerText = "男";
addTr.appendChild(sexTd);
var ageTd = document.createElement("td");
ageTd.innerText = "18";
addTr.appendChild(ageTd)
var msTd = document.createElement("td");
msTd.innerText = "我是描述";
addTr.appendChild(msTd)
var delTd = document.createElement("td");
addTr.appendChild(delTd);
var btn = document.createElement("button");
btn.innerText = "删除";
delTd.appendChild(btn);
btn.onclick = function () {
mTbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
事件对象
捕获阶段、当前目标阶段、冒泡阶段、事件对象.eventPhase属性可以查看事件触发时所处的阶段。
1.对象的属性
在触发某个事件的时候，都会产生一个事件对象Event，这个对象中包含所有与事件相关的一些信息，包括触发事件的元素，事件的类型以及其他与事件相关的信息。
记录了鼠标位置信息的相关属性
screenX与screenY：光标相对于屏幕左上角的水平位置与垂直位置。
clientX与clientY：光标相对于可视区左上角的水平位置和垂直位置。
pageX与pageY：光标相对于网页（文档document）左上角的水平位置与垂直位置（推荐使用）
记录了键盘码的属性
event.keyCode:键盘按下的那个键的键盘码
常见的鼠标事件
onmousedown:鼠标按下事件
onmouseup:鼠标弹起事件
onclick:单击事件
ondblclick：双击事件
onmouseover：鼠标经过事件
onmouseout：鼠标离开事件
onmousemove：鼠标移动事件
onfocus：鼠标获得焦点事件
onblur：鼠标失去焦点事件
常见的键盘事件
onkeydown:键盘按下时触发
onkeyup:键盘弹起时触发
案例
自定义弹窗，随着鼠标按下移动而移动。案例请到https://github.com/pengjunshan/WebPJS中查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
}
.nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none;
}
.d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
}
.hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
}
#box_close {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
<script>
var d_box = document.getElementById("d_box");
var drop = document.getElementById("drop");
/**
* 给头部注册点击事件 获取鼠标点距离
*/
drop.onmousedown = function (e) {
var leftX = e.pageX - d_box.offsetLeft;
var topY = e.pageY - d_box.offsetTop;
/**
* 给document注册移动事件 动态改变弹窗的位置
*/
document.onmousemove = function (e) {
d_box.style.left = e.pageX - leftX + "px";
d_box.style.top = e.pageY - topY + "px";
}
}
/**
* 鼠标离开是取消掉document注册移动事件
*/
drop.onmouseup = function () {
document.onmousemove = null;
}
</script>
</body>
</html>
BOM对象
平时常用的对象有window对象、定时器、location对象、history对象。
1.window对象
- window对象是一个全局对象，也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性，其实BOM中基本所有的属性和方法都是属性window的。
- 所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
2.定时器
2.1延时定时器
延时定时器可以让代码延迟一段时间之后才执行（定时炸弹）
/**
* 设置延时定时器
*/
//语法：setTimeOut(callback, time);
//参数1：回调函数，时间到了就会执行。
//参数2：延时的时间
//返回：定时器的id，用于清除
//示例：
var timer = setTimeOut(function(){
//1秒后将执行的代码。
}, 1000);
/**
* 清除延时定时器
*/
//语法：clearTimeOut(timerId)
//参数：定时器id
//示例：
clearTimeOut(timer);//清除上面定义的定时器
2.2间歇定时器
间歇定时器让定时器每隔一段时间就会执行一次，并且会一直执行，直到清除定时器为止.
/**
* 设置间歇定时器
*/
//语法：var intervalID = setInterval(func, delay);
//参数1：重复执行的函数
//参数2：每次延迟的毫秒数
//返回：定时器的id，用于清除
//示例：
var timer = setInterval(function(){
//重复执行的代码。
}, 1000);
/**
* 清除间歇定时器
*/
//语法：clearInterval(intervalID)
//参数：定时器id
//示例：
clearInterval(timer);//清除上面定义的定时器
3.location对象
location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。
location.href = “http://www.baidu.com”;//让页面跳转到百度首页
location.reload();//让页面重新加载
location.reload(true);//强制刷新，相当于ctrl+F5
location.reload(false);//刷新，相当于F5
console.log(window.location.hash);//哈希值 其实就是锚点
console.log(window.location.host);//服务器 服务器名+端口号
console.log(window.location.hostname);//服务器名
console.log(window.location.pathname);//路径名
console.log(window.location.port);//端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//参数
5.其他对象
//后退：
history.back();
history.go(-1);
//前进：
history.forward();
history.go(1);
console.log(screen.width);//屏幕的宽度
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//浏览器可占用的宽度
console.log(screen.availHeight);//浏览器可占用的高度
6.案例
班级随机点名deml,案例请到https://github.com/pengjunshan/WebPJS中查看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
margin: 50px auto;
}
td {
padding: 15px;
text-align: center;
/*border: 1px solid #000;*/
}
input {
width: 100px;
height: 40px;
margin: 0 auto;
}
</style>
</head>
<body>
<input type="button" value="开始" id="btn1">
<input type="button" value="结束" id="btn2">
<script>
var list = [
["@", "@", "@", "老师", "@", "@", "杜嘉晖", "廖国藩", "王浩", "孙广明", "@"],
["@", "张萍", "叶继平", "沈阳", "许诚", "@", "罗杰", "武富云", "汪昊", "曹菁", "罗莉"],
["@", "黄泽民", "吴永霞", "刘娟", "李琛", "@", "贾海华", "葛玥", "袁小雨", "袁敏", "李佩芸", "窦松婷"],
["刘玉军", "尹钦", "冯梓硕", "阙文琦", "唐海华", "@", "许海燕", "张曼玉", "王正来", "顾军", "陈辉", "杨阳"],
["王梦茹", "胡佳丽", "何育娟", "郞文静", "刘莹", "@", "王继杰", "王寿南", "何家亮", "杨博文", "路雨", "梅瑶瑶"],
["张杰", "李明珠", "王淑华", "谭喜兵", "周云卓", "@", "张陆凯", "宋余乐", "王琨", "胡崇文", "谢凌辉", "王康"],
["@", "黄张龙", "王世波", "孙苏霞", "陈振", "@", "刘钦罡", "黄维", "吴伟强", "张童", "李斌"],
];
//1. 创建table，添加到body
var mTable = document.createElement("table");
document.body.appendChild(mTable);
//创建一个tds变量来存所有的td对象 来做随机点名的集合
let tds = [];
//2. 根据list的长度，创建tr，添加到table
for (let i = 0; i < list.length; i++) {
//根据list的长度来创建响应的tr 并添加到table中
var mTr = document.createElement("tr");
mTable.appendChild(mTr);
//3. 根据list[i]的长度，创建td，添加到tr中
let sonList = list[i];
for (let i = 0; i < sonList.length; i++) {
//根据sonList子集合来创建td 并添加到mTr中
let mTd = document.createElement("td");
mTr.appendChild(mTd);
//如果有人名就设置背景色填充名字
if (sonList[i] !== "@") {
mTd.innerText = sonList[i];
mTd.style.backgroundColor = "yellowgreen";
//如果是老师 就不添加到tds集合中
if (sonList[i] === "老师") {
continue;
}
//添加到tds集合中
tds.push(mTd)
}
}
}
let tiemInterval;
//开始点名
document.getElementById("btn1").onclick = function () {
//先清理定时器
clearInterval(tiemInterval);
tiemInterval = setInterval(function(){
//先把所有的td背景色都还原
for(let i=0; i<tds.length; i++){
tds[i].style.backgroundColor = "yellowgreen"
}
//随机一个td设置高亮
let position = parseInt(Math.random() * tds.length);
tds[position].style.backgroundColor = "hotpink";
},100);
}
//结束点名 清楚定时器
document.getElementById("btn2").onclick = function () {
clearInterval(tiemInterval);
}
</script>
</body>
</html>
随机点名案例
