网络状态检测
代码语言：javascript复制 //网络连接
window.addEventListener('online',function(){
alert('有网')
})
window.addEventListener('offline',function(){
alert('网络断开')
})全屏与取消全屏
代码语言：javascript复制 /**
* 全屏显示 webkit moz o ms
* Node.webkitrequestFullScreen()
*/
var img = document.querySelector('img')
var full = document.querySelector('#full')
full.onclick = function(){
// img.webkitRequestFullScreen();
if(img.requestFullScreen){
img.requestFullScreen()
} else if (img.webkitRequestFullScreen){
img.webkitRequestFullScreen() //webkit
} else if (img.mozRequestFullScreen){
img.mozRequestFullScreen() //moz
} else if (img.msRequestFullscreen){
img.msRequestFullscreen() //ms
}else if (img.oRequestFullScreen){
img.oRequestFullScreen()
}else{
alert('您的浏览器不支持全屏')
}
}
//取消全屏Api 与全屏一样需要添加浏览器前缀
//CancelFullScreen()
//document.CancelFullScreen()
//伪类选择器
/**
* 是否全屏
* document.IsfullScreen //true/false
* 全屏伪类选择器 浏览器前缀
* div:-webkit-full-screen{
* }
*
* /文件读取
案例图片上传预览
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" multiple>
<img src="" alt="">
<script>
var file = document.querySelector('input')
var img = document.querySelector('img')
file.onchange = function(){
console.log(this.files)
//初始化render对象
var render = new FileReader()
//读取this.files[0]的内容
render.readAsDataURL(this.files[0])
//文件内容读取完毕后存储到this.result中
render.onload = function(){
img.src = this.result
}
}
</script>
</body>
</html>拖拽
相关事件
拖动源对象相关事件 ondragstart:源对象开始被拖动 ondrag:源对象在拖动过程中 ondragend:源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件 ondragenter:目标对象被源对象拖动着进入 ondragover:目标对象被源对象拖动着悬停在上方 ondragleave:源对象拖动着离开了目标对象 ondrop:源对象拖动着在目标对象上释放
案例
html结构
代码语言：javascript复制 <div class="one">
<h6 id="one" draggable="true">one</h6>
<h6 id="two" draggable="true">two</h6>
<h6 id="three" draggable="true">three</h6>
<h6 id="four" draggable="true">four</h6>
</div>
<div class="two"></div>
<div class="three"></div>js
代码语言：javascript复制 document.ondragstart = function(e){
console.log('源对象开始被拖动')
//拖拽的时候存储数据 --- 拖拽的对象id
e.dataTransfer.setData('text/html',e.target.id)
}
document.ondrag = function(){
console.log('源对象被拖中')
}
document.ondragend = function(){
console.log('源对象拖动结束')
}
//找到目标对象 设置释放效果
document.ondragenter = function(){
console.log('源对象拖动进入目标对象')
}
document.ondragover = function(e){
console.log('源对象悬停在目标对象上方')
return false //清除默认事件
}
document.ondragleave = function(){e
console.log('源对象从目标对象离开')
}
document.ondrop = function(e){
console.log('源对象释放在目标对象')
//获取dataTransfer里面的数据
var id = e.dataTransfer.getData('text/html');
e.target.appendChild(document.getElementById(id))
}效果
