1.全屏接口
<!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>
<div>
<img src="../images/1.jpg" alt="" srcset="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelfull" value="退出全屏">
<input type="button" id="isfull" value="是否全屏">
</div>
<script>
/*
不同浏览器对全屏支持不同,需要添加不同的前缀
google:webkit
firefox:moz
ie:ms
opera:o
cancelFullscreen退出全屏只能使用document来实现
fullScreenElement判断也只能使用document来判断
*/
window.onload=function(){
var div=document.querySelector("div");
document.querySelector("#full").onclick=function(){
div.requestFullscreen();
}
document.querySelector("#cancelfull").onclick=function(){
document.cancelFullscreen();
}
}
</script>
</body>
</html>
2.文件读取接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<title>Document</title>
<style>
.red{
border: 1px solid red;
}
p
{
font-size: 13px;
}
</style>
</head>
<body>
<!-- 即时预览图片
通过文件读取对象的readAsDataURLwanchegn
-->
<form action="">
<input type="file" name="myfile" id="myfile" onchange="getFileContent()">
<br>
<input type="submit" value="提交图片" id="submit">
<br>
<img src="" alt="" srcset="" id="imgs">
</form>
<script>
/*
1.readAsText();读取文本文件,返回UTF-8字符串
2.readAsBinaryString();读取任意类型的文件,返回二进制字符串。存储文件
3.readAsDataURL()读取一段以data开头的字符串,dataURL是一种将文件嵌入到文档的方案
4.abort()中断读取
*/
function getFileContent(){
/*创建文件读取对象*/
var reader=new FileReader();
//readAsDataURL这个函数没有返回值,但是读取完之后,他会将文件读取的结果存储在文件读取对象result中
//需要传递二进制的大文件(IMGAGE)
//文件存储在file表单的元素的files属性中,这是一个数组
var files=document.querySelector("#myfile").files;
reader.readAsDataURL(files[0]);
/*FileReader提供了一个完整的事件模型来监控读取文件的状态 已读还是未读*/
/*
onbort读取文件中断触发
onerror
onload文件读取成功并且完成触发
onloadend文件读取完成触发
onloadstart文件读取时出阿飞
onprogress文件读取中触发
*/
reader.onload=function(){
// console.log(reader.result)
document.querySelector("img").src=reader.result;
}
}
</script>
</body>
</html>
3.拖拽接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
{
padding: 0;
margin: 0;
}
#div1,#div2,#div3
{
border: 1px solid red;
float: left;
width: 300px;;
height: 200px;
}
p
{
background: blueviolet;
}
</style>
</head>
<body>
<!-- 在H5中,如果向拖拽元素,就加draggable=true ,再添加拖拽事件-->
<div id="div1">
<p id="pe" draggable=true>拖拽元素</p>
<p id="pe" draggable=true>拖拽s元素</p>
</div>
<div id="div2">目标元素</div>
<div id="div3">目标元素</div>
</body>
<script>
//通用
var obj=null;//当前被拖拽的元素
document.ondragstart=function(e){
e.target.style.opacity=0.5;
//target是当前拖拽的目标,现在取值
obj=e.target;
}
document.ondragend=function(e){
e.target.style.opacity=1;
//target是当前拖拽的目标
}
document.ondragover=function(e){
e.preventDefault();
// ondragover拖拽元素再目标元素停留时
//ondrop鼠标在目标元素中松开拖拽元素触发 浏览器会默认阻止ondrop事件,所以必须在ondrop之前阻止默认事件发生
}
document.ondrop=function(e){
//添加拖拽元素到当前目标元素
e.target.appendChild(obj);
}
</script>
</html>
4.网络接口
<!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>
<script>
//network里面弄
//ononlie网路连接时触发
//onoffline网络断开时触发
window.addEventListener("online",function(){
alert("网络连接了");
})
window.addEventListener("offline",function(){
alert("网络断开了");
})
</script>
</body>
</html>