H5 學習足迹(二)

文章目錄

- - classlist 對象
  - dataset 對象
  - 監聽網絡狀态事件
  - 監聽網頁狀态事件
  - 監聽手機電量顯示事件
  - 手機震動事件
  - 富文本編輯器執行指令 execCommand
  - 自定義事件
  - 調用裝置攝像頭
  - 前端路由url 的改變和監聽事件
  - 離線存儲 Cache Storage
  - 将網站僞裝成手機app

classlist 對象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="div">
			
		</div>
		
	</body>
	
	<script>
		
		// classlist對象   管理class清單
		
		// 1.增加類名
		div.classList.add('a')
		
		// 2.删除類名
		div.classList.remove('a')
		
		// 3.如果存在該類名則删除,如果不存在該類名則增加
		div.classList.toggle('a')
		
		// 4.判斷該元素是否存在指定類名,存在則傳回true,不存在則傳回false
		div.classList.contains('a')
		
		// 5.類名個數
		div.classList.length
		
	</script>
</html>

H5 學習足迹(二)

dataset 對象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background:#996633;
		}
	</style>
	<body>
		
		<div id="box" data-yueyue="nvshen" data-id="1703">
			
		</div>
		
		[外鍊圖檔轉存失敗(img-VKrDq3Bh-1562069837910)(https://mp.csdn.net/mdeditor/loading.gif)]
		
	</body>
	
	
	<script>
		// dataset對象   用來往标簽内儲存屬性和資料
		
		// 擷取元素的所有自定義屬性  data-自定義屬性
		console.log(box.dataset)
		// img
		
		//	設定自定義屬性
		box.dataset.type = 'USER_BOOK'
		console.log(box.dataset)
		// img
		
		
		// dataset 和 setAttribute,getAttribute
		console.log(box.getAttribute('data-type'))
		console.log(box.getAttribute('data-yueyue'))
		console.log(box.getAttribute('data-id'))
		// img
		
		// box.setAttribute('isBox','ture') dataset擷取不到
		box.setAttribute('data-isBox','ture')
		box.removeAttribute('data-id')
		console.log(box.dataset)
		// img
		
		
		
		// 懶加載原理
		//	頁面加載後img先顯示src的加載gif,通過請求擷取到需要顯示的src再通過dataset指派到data-src
		var img = new Image();
		// post => url	 =>  imgDom.dataset.src = url
		img.src = imgDom.dataset.src;
		
		
		
	</script>
	
	
</html>

H5 學習足迹(二)

監聽網絡狀态事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		
		// 網絡狀态監聽事件   當網絡狀态改變時觸發事件
		window.addEventListener('online',function(){
			console.log('有網')
		})
		window.addEventListener('offline',function(){
			console.log('沒有網')
		})
		// img
	
	</script>

</html>

H5 學習足迹(二)

監聽網頁狀态事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	
	<script>
		
		// 網頁狀态  監聽網頁狀态
		window.addEventListener('visibilitychange',function(){
			// 切換頁面時觸發
			console.log(document.visibilityState)
			// img
			// 1. hidden 目前網頁的内容不可見
			// 2. visible 目前網頁可見
			// 3. prerender 網頁預渲染,單内容不可見
			// 4. unloaded 文檔被解除安裝
			
			if(document.visibilityState === 'hidden'){
				document.title = '出bug了，快回來!'
			}
			if(document.visibilityState === 'visible'){
				document.title = '歡迎回來'
			}
			
		})
		
		
		
	</script>
	
	
</html>

H5 學習足迹(二)

監聽手機電量顯示事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	
	<script>
		
		// 手機端  電量顯示事件  window.navigator
		
		// navigator 對象
		console.log(window.navigator)
		// img
		
		
		// 擷取手機電量方法
		window.navigator.getBattery().then(data => {
			// 1. 是否正在充電
			// 2. 剩餘電量
			// 3. 充滿電所需時間
			// 4. 目前電量可使用時間
			const {charging,level,charginTime,dischargingTime} = data	  //const charging = data.charging
			
			document.body.innerHTML = '是否正在充電: ' + charging + /n + ' 剩餘電量: ' + level + /n
			+ ' 充滿電所需時間: ' + charginTime + /n + ' 目前電量可使用時間: ' + dischargingTime
		
			
		})
			// img
		
	</script>
	
	
</html>

navigator對象

H5 學習足迹(二)

H5 學習足迹(二)

手機震動事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button type="button" id="btn">點選震動</button>
		
	</body>
	
	<script type="text/javascript">
		
		// 手機震動事件    不能直接使用   必須在click點選事件裡才能被觸發
		
		// 第一種傳參方式   數字即ms   100ms  
		// 第二種傳參方式   數組[100,300,200,400]
		//		第一個值: 震動多少ms  第二個值: 間隔多少ms  第三個值: 震動多少ms  以此類推
		btn.onclick = function(){
			// window.navigator.vibrate(100)
			window.navigator.vibrate([100,300,200,400]])
		}
	
		
	</script>
	
	
</html>

富文本編輯器執行指令 execCommand

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button type="button" id="btn">全選</button>
		<button type="button" id="btn1">加粗</button>
		<button type="button" id="btn2">複制</button>
		<button type="button" id="btn3">剪切</button>
		
	</body>
	
	<script type="text/javascript">
		
		// 富文本編輯器
		const iframe = document.createElement('iframe')
		document.body.appendChild(iframe)
		
		// 要擷取元素的contentDocument 才能觸發 execCommand方法
		const doc = iframe.contentDocument;
		
		// designMode對象讓元素可編輯
		doc.designMode = 'on'
		
		
		// 有一些執行指令首先需要document.designMode = 'on' 才可以使用
		// 執行指令方法
		btn.onclick = function(){
			doc.execCommand('selectAll')  // 不需要開designMode
	
			// 文字大小  參數3：1~7
			// doc.execCommand('fontSize',true,2) // 需要開designMode
			
			// 文字顔色  foreColor
			// doc.execCommand('foreColor',true,'#963')
			
			// 背景色
			// doc.execCommand('backColor',true,'#369')
			
			// 文字斜體
			// doc.execCommand('italic')
			
			// 文字删除
			// doc.execCommand('delete')
			
		}
		
		btn1.onclick = function(){
			doc.execCommand('bold')	// 字型加粗  需要開designMode
		}
		
		btn2.onclick = function(){
			doc.execCommand('copy')		// 不需要開designMode
		}
		
		btn3.onclick = function(){
			doc.execCommand('cut')   // 需要開designMode
		}
		
		
		
		
	</script>
	
	
</html>

自定義事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background:#963
		}
	</style>
	<body>
		<div id="box">
			
		</div>
		
	</body>
	
	<script type="text/javascript">
		
		/*
			自定義事件
			box.addEventListener('click')  浏覽器自帶的點選事件
		*/ 
	   
	   // 元素監聽自定義事件
	   box.addEventListener('星空',function(e){
		   console.log('觸發了自定義事件 星空')
		   console.log(e)
		   // 事件的執行内容
	   })
	   
	   
	   /*
			自定義事件的建立和觸發
				兩種方式
	   */
	   
	   // 方式一
	   // 1. 建立event對象  參數:  KeyboardEvent  MouseEvent  ...
			// 建立了鍵盤的event事件
	   // const evt = document.createEvent('KeyboardEvent');
	   // // 2. 初始化  參數1:想要觸發的事件  參數2:是否可以冒泡  參數3.是否阻止預設事件
	   // evt.initEvent('星空',false,false);
	   // // 3. 元素觸發自定義事件,可放在點選事件中觸發
	   // box.onclick = function(){
		  //  box.dispatchEvent(evt)	
	   // }
	   
	   
	   // 方式二
		// 這種方式建立出來的event更加自由
	   const cust = new CustomEvent('星空',{
		   detail:{
			   // 自定義傳入的資料
			   nvshen: 'yueyue'
		   },
		   bubbles:false, // 是否冒泡
		   cancelable:false  // 是否阻止預設事件
	   });
		box.onclick = function(e){
			// 觸發自定義事件
			box.dispatchEvent(cust)
		}

		// img	
		
		
	</script>
	
