WebApi
Web API: 瀏覽器提供的一套API（方法），通過這套API我們可以非常輕易的操作頁面的元素和瀏覽器的一些功能。API是一些預(yù)先定義的方法，這些方法能夠?qū)崿F(xiàn)某些特定的功能，我們無須知道這些API的實(shí)現(xiàn)方式，但是我們需要知道這些API如何使用。通俗的講，API就是編程語言給我提供的一些工具，通過這些工具，我們可以非常輕易的完成一些功能。
案例地址: https://github.com/pengjunshan/WebPJS/WebApi
其它Web文章
HtmlCss基礎(chǔ)學(xué)習(xí)第一章
CSS基礎(chǔ)學(xué)習(xí)第二章
CSS浮動(dòng)的使用和解決浮動(dòng)的五種方法
CSS定位relative、absolute、fixed使用總結(jié)
開發(fā)中常用jQuery知識點(diǎn)總結(jié)
C3動(dòng)畫+H5+Flex布局使用總結(jié)
ES6常用知識總結(jié)
Vue學(xué)習(xí)知識總結(jié)
開發(fā)環(huán)境到生產(chǎn)環(huán)境配置webpack
待續(xù)......
主要是操作DOM和BOM
DOM概念
DOM（Document Object Model）可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節(jié)點(diǎn)進(jìn)行操作。
經(jīng)常進(jìn)行的操作有：獲取元素、對元素進(jìn)行操作(設(shè)置其屬性或調(diào)用其方法)、動(dòng)態(tài)創(chuàng)建元素、事件(什么時(shí)機(jī)做相應(yīng)的操作)、等等；
DOM文檔樹模型
BOM概念
BOM(Browser Object Model) 是指瀏覽器對象模型，BOM由多個(gè)對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
經(jīng)常進(jìn)行的操作有：對話框、定時(shí)器、location對象、history對象、等等；
本編文章會(huì)講到的知識點(diǎn)
- 獲取頁面元素
- 屬性操作
- 創(chuàng)建元素
- 節(jié)點(diǎn)操作
- 事件對象
- BOM對象
獲取頁面元素
需要操作頁面上的某部分元素(顯示/隱藏，動(dòng)畫)，需要先獲取到該部分對應(yīng)的元素，才進(jìn)行后續(xù)操作。
1.根據(jù)id獲取元素
參數(shù)：字符串類型 id，返回值：元素， 如果找不到，返回的是null。
var div = document.getElementById('main');
console.log(div);
2.根據(jù)標(biāo)簽名獲取元素
get:獲取 elements:元素 by:通過 tagName:標(biāo)簽名
返回值：偽數(shù)組，偽數(shù)組不是數(shù)組，但是可以跟數(shù)組一樣遍歷，也可以通過下標(biāo)操作。不能用數(shù)組的方法。
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
3.根據(jù)name獲取元素
和getElementById()差不多，根據(jù)元素中name屬性值來查找，返回值也是個(gè)偽數(shù)組。
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
4.根據(jù)類名獲取元素
ClassName:一目了然是根據(jù)class類名來查找，返回值是偽數(shù)組。
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
5.根據(jù)選擇器獲取元素
參數(shù)： 字符串類型的 css選擇器;
querySelector(".cool")，返回值：元素， 如果是多個(gè)，只會(huì)返回第一個(gè)。
querySelectorAll(".cool")，返回值： 偽數(shù)組。
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">
<!--標(biāo)簽的內(nèi)容-->
<p class="des">這是描述信息</p>
<p class="des">這是描述信息</p>
<p class="des">這是描述信息</p>
<script>
//1. 點(diǎn)擊a標(biāo)簽時(shí)，能夠呵呵就行。
//2. 修改大圖片的src p標(biāo)簽的innerText
//1. 找對象
var imgs = document.getElementById("imgs");//ul
var links = imgs.getElementsByTagName("a");//所有的a標(biāo)簽
var bigImg = document.querySelector("#bigImg");//大圖片
var des = document.querySelectorAll(".des");
var pjs = document.getElementsByName("pjs");
pjs[0].innerText = "美女相冊";
//2. 給所有的a標(biāo)簽注冊點(diǎn)擊事件
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
//3. 修改大圖片的src屬性， this.href
bigImg.src = this.href;
//4. 修改p標(biāo)簽的內(nèi)容, innerText:內(nèi)部的文本
des[0].innerText = this.title;
//5. 阻止a跳轉(zhuǎn)
return false;
}
}
</script>
</body>
屬性操作
通過DOM對象也就是我們獲取的元素，可以進(jìn)行屬性操作、類名操作、樣式操作、等等。
1.非表單元素的屬性
href、title、id、src、className、innerHTML、innerText等等屬性。
innerHTML可以從字符中識別標(biāo)簽，innerText只認(rèn)為都是字符串。
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會(huì)生成為標(biāo)簽</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會(huì)生成為標(biāo)簽</p>';
console.log(box.innerText);
2.表單元素屬性
value 用于大部分表單元素的內(nèi)容獲取(option除外)、type 可以獲取input標(biāo)簽的類型(輸入框或復(fù)選框等)、disabled 禁用屬性、checked 復(fù)選框選中屬性、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 () {
//寫一個(gè)隨機(jī)數(shù)
//[0,1)
//隨機(jī)數(shù)需要寫在事件里頭，每次點(diǎn)擊都要重新生成隨機(jī)數(shù)
var random = parseInt(Math.random() * options.length);
options[random].selected = true;
}
3.自定義屬性操作
getAttribute() 獲取標(biāo)簽行內(nèi)屬性、setAttribute() 設(shè)置標(biāo)簽行內(nèi)屬性、removeAttribute() 移除標(biāo)簽行內(nèi)屬性。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方式設(shè)置的樣式顯示在標(biāo)簽行內(nèi),obj.style.=,始終對應(yīng)的都是行內(nèi)樣式， 獲取的也是行內(nèi)樣式， 設(shè)置的也是行內(nèi)樣式。通過樣式屬性設(shè)置寬高、位置的屬性類型是字符串，需要加上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.類名操作
修改標(biāo)簽的className屬性相當(dāng)于直接修改標(biāo)簽的類名。
#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++) {
//存儲一個(gè)下標(biāo)
lis[i].index = i;
lis[i].onmouseover = function () {
//干掉所有人 僅僅是active這個(gè)類清除
for (var i = 0; i < lis.length; i++) {
lis[i].className = "tab-item";
divs[i].className = "main";
}
//復(fù)活我自己
this.className = "tab-item active";
divs[this.index].className = "main selected";
}
}
</script>
</body>
</html>
創(chuàng)建元素
動(dòng)態(tài)創(chuàng)建元素有三種方式：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()創(chuàng)建的標(biāo)簽：<span>標(biāo)簽也可以生成</span>');
/**
* innerHTML
*/
var dd = document.getElementById("dd");
dd.innerHTML = "我是innerHTML()創(chuàng)建的標(biāo)簽：<span>標(biāo)簽也可以生成</span>";
/**
* document.createElement()
*/
var dd2 = document.createElement("div");
dd2.innerText = "我是document.createElement()創(chuàng)建的元素"
document.body.appendChild(dd2)
</script>
</body>
</html>
節(jié)點(diǎn)操作
整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)，每個(gè) HTML 元素是元素節(jié)點(diǎn)，HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)，每個(gè) HTML 屬性是屬性節(jié)點(diǎn)，注釋是注釋節(jié)點(diǎn)；
通過 HTML DOM，樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。
1.節(jié)點(diǎn)層次，屬性
通過DOM對象查找子節(jié)點(diǎn)(childNodes children)、父節(jié)點(diǎn)(parentNode parentElement)、兄弟節(jié)點(diǎn)(previousSibling previousElementSibling nextSibling nextElementSibling)、第一個(gè)節(jié)點(diǎn)(firstChild firstElementChild)、最后一個(gè)節(jié)點(diǎn)(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:可以獲取到某個(gè)元素所有的子節(jié)點(diǎn)
var childs = pp.childNodes;
console.log(childs)
//我們需要的是標(biāo)簽節(jié)點(diǎn)，元素 判斷一個(gè)節(jié)點(diǎn)是不是標(biāo)簽： nodeType === 1
for (var i = 0; i < childs.length; i++) {
if (childs[i].nodeType === 1) {
console.log(childs[i]);
}
}
//children : 獲取某個(gè)元素中所有的子元素（children）
var childrens = pp.children;
console.log(childrens)
//第一個(gè)孩子節(jié)點(diǎn)
console.log(pp.firstChild)
// console.log(childs[0])
//第一個(gè)孩子元素
console.log(pp.firstElementChild)
// console.log(childrens[0])
//最后一個(gè)孩子節(jié)點(diǎn)
console.log(pp.lastChild)
// console.log(childs[childs.length-1])
//最后一個(gè)孩子元素
console.log(pp.lastElementChild)
// console.log(childrens[childrens.length-1])
//兄弟姐妹：sibling
//上一個(gè)兄弟節(jié)點(diǎn)
console.log(dyy.previousSibling)
//上一個(gè)兄弟元素
console.log(dyy.previousElementSibling);
//下一個(gè)兄弟節(jié)點(diǎn)
console.log(dyy.nextSibling);
//下一個(gè)兄弟元素
console.log(dyy.nextElementSibling);
//父節(jié)點(diǎn)
console.log(dyy.parentNode)
//父元素
console.log(dyy.parentElement)
</script>
</body>
</html>
2.節(jié)點(diǎn)操作，方法
通過節(jié)點(diǎn)對象可以進(jìn)行 添加節(jié)點(diǎn)(appendChild())、插入節(jié)點(diǎn)(insertBefore())、刪除節(jié)點(diǎn)(removeChild())、替換節(jié)點(diǎn)(replaceChild())、克隆節(jié)點(diǎn)(cloneNode())；代碼中注釋請仔細(xì)查看。
<!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");
//克隆節(jié)點(diǎn)cloneNode(*) *: 為布爾值，如果為true，那么將克隆原節(jié)點(diǎn)，以及所有子節(jié)點(diǎn)；為false時(shí)，僅復(fù)制節(jié)點(diǎn)本身
var cldyy = dyy.cloneNode(true);
//添加節(jié)點(diǎn)appendChild()添加到尾端
// pp.appendChild(cldyy);
//插入節(jié)點(diǎn)insertBefore(newChild，*)第一個(gè)參數(shù)：newChild 需要添加的元素,
//第二個(gè)參數(shù)：refChild 添加到哪個(gè)子元素前面 傳null默認(rèn)最后末端.
pp.insertBefore(cldyy, pp.children[0])
console.log(pp)
//移除節(jié)點(diǎn)removeChild(*) *:要移除的節(jié)點(diǎn)
pp.removeChild(pp.children[1]);
console.log(pp)
</script>
</body>
</html>
3.案例
動(dòng)態(tài)創(chuàng)建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": "曾經(jīng)是個(gè)王者" },
{ "name": "王夢茹", "gender": "女", "age": 18, "desc": "小仙女" },
{ "name": "羅杰", "gender": "男", "age": 23, "desc": "海賊王船長" },
{ "name": "袁小雨", "gender": "男", "age": 38, "desc": "打醬油的" },
{ "name": "黃張龍", "gender": "女", "age": 28, "desc": "社會(huì)我龍哥，人狠話不多" },
{ "name": "王浩", "gender": "男", "age": 23, "desc": "死基佬，死基佬" },
{ "name": "孫廣明", "gender": "男", "age": 3, "desc": "學(xué)霸，大神" },
]
}
//1. 創(chuàng)建一個(gè)table，添加到body
var mTable = document.createElement("table");
document.body.appendChild(mTable);
//2. 創(chuàng)建一個(gè)thead，添加到table
var mThead = document.createElement("thead");
mTable.appendChild(mThead);
//2.1 創(chuàng)建一個(gè)tr，添加到thead
var theadTr = document.createElement("tr");
mThead.appendChild(theadTr);
//2.2 創(chuàng)建多個(gè)th, 添加到tr中， 設(shè)置內(nèi)容
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. 創(chuàng)建tbody，添加到table
var mTbody = document.createElement("tbody");
mTable.appendChild(mTbody);
//3.1 創(chuàng)建多個(gè)tr，添加tbody
//3.2 創(chuàng)建多個(gè)td，添加到tr中， 設(shè)置內(nèi)容
//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>
事件對象
捕獲階段、當(dāng)前目標(biāo)階段、冒泡階段、事件對象.eventPhase屬性可以查看事件觸發(fā)時(shí)所處的階段。
1.對象的屬性
在觸發(fā)某個(gè)事件的時(shí)候，都會(huì)產(chǎn)生一個(gè)事件對象Event，這個(gè)對象中包含所有與事件相關(guān)的一些信息，包括觸發(fā)事件的元素，事件的類型以及其他與事件相關(guān)的信息。
記錄了鼠標(biāo)位置信息的相關(guān)屬性
screenX與screenY：光標(biāo)相對于屏幕左上角的水平位置與垂直位置。
clientX與clientY：光標(biāo)相對于可視區(qū)左上角的水平位置和垂直位置。
pageX與pageY：光標(biāo)相對于網(wǎng)頁（文檔document）左上角的水平位置與垂直位置（推薦使用）
記錄了鍵盤碼的屬性
event.keyCode:鍵盤按下的那個(gè)鍵的鍵盤碼
常見的鼠標(biāo)事件
onmousedown:鼠標(biāo)按下事件
onmouseup:鼠標(biāo)彈起事件
onclick:單擊事件
ondblclick：雙擊事件
onmouseover：鼠標(biāo)經(jīng)過事件
onmouseout：鼠標(biāo)離開事件
onmousemove：鼠標(biāo)移動(dòng)事件
onfocus：鼠標(biāo)獲得焦點(diǎn)事件
onblur：鼠標(biāo)失去焦點(diǎn)事件
常見的鍵盤事件
onkeydown:鍵盤按下時(shí)觸發(fā)
onkeyup:鍵盤彈起時(shí)觸發(fā)
案例
自定義彈窗，隨著鼠標(biāo)按下移動(dòng)而移動(dòng)。案例請到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">【關(guān)閉】</span>
</div>
<div class="bd"></div>
</div>
<script>
var d_box = document.getElementById("d_box");
var drop = document.getElementById("drop");
/**
* 給頭部注冊點(diǎn)擊事件 獲取鼠標(biāo)點(diǎn)距離
*/
drop.onmousedown = function (e) {
var leftX = e.pageX - d_box.offsetLeft;
var topY = e.pageY - d_box.offsetTop;
/**
* 給document注冊移動(dòng)事件 動(dòng)態(tài)改變彈窗的位置
*/
document.onmousemove = function (e) {
d_box.style.left = e.pageX - leftX + "px";
d_box.style.top = e.pageY - topY + "px";
}
}
/**
* 鼠標(biāo)離開是取消掉document注冊移動(dòng)事件
*/
drop.onmouseup = function () {
document.onmousemove = null;
}
</script>
</body>
</html>
BOM對象
平時(shí)常用的對象有window對象、定時(shí)器、location對象、history對象。
1.window對象
- window對象是一個(gè)全局對象，也可以說是JavaScript中的頂級對象
- 像document、alert()、console.log()這些都是window的屬性，其實(shí)BOM中基本所有的屬性和方法都是屬性window的。
- 所有定義在全局作用域中的變量、函數(shù)都會(huì)變成window對象的屬性和方法
- window對象下的屬性和方法調(diào)用的時(shí)候可以省略window
2.定時(shí)器
2.1延時(shí)定時(shí)器
延時(shí)定時(shí)器可以讓代碼延遲一段時(shí)間之后才執(zhí)行（定時(shí)炸彈）
/**
* 設(shè)置延時(shí)定時(shí)器
*/
//語法：setTimeOut(callback, time);
//參數(shù)1：回調(diào)函數(shù)，時(shí)間到了就會(huì)執(zhí)行。
//參數(shù)2：延時(shí)的時(shí)間
//返回：定時(shí)器的id，用于清除
//示例：
var timer = setTimeOut(function(){
//1秒后將執(zhí)行的代碼。
}, 1000);
/**
* 清除延時(shí)定時(shí)器
*/
//語法：clearTimeOut(timerId)
//參數(shù)：定時(shí)器id
//示例：
clearTimeOut(timer);//清除上面定義的定時(shí)器
2.2間歇定時(shí)器
間歇定時(shí)器讓定時(shí)器每隔一段時(shí)間就會(huì)執(zhí)行一次，并且會(huì)一直執(zhí)行，直到清除定時(shí)器為止.
/**
* 設(shè)置間歇定時(shí)器
*/
//語法：var intervalID = setInterval(func, delay);
//參數(shù)1：重復(fù)執(zhí)行的函數(shù)
//參數(shù)2：每次延遲的毫秒數(shù)
//返回：定時(shí)器的id，用于清除
//示例：
var timer = setInterval(function(){
//重復(fù)執(zhí)行的代碼。
}, 1000);
/**
* 清除間歇定時(shí)器
*/
//語法：clearInterval(intervalID)
//參數(shù)：定時(shí)器id
//示例：
clearInterval(timer);//清除上面定義的定時(shí)器
3.location對象
location對象也是window的一個(gè)屬性，location其實(shí)對應(yīng)的就是瀏覽器中的地址欄。
location.href = “http://www.baidu.com”;//讓頁面跳轉(zhuǎn)到百度首頁
location.reload();//讓頁面重新加載
location.reload(true);//強(qiáng)制刷新，相當(dāng)于ctrl+F5
location.reload(false);//刷新，相當(dāng)于F5
console.log(window.location.hash);//哈希值 其實(shí)就是錨點(diǎn)
console.log(window.location.host);//服務(wù)器 服務(wù)器名+端口號
console.log(window.location.hostname);//服務(wù)器名
console.log(window.location.pathname);//路徑名
console.log(window.location.port);//端口
console.log(window.location.protocol);//協(xié)議
console.log(window.location.search);//參數(shù)
5.其他對象
//后退：
history.back();
history.go(-1);
//前進(jìn)：
history.forward();
history.go(1);
console.log(screen.width);//屏幕的寬度
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//瀏覽器可占用的寬度
console.log(screen.availHeight);//瀏覽器可占用的高度
6.案例
班級隨機(jī)點(diǎn)名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="結(jié)束" id="btn2">
<script>
var list = [
["@", "@", "@", "老師", "@", "@", "杜嘉暉", "廖國藩", "王浩", "孫廣明", "@"],
["@", "張萍", "葉繼平", "沈陽", "許誠", "@", "羅杰", "武富云", "汪昊", "曹菁", "羅莉"],
["@", "黃澤民", "吳永霞", "劉娟", "李琛", "@", "賈海華", "葛玥", "袁小雨", "袁敏", "李佩蕓", "竇松婷"],
["劉玉軍", "尹欽", "馮梓碩", "闕文琦", "唐海華", "@", "許海燕", "張曼玉", "王正來", "顧軍", "陳輝", "楊陽"],
["王夢茹", "胡佳麗", "何育娟", "郞文靜", "劉瑩", "@", "王繼杰", "王壽南", "何家亮", "楊博文", "路雨", "梅瑤瑤"],
["張杰", "李明珠", "王淑華", "譚喜兵", "周云卓", "@", "張陸凱", "宋余樂", "王琨", "胡崇文", "謝凌輝", "王康"],
["@", "黃張龍", "王世波", "孫蘇霞", "陳振", "@", "劉欽罡", "黃維", "吳偉強(qiáng)", "張童", "李斌"],
];
//1. 創(chuàng)建table，添加到body
var mTable = document.createElement("table");
document.body.appendChild(mTable);
//創(chuàng)建一個(gè)tds變量來存所有的td對象 來做隨機(jī)點(diǎn)名的集合
let tds = [];
//2. 根據(jù)list的長度，創(chuàng)建tr，添加到table
for (let i = 0; i < list.length; i++) {
//根據(jù)list的長度來創(chuàng)建響應(yīng)的tr 并添加到table中
var mTr = document.createElement("tr");
mTable.appendChild(mTr);
//3. 根據(jù)list[i]的長度，創(chuàng)建td，添加到tr中
let sonList = list[i];
for (let i = 0; i < sonList.length; i++) {
//根據(jù)sonList子集合來創(chuàng)建td 并添加到mTr中
let mTd = document.createElement("td");
mTr.appendChild(mTd);
//如果有人名就設(shè)置背景色填充名字
if (sonList[i] !== "@") {
mTd.innerText = sonList[i];
mTd.style.backgroundColor = "yellowgreen";
//如果是老師 就不添加到tds集合中
if (sonList[i] === "老師") {
continue;
}
//添加到tds集合中
tds.push(mTd)
}
}
}
let tiemInterval;
//開始點(diǎn)名
document.getElementById("btn1").onclick = function () {
//先清理定時(shí)器
clearInterval(tiemInterval);
tiemInterval = setInterval(function(){
//先把所有的td背景色都還原
for(let i=0; i<tds.length; i++){
tds[i].style.backgroundColor = "yellowgreen"
}
//隨機(jī)一個(gè)td設(shè)置高亮
let position = parseInt(Math.random() * tds.length);
tds[position].style.backgroundColor = "hotpink";
},100);
}
//結(jié)束點(diǎn)名 清楚定時(shí)器
document.getElementById("btn2").onclick = function () {
clearInterval(tiemInterval);
}
</script>
</body>
</html>
隨機(jī)點(diǎn)名案例
