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