</html>

H5 學習足迹(二)

調用裝置攝像頭

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<video src="" id="videoBox"></video>
		
		
	</body>
	
	<script type="text/javascript">
		
		// navigator  調用裝置的功能  擷取資訊
		// 參數  1.調用攝像頭還是音頻
		//		 2.調用成功之後
		//		  3.調用失敗之後
		// 特别注意1點  這個函數功能  隻能在localhost或者是https方式才能使用
		
		
		// ES5寫法
		// function f(){
		// 	window.navigator.getUserMedia({video:true,audio:true},function(stream){
		// 		// 調用成功  do sth
		// 			// 顯示攝像頭拍攝内容
		// 		videoBox.srcObject = stream;
		// 		videoBox.play();
		// 		
		// 	},function(){
		// 		// 調用失敗的回調函數
		// 		f()
		// 	})
		// }
		// f();
		
		
		
		
		// ES6寫法  調用攝像頭  麥克風
		function f(){
			window.navigator.mediaDevices.getUserMedia({video:{
				// facingMode:'user'  使用前置攝像頭
				facingMode:'environment',
				width:300,
				height:500,
				frameRate:{
					ideal: 60  ,// 最小幀率
					max: 120    // 最大幀率
				}
			}})
			.then(function(stream){
				// 調用成功  do sth
				 	// 顯示攝像頭拍攝内容  stream:媒體流
				videoBox.srcObject = stream;
				videoBox.play();
			})
			.catch(function(){
				// 調用失敗的回調函數
				f();
			})
		}
		f();
		
	
	</script>
	
