HTML5新增API

网络状态:
online   offline
window.addEventListener('online',function() {
	alert('网络已经连接');
})
全屏显示,可以是任何元素:ie9+
elementNode.requestFullScreen();  需要添加浏览器前缀,
webkitRequestFullScreen();
文件读取,上传的文件显示到页面上。 文本 图片都可以
FileReader
onchange方法是当状况发生改变的时候,如选择下拉菜单,选择上传文件
<script type="text/javascript">
	var file =document.getElementById("f");
	file.onchange = function() {
		console.log(this.files);   //上传文件的集合
		//读取我们的对象,可以读取内容
		var reader = new FileReader();
		// reader.readAsText(文件对象);
		reader.readAsText(this.files[0]);
		//当这个文件内容读取完成之后会存储在result里面
		//已经读取完毕会调用onload方法
		reader.onload = function() {
			console.log(reader.result);
		}
	}
</script>
readAsDataURL  读取图片获取URL
地图定位:
使用百度API
拖拽效果:
拖拽:Drag
释放:Drop
首先设置可以拖拽,找到源文件设置拖拽效果,找到目标文件设置释放效果
https://www.w3school.com.cn/html5/html_5_draganddrop.asp
Web存储   本地存储
cookie存储内容小,每次使用都会发送请求占用带宽。
如果在浏览器建立小仓库就可以节约带宽:
sessionStorage 5M   浏览器关闭就清除,同一窗口下数据共享
localStorage 20M    本地持久化存储,同一浏览器多个窗口可以共享数据
,只能存储字符串 ,JSON.stringify()转换
window.sessionStorage
window.localStorage     

.setItem("username",val);
.getItem();
.removeItem();
.clear();
<script type="text/javascript">
	var intext = document.getElementById("uname");
	var btn1 = document.getElementById("set");
	var btn2 = document.getElementById("get");
	var btn3 = document.getElementById("del");

	btn1.onclick = function() {
		var txt = intext.value;
		window.sessionStorage.setItem("username",txt);
	}
	btn2.onclick = function() {
		var gtxt = window.sessionStorage.getItem("username");
		alert(gtxt);
	}
	btn3.onclick = function() {
		var gtxt = window.sessionStorage.removeItem("username");
	}
</script>
应用缓存:
略

发表评论

邮箱地址不会被公开。 必填项已用*标注