1、网络监听接口
1)、ononline:网络连通时触发,window.addEventListener('online',function(){})
2)、onoffline:网络断开时触发,window.addEventListener('offline',function(){})
2、全屏接口
1)、requestFullScreen():开启全屏显示,有兼容问题,需要加上前缀:chrome:webkit,firefox:moz,ie;ms,opera:o
2)、cancelFullScreen():退出全屏显示,只能由document元素实现。
3)、fullScreenElement:属性,是否全屏显示,只能有document元素实现
<div style="width: 500px;height: 500px;background:red;">
<p>
<input type="button" value="全屏显示" id="full">
<input type="button" value="退出全屏" id="cancelFull">
<input type="button" value="是否全屏" id="isFull">
</p>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var div=document.querySelector("div")
document.querySelector('input').οnclick=function(){
if(div.requestFullscreen){
div.requestFullscreen();
}else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
}
document.querySelector("#cancelFull").οnclick=function(){
if(document.cancelFullScreen){
document.cancelFullScreen();
}else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen()
}
}
document.querySelector("#isFull").οnclick=function(){
if(document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){
alert(1)
}else{
alert(2)
}
}
}
</script>
3、文件读取接口
FileReader:读取文件内容
1)、readAsText():读取文本文件,返回文本字符串,默认编码为utf-8
2)、readAsBinaryString():读取任意类型的文件,返回二进制字符串,用于存储文件。
3)、readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质是DatURL,是一种将文件(图像,能够嵌入到文档中的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式,并将这些内容直接存储在url中,可以优化网站的加载速度和执行效率
4)、abort():中断读取
案例:即时预览
<form>
<input type="file" name="" οnchange="showPic()">
<img src="" id="img">
<input type="submit" value="submit" name="">
</form>
<script type="text/javascript">
function showPic(){
var reader=new FileReader();
/*readAsDataURL:没有返回值,但是读取完后会将读取结果存储在文件读取对象的result中
需要传递一个参数(图片或其他可以嵌入到文档的类型)
文件存储在file表单元素的files属性中,
*/
var file=document.querySelector('input');
reader.readAsDataURL(file.files[0]);
/*获取数据:
onabort():读取中断时触发,
onerror():读取错误时触发
onload():读取成功时触发
onloadend():读取完成时触发,无论成功还是失败
onloadstart():开始读取时触发,
onprogress():读取文件过程中触发
*/
reader.οnlοad=function(){
document.querySelector("img").src=reader.result;
}
}
</script>
4、拖拽接口
1)、拖拽元素支持事件:
ondrag:整个拖拽过程都会调用
ondragstart:当拖拽开始时调用
ondragleave:当鼠标离开拖拽元素时调用
ondragend:结束拖拽时调用
2)、目标元素支持事件
ondragenter:当拖拽元素进入时触发
ondragover:当停留在目标元素上时调用
ondrop:当在目标元素上松开鼠标时调用
ondragleave:鼠标离开目标元素时调用
5、地理位置接口
<div id="box" style="width: 200px;height: 200px; border:1px solid red;">
</div>
<script type="text/javascript">
window.οnlοad=function(){
var box=document.querySelector("#box");
if(navigator.geolocation){
/*
navigator.geolocation.getCurrentPosition(success,error,positon)
success:成功后的回调函数,
error:失败后的回调函数
positon:配置信息,主要包含:
(
enableHightAccuracy 是否使用高精度
timeout:设置超时时间,
maximunAge:可以设置浏览器重新获取地理位置信息的时间间隔,单位是ms
)
*/
navigator.geolocation.getCurrentPosition(onSuccess,onError,{enableHightAccuracy:true,timeout:10000,maximunAge:10000})
}
}
function onSuccess(position){
box.innerHTML="经度:"+position.coords.latitude+"维度:"+position.coords.longitude
}
function onError(err){
console.log(err)
}
</script>