代碼下載地址
網絡狀態改變事件
<script>
/*online：網絡聯通時觸發*/
window.addEventListener("online", function () {
alert("網絡聯通了");
});
/*offline：網絡斷開時觸發*/
window.addEventListener("offline", function () {
alert("網絡斷開了");
});
</script>
全屏顯示接口
<body>
<div>
<img src="images/huliena.jpeg" alt="" width="810" height="540"> <br/>
<input type="button" id="fullscreen" value="開啓全屏">
<input type="button" id="exitFullscreen" value="退出全屏">
<input type="button" id="isFullscreen" value="是否全屏">
</div>
<script>
/*全屏操作方法和屬性：
1、requestFullscreen()：開啓全屏顯示
不同瀏覽器需要加不同前綴：chrome/safari-webkit，firefox-moz，ie-ms，oprea-o
2、exitFullscreen()：退出全屏顯示
不同瀏覽器也需要加上述不同前綴，退出全屏只能使用document來實現
3、fullscreenElement：是否是全屏顯示狀態
不同瀏覽器也需要加上述不同前綴，也只能使用document來判斷
*/
window.onload = function () {
var div = document.querySelector("div");
/*全屏操作*/
document.querySelector("#fullscreen").onclick = function () {
/*使用能力測試添加不同瀏覽器前綴*/
if (div.requestFullscreen) {
div.requestFullscreen();
} else if (div.webkitRequestFullscreen) {
div.webkitRequestFullscreen();
} else if (div.mozRequestFullscreen) {
div.mozRequestFullscreen();
} else if (div.msRequestFullscreen) {
div.msRequestFullscreen();
}
};
/*退出全屏*/
document.querySelector("#exitFullscreen").onclick = function () {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozExitFullscreen) {
document.mozExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
/*判斷是否是全屏*/
document.querySelector("#isFullscreen").onclick = function () {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement) {
console.log("true");
} else {
console.log("false")
}
}
}
</script>
</body>
文件操作接口
<body>
<form action="">
<!--及時預覽：
1、及時：選擇文件後立刻預覽處理——onchange
2、預覽：通過讀取對象的完成
-->
文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent();">
</form>
<!--src：指定路徑（資源定位——url），請求的是外部資源，一般來說是服務器資源，意味着需要像服務器發送請求，佔用服務器資源。-->
<img src="" alt="">
<script>
/*fileReader：讀取文件內容
：讀取文本文件，返回字符串（默認編碼utf8）
：讀取任意類型的文件，返回二進制字符串，不是用來讀取文件給用戶看而是用來存儲文件。例如——讀取文件獲取二進制數據傳給後臺，
後臺收到數據再存儲。
：讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL是一種將文件嵌入到文檔的方案。DataURL是
將資源轉化爲base64編碼的字符串，並且將這些內容直接存儲在URL中。優化網頁加載速度和執行效率。
：中斷執行效率。
* */
function getFileContent() {
/*讀取文件：
1、創建讀取對象
2、獲取文件，讀取DataURL
沒有任何返回值——void，讀完文件後會將存儲在文件讀取對象的result中
需要傳遞一個參數binary large object文件(圖片或其他可以嵌入到文檔的類型)
文件存儲在file表單元素的files屬性中，它是一個數組
3、獲取數據——fileReader提供完整的事件模型用來捕獲讀取文件的狀態
onabort：讀取文件中斷觸發
onerror：讀取文件錯誤時觸發
onload：讀取文件成功時觸發
onloadend：讀取文件完成時觸發，無論成功還是失敗
onloadstart：開始讀取觸發
onloadprogress：讀取過程中觸發
* */
var reader = new FileReader();
var file = document.querySelector("#myFile").files[0];
reader.readAsDataURL(file)
reader.onload = function () {
document.querySelector("img").src = reader.result;
}
}
</script>
</body>
拖拽接口
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.div1 {
border: 1px solid red;
width: 300px;
height: 300px;
float: left;
position: relative;
}
p {
margin: 0;
background-color: blue;
}
div.div2 {
border: 1px solid cyan;
width: 300px;
height: 300px;
float: left;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，拖拽元素必須添加draggable="true"屬性，圖片和超鏈接默認可以拖拽-->
<p id="pe" draggable="true">我是文字，拖我！</p>
</div>
<div class="div2" id="div2">
</div>
<script>
/*被拖拽元素事件：
ondrag：拖拽過程中調用——持續觸發
ondragstart：拖拽開始時調用
ondragend：拖拽結束調用
ondragleave：鼠標離開拖拽元素原本位置/鬆開鼠標時調用
* */
var pe = document.querySelector("#pe");
pe.ondrag = function () {
console.log("正在拖拽");
}
pe.ondragstart = function () {
console.log("開始拖拽");
}
pe.ondragend = function () {
console.log("結束拖拽");
}
pe.ondragleave = function () {
console.log("鼠標離開");
}
/*目標元素事件：
ondragenter：應用於目標元素，當拖拽元素進入時調用
ondragover：應用於目標元素，當停留在目標元素上時調用
ondrop：應用於目標元素，當在目標元素上鬆開鼠標時調用
ondragleave：應用於目標元素，當鼠標離開目標元素時調用
* */
var div2 = document.querySelector("#div2");
div2.ondragenter = function () {
console.log("已經進入")
}
div2.ondragover = function (e) {
/*console.log("正在停留")*/
/*如果想觸發ondrap事件，必須在ondragover事件中禁止瀏覽器默認行爲*/
e.preventDefault()
}
div2.ondrop = function () {
console.log("鬆開鼠標")
div2.appendChild(pe);
}
div2.ondragleave = function (){
console.log("離開目標")
}
/*給div1加上往回拖拽的功能*/
var div1 = document.querySelector("#div1");
div1.ondragover = function (e){
e.preventDefault();
}
div1.ondrop = function () {
div1.appendChild(pe);
}
</script>
</body>
拖動多個元素以及在拖曳中使用dataTransfer代替全局變量：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div.div1 {
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
p {
margin-top: 5px;
background-color: blue;
}
div.div2 {
border: 1px solid cyan;
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
div.div3 {
border: 1px solid purple;
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，拖拽元素必須添加draggable="true"屬性，圖片和超鏈接默認可以拖拽-->
<p id="pe" draggable="true">我是文字，拖我！</p>
<p id="pe1" draggable="true">我也是文字，拖我！</p>
</div>
<div class="div2" id="div2">
</div>
<div class="div3" id="div3">
</div>
<script>
var pe = document.querySelector("#pe");
var obj = null;
var target = null;
document.ondragstart = function (e) {
/*通過事件捕獲來獲取當前被拖拽的子元素*/
target = e.target.parentNode;
e.target.style.alpha = 0.2;
e.target.parentNode.style.borderWidth = "5px";
obj = e.target;
/*通過datatransfer來實現數據的存儲與獲取
* format：數據類型text/plain、text/urilist
* data：數據一般來說是字符串值
* */
e.dataTransfer.setData("text/plain", e.target.id);
}
document.ondragend = function (e) {
e.target.style.alpha = 1.0;
target.style.borderWidth = "1px";
}
document.ondragover = function (e) {
/*console.log("正在停留")*/
/*如果想觸發ondrap事件，必須在ondragover事件中禁止瀏覽器默認行爲*/
e.preventDefault()
}
document.ondrop = function (e) {
/*console.log(obj);
e.target.appendChild(obj);
console.log(e.target);*/
/*通過dataTransfer.setData存儲的數據只能在ondrop中取*/
var id = e.dataTransfer.getData("text/plain");
var element = document.getElementById(id);
if (e.target.class=="")
e.target.appendChild(element);
}
</script>
</body>
</html>
地理定位接口
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.demo {
width: 200px;
height: 200px;
border: 1px solid cyan;
}
</style>
</head>
<body>
<div class="demo", id="demo"></div>
<script>
var demo = document.getElementById("demo");
function getLoction() {
demo.innerHTML = "定位";
/*能力測試：是否有定位功能*/
if (navigator.geolocation) {
/*
successCallback：獲取定位信息成功回調
errorCallback：失敗回調
options：設置獲取數據方式（對象）
anableHighAccuracy：ture/false是否開啓高精度
timeout：設置超時時間，單位毫秒ms
maximumAge：設置瀏覽器重新獲取地理信息的時間，單位毫秒ms
*/
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {anableHighAccuracy: false, timeout: 3000});
} else {
demo.innerHTML = "Geolocation is not surpported by this browser."
}
}
/*定位成功，會將地理信息傳遞給回調函數*/
function successCallback(positon) {
console.log(positon);
/*
* latitude：經度
* longitude：緯度
* accuracy：精度
* altitude：海拔高度*/
demo.innerHTML = "Latitude: " + positon.coords.latitude + "<br/>Longitude: " + positon.coords.longitude
}
function errorCallback(error) {
console.log(error);
switch (error.code) {
/*用戶拒絕定位請求*/
case error.PERMISSION_DENIED:
demo.innerHTML = "User denied the request for geoloction.";
break;
/*定位信息不可用*/
case error.POSITION_UNAVAILABLE:
demo.innerHTML = "Position information is unavailable.";
break;
/*請求超時*/
case error.TIMEOUT:
demo.innerHTML = "The request to get user location time out.";
break;
/*未知錯誤*/
case error.UNKNOWN_ERR:
demo.innerHTML = "An unknow error occured.";
break;
}
}
getLoction();
</script>
</body>
</html>
百度地圖接口：
<body>
<div id="map1_container">
<div id="allmap1"></div>
</div>
<div id="map2_container">
<div id="allmap2"></div>
</div>
<script>
// 加載第一張地圖
var map1 = new BMapGL.Map('allmap1'); // 創建Map實例1
var point1 = new BMapGL.Point(116.404, 39.915);
map1.centerAndZoom(point1, 9);
map1.enableScrollWheelZoom();
// 加載第二張地圖
var map2 = new BMapGL.Map('allmap2'); // 創建Map實例2
var point2 = new BMapGL.Point(116.404, 39.915);
map2.centerAndZoom(point2, 15);
map2.enableScrollWheelZoom();
</script>
</body>
</html>
存儲接口
sessionStorage存儲數據：
<body>
<!--
sessionStorage：存儲數據到本地，容量5MB左右
1、本質存儲在本頁內存中
2、生命週期爲當前頁面，關閉後就會被清除，前進/後退不受影響
setItem(key, value)：存儲數據，以鍵值對的方式存儲
getItem(key)：獲取數據，（如果找不到對應的key，就會獲得null）
removeItem(key)：刪除數據
clear：清空所以存儲內容
-->
key：<input type="text", id="key"> <br/>
value：<input type="text" id="value"> <br/>
<input type="button" id="setData" value="存儲數據" onclick="saveAction()">
<input type="button" id="getData" value="獲取數據" onclick="getAction()">
<input type="button" id="removeData" value="移除數據" onclick="removeAction()">
<input type="button" id="clearData" value="清空數據" onclick="clearAction()">
<script>
function saveAction() {
console.log("saveAction");
var key = document.querySelector("#key").value;
var value = document.querySelector("#value").value;
window.sessionStorage.setItem(key, value);
}
function getAction() {
console.log("getAction");
var key = document.querySelector("#key").value;
alert(window.sessionStorage.getItem(key));
}
function removeAction() {
console.log("removeAction");
var key = document.querySelector("#key").value;
window.sessionStorage.removeItem(key);
}
function clearAction() {
console.log("clearAction");
window.sessionStorage.clear();
}
</script>
</body>
localStorage存儲數據：
<body>
<!--
localStorage：容量20MB左右
1、不同瀏覽器不能共享數據，但是同一個瀏覽器的不同窗口可以共享數據
2、永久生效，不會隨着頁面關閉而刪除，如果想刪除必須手動刪除
setItem(key, value)：存儲數據，以鍵值對的方式存儲
getItem(key)：獲取數據，（如果找不到對應的key，就會獲得null）
removeItem(key)：刪除數據
clear：清空所以存儲內容
-->
key：<input type="text", id="key"> <br/>
value：<input type="text" id="value"> <br/>
<input type="button" id="setData" value="存儲數據" onclick="saveAction()">
<input type="button" id="getData" value="獲取數據" onclick="getAction()">
<input type="button" id="removeData" value="移除數據" onclick="removeAction()">
<input type="button" id="clearData" value="清空數據" onclick="clearAction()">
<script>
function saveAction() {
console.log("saveAction");
var key = document.querySelector("#key").value;
var value = document.querySelector("#value").value;
window.localStorage.setItem(key, value);
}
function getAction() {
console.log("getAction");
var key = document.querySelector("#key").value;
alert(window.localStorage.getItem(key));
}
function removeAction() {
console.log("removeAction");
var key = document.querySelector("#key").value;
window.localStorage.removeItem(key);
}
function clearAction() {
console.log("clearAction");
window.localStorage.clear();
}
</script>
</body>
應用程序緩存
<!--manifest="應用程序緩存清單文件的路徑"，建議文件擴展名爲appcache，該文件的本質就是文本文件-->
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width: 200px;
display: block;
}
</style>
</head>
<body>
<img src="images/one.png" alt="">
<img src="images/two.png" alt="">
<img src="images/three.png" alt="">
<img src="images/four.png" alt="">
<!--
通過cache manifest文件可以創建web應用的離線版本
優勢：1、配置需要緩存的資源，2、網絡無連接仍可用，3、本地讀取資源，提升訪問速度，增強用戶體驗，4、減少請求，減輕服務器壓力
基礎實現：
1、在html標籤中包含manifest屬性
2、創建配置appcache文件
-->
</body>
</html>
manifest配置文件：
CACHE MANIFEST
# 上面這句標記當前文件是緩存清單文件，第一句必須是這句
# 需要緩存的文件清單
CACHE:
../images/one.png
../images/two.png
# 每次都需要重新從服務器獲取的資源文件清單
NETWORK:
../images/three.png
# *: 代表所有文件
# 如果文件無法獲取則使用指定的文件替代
FALLBACK:
../images/fou.png ../images/huliena.jpeg
# /: 代表所有文件