</html>

前端路由url 的改變和監聽事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="#hashvalue" target="_blank" rel="external nofollow" >點選跳轉</a>
		<a href="#isGroupon" target="_blank" rel="external nofollow" >團購</a>
		
		
		<button id='btn'>登入</button>
		
	</body>
	
	<script>
		
		/*
			前端路由 url 
				1. # hash路由		<a href="#aaa" target="_blank" rel="external nofollow" >
				url更改會向背景發送資料，#後面的hash值無論如何修改都不會向背景發送資料，頁面也不會重新整理
		
		*/
		// img 1-0
		
		window.onhashchange = function(){
			
			// 特别注意  a标簽中href 直接寫# 是什麼都擷取不到的
			
			// 頁面不重新整理前提下hash值改變則監聽
			// img 1-1 1-2
			console.log('路由hash值改變')
			// 擷取目前hash值
			console.log(window.location.hash)
			if(window.location.hash == '#isGroupon'){
				alert('進入團購頁面')
				// 可以設定document.body.innerText 構造DOM
			}
			if(window.location.hash == '#hashvalue'){
				alert('進入首頁')
				// img 1-3
			}
		}
		
		// // 擷取目前hash值
		console.log(window.location.hash)
		
		
		
		
		// H5 路由 	兩種方式實作h5路由
		// 不是用# 和普通的網址一樣
		btn.onclick = function(){
			// 隻是單純的改變了url
			// 參數 1.傳遞的内容（資料）  2.無用參數  3.想要跳轉到哪個路徑path
			
			
				// 第一種方式  pushState
			// 可以把url 看作一個數組 127.0.0.1 + ['/前端路由.html' , '/login'] 數組第二個替換第一個,浏覽器傳回則顯示數組第一個
			window.history.pushState('yueyue','111','/login')
			// img 1-4 1-5
			
				// 第二種方式  replaceState
			// 127.0.0.1 + ['/前端路由.html' , '/login']  數組第二個直接替換第一個,第一個路由不存在
			// window.history.replaceState('yueyue','111','/login')
			
		}
		
		// 監聽擷取pushState的第一個參數傳遞的内容資料,監聽浏覽器前進後退按鈕, 監聽window.history.go(-1)
		window.onpopstate = function(e){
			// 該監聽事件需要路由改變後再點選浏覽器傳回按鈕傳回才觸發
			console.log('監聽pushState,擷取第一個參數内容')
			// 點選觸發事件後 浏覽器傳回 再 前進才能觸發擷取到e.state(pushState的第一個參數)
			console.log(e.state)
			console.log(e)
			// img 1-6
		
		}
		
		
		
		// 重新整理目前頁面
		window.history.go(0)
		// 傳回上一頁面
		window.history.go(-1)
		// 傳回上上個頁面
		window.history.go(-2)
		
		// 頁面後退一步
		window.history.back()
		// 頁面前進一步
		window.history.forward()
		
	</script>
	
	
</html>

1-0

H5 學習足迹(二)

1-1

H5 學習足迹(二)

1-2

H5 學習足迹(二)

1-3

H5 學習足迹(二)

1-4

H5 學習足迹(二)

1-5

H5 學習足迹(二)

1-6

H5 學習足迹(二)

離線存儲 Cache Storage

cachesStorage.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="./pic.jpg" alt="">

</body>

<script>

    /*
    *   離線存儲    用處最大的地方  手機端
    *  有無網都可以通路web 手機頁面
    *       1. 離線存儲 JS來控制
    *       2. 浏覽器請求預設是發送到伺服器 img link script
    *       3. 攔截浏覽器請求伺服器，讓浏覽器請求緩存
    *       4. 離線存儲功能使用方式 儲存在navigator對象下
    * */

    // serviceWorker 離線存儲功能 隻有在localhost 或者 https才能生效
    // register 注冊服務 參數1:js檔案
    navigator.serviceWorker.register('sw.js')



</script>

</html>

sw.js

