htmlAPI主要是 html5新增的一些api ,比如文件上传，网络状态，多媒体应用
1.网络状态
html5给我们提供了2个事件online和offline
online用户网络连接时被调用
offline用户网络断开时被调动
window.addEventListener('online', function(){
console.log('网络连接恢复！');
})
window.addEventListener('offline', function(){
console.log('网络连接中断！');
})
小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.error{
color: red;
}
.status{
color: steelblue;
}
.success{
color: green;
}
span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<span class="status">网络检测中....</span>
</body>
</html>
<script>
let status = document.querySelector("span");
window.addEventListener('online', function(){
status.className = 'success';
status.innerHTML = "网络连接成功";
})
window.addEventListener('offline', function(){
status.className = 'error';
status.innerHTML = "网络连接失败";
})
</script>
在pc端时只能判断无线和网线是否连接，而不能判断是否有网络、是否可以上网
建议通过ajax请求去判断
ajax({
url: 'x.html',
success: function(result){
console.log("网络连接成功");
},
error: function(result){
console.log("网络连接成功");
}
});
2.全屏
图片放大是页面中比较常见的功能， 但是html5提供的API存在很多兼容性问题，所以需要我们编写兼容性代码
let imgs = document.querySelector(".imgs");
let fullScreen = document.querySelector(".fullScreen");
let outScreen = document.querySelector(".outScreen");
//全屏
fullScreen.addEventListener('click',function(){
enterFullScreen(imgs);
})
//退出全屏
document.addEventListener('click',function(e){
exitFullscreen();
})
//展开全屏
function enterFullScreen(obj){
let fullScreen = obj.requestFullScreen || obj.webkitRequestFullScreen || imgs.mozRequestFullScreen || imgs.msRequestFullscreen;
fullScreen.call(obj);
}
//退出全屏
function exitFullscreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
cfs.call(el);
}
3.文件读取
该**readAsText()** 方法用于读取指定Blob或的内容File。读取操作完成后，readyState将更改为 DONE，将loadend触发事件，并且该 result属性将文件内容包含为文本字符串。
error事件的处理程序。每次读取操作遇到错误时，都会触发此事件。
load事件的处理程序。每当读取操作成功完成时，都会触发此事件。
开始读取指定的内容Blob，完成后，该result属性包含一个data:表示文件数据的URL。
开始读取指定内容Blob，完成后，该result属性将文件内容包含为文本字符串。可以指定一个可选的编码名称。
案例1：读取文本内容
let files = document.querySelector(".files");
let box = document.querySelector(".box");
files.addEventListener('change',function(){
//打印文件信息
// console.log(this.files);
//初始化一个文件对象
let fileReader = new FileReader();
//读取内容 (会把读取内容)
fileReader.readAsText(this.files[0]);
//监听是否读取完毕
fileReader.onload = function(){
box.innerHTML = this.result;
}
})
案例2: 设置文件图片
let files = document.querySelector(".files");
let box = document.querySelector(".box");
files.addEventListener('change',function(){
//打印文件信息
// console.log(this.files);
//初始化一个文件对象
let fileReader = new FileReader();
//读取内容 (会把读取内容)
fileReader.readAsDataURL(this.files[0]);
//监听是否读取完毕
fileReader.onload = function(){
//生成图片节点添加到box中
let imgs = document.createElement("img");
imgs.className = "select";
imgs.setAttribute('src',this.result);
box.append(imgs);
}
})
案例3：实现文件上传
function uploadPic() {
var form = document.getElementById('upload')
// 通过FormData将文件转成二进制数据
var formData = new FormData(form);
$.ajax({
url:"上传地址",
type:'post',
data:formData,
processData:false, //不要去处理发送的数据
success:function (res) {
if(res){
alert('上传成功')
}
},
error:function(err){
alert('网络失败，请稍后再试',err)
}
})
}
4,添加高德地图API
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<title>地图显示</title>
<style>
html,
body,
#container {
width: 600px;
height: 600px;
margin:100px auto;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=d2114f19fe2ece1117fd3074a7aa5b8d"></script>
<script>
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});
</script>
</body>
</html>