// 用來管理離線存儲功能
// self 相當于window  fetch 監聽浏覽器請求的事件

// name 名字 || 版本号
const name = 'yueyueV3.0.1';
// 緩存哪些東西 想要緩存圖檔也要加在list中
const list = [
    './cachesStorage.html',
    './sw.js',
    './pic.jpg'
];

// 當緩存的html 等 靜态檔案更新時
// 更新事件
self.addEventListener('activate',function(e){
    // 1. 讀取緩存清單
    e.waitUntil(
        caches.keys().then(keyList =>
            // 如果name 版本号不同則表示更新 則删除原來的緩存
            // 無論html 或者靜态檔案怎麼改變浏覽器都隻是讀取舊版本緩存  隻有name 改變後也就是版本更新才會觸發判斷進行更新緩存  谷歌浏覽器自動更新緩存
            Promise.all(keyList.map(key => key !== name && caches.delete(key)))
        )
    )
});

// 用JS控制讓浏覽器進行緩存
// 開始進行緩存 第一次進入到網頁的時候觸發
self.addEventListener('install',function(e){
    // 第一次進入網頁就建立名為yueyueV3.0.1的檔案夾，将list所有内容添加到該檔案夾
    // 緩存完成後再審查元素 Application/Cache Storage 内可檢視
    // e.waitUntil 等代碼執行後 do sth
    e.waitUntil(
        caches.open('name').then((c) => c.addAll(list))
    )
});


// 審查元素 network裡顯示的所有請求  都能被這個事件監聽到
self.addEventListener('fetch',function (e) {
    // 如何去攔截浏覽器預設向伺服器請求的

    // 攔截浏覽器請求 可以指定請求哪些内容     (離線緩存.html)
    // 打開離線存儲.html的時候 浏覽器請求      離線緩存.html
    // 攔截了 浏覽器的請求，并且讓浏覽器去請求   離線緩存.html
    e.respondWith(
        // 查找緩存 并監聽請求
        // 判斷 如果緩存裡有，那麼就使用緩存的内容，沒有的話就 fetch 向伺服器請求
        caches.match(e.request).then( response => response || fetch(response))
    )
});

将網站僞裝成手機app

為網站添加設定：手機在通路網站的同時可以添加到主螢幕建立快捷方式

index.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    将設定好的json檔案引入到需要僞裝成app的網站首頁-->
    <link rel="manifest" href="./manifest.json" target="_blank" rel="external nofollow" >

</head>
<body>

</body>
<script>
    // 将網站僞裝成手機app  讓手機通路網站後能夠将網站添加到手機桌面建立快捷方式
</script>
</html>

manifest.json

{
  // 添加到手機主螢幕後的僞app名字
  "name": "yueyue",
  // 添加到手機主螢幕時的app名字
  "short_name": "mingming",
  "start_url": "./",
  // 全屏
  "display": "fullscreen",
  // 建立手機主螢幕快捷方式的圖示
  "icons": [
    {
      "url": "111.jpg",
      "sizes": "512x512",
      "type": "image/gif"
    }
  ],
  "background_color": "#996633",
  "theme_color": "#669933"
}

H5 學習足迹(二)

H5 學習足迹(二)

文章目錄

classlist 對象

dataset 對象

監聽網絡狀态事件

監聽網頁狀态事件

監聽手機電量顯示事件

手機震動事件

富文本編輯器執行指令 execCommand

自定義事件

調用裝置攝像頭

前端路由url 的改變和監聽事件

離線存儲 Cache Storage

将網站僞裝成手機app

繼續閱讀

利用 curl 發起get / post請求，并上傳檔案

運維工具整理

零散記8-7~8-9

不适用expect 做到ssh免密碼輸入

mybaties+maven+springboot整合将查詢結果映射到實體Bean時的注意事項

android 啟動的空白以及一些小bug

mybatis的基本配置config配置mapper配置

Python Built-in Functions

一周總結（四）

flask cache

淘寶技術牛p部落格整理

12.5 整理自己的一些思緒...

退役感想（2019.11）

python--筆記(一)python 風格的代碼

JPA基本使用前言一、導入依賴二、配置資料通路層三、使用JPA

低壓mos大全

H5 學習足迹(二)

文章目錄

classlist 對象

dataset 對象

監聽網絡狀态事件

監聽網頁狀态事件

監聽手機電量顯示事件

手機震動事件

富文本編輯器 執行指令 execCommand

自定義事件

調用裝置攝像頭

前端路由url 的改變和監聽事件

離線存儲 Cache Storage

将網站僞裝成手機app

繼續閱讀

富文本編輯器執行指令 execCommand