window.addEventListener('online',function (ev) {
alert('网络链接了');
});
window.addEventListener('offline',function (ev) {
alert('网络断开了');
})
不一样的浏览器须要加上不一样的前缀html
<div>
<img src="../imgs/294.jpg" alt="">
<input type="button" id='full' value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id='isFull' value="是否全屏">
</div>
<script>
// - requestFullScreen():开启全屏显示
// - cancelFullScreen():退出全屏
// - fullscreenElement:是不是全屏状态
window.onload=function () {
var div=document.querySelector('div')
document.querySelector("#full").onclick=function () {
// div.requestFullScreen();
// div.webkitRequestFullScreen();
// div.mozRequestFullScreen();
//兼容处理的方式
if(div.requestFullscreen)
{
div.requestFullscreen();
}
else if(div.webkitRequestFullScreen)
{
div.webkitRequestFullScreen();
}else if(div.mozRequestFullScreen)
{
div.mozRequestFullScreen();
}else if(div.msRequestFullScreen)
{
div.msRequestFullScreen();
}
}
//退出全屏 退出全屏必须使用document实现
document.q
document.querySelector('#ifFull').onclick=function () {
if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement)
{
alert(true);
}
else{
alert(false);
}
}
}
</script>
退出全名不是某个元素退出而是整个文档，退出全屏必须使用document实现jquery
mozFullScreenElement这个名字和其余的不同git
文件读取须要必定的时间web
<!--图片展现 src请求资源会发送请求，占用服务器资源-->
<img src="../imgs/295.jpg" alt="">
<p>上传头像的预览功能</p>
<form action="">
文件：<input type="file" name="imgfile" id="imgfile"><br/>
<input type="submit" value="提交">
</form>
<script>
// - 1.readAsText():读取文本文件
// - 2.readAsBinaryString(): 读取任意类型文件，返回给用户看
// - 3.readAsDataURL():读取文档获取一段data开头的字符穿，DataURL是一种将文件嵌入到文档中的方案
// 预览操做
document.getElementById('imgfile').onchange=function (ev) {
//1.建立读取文件对象
var reader=new FileReader();
/* 2.读取文件，获取DataURL
1.没有返回值,会将读取的结果返回到文件对象中的result
2.须要传递参数 binary large object：文件（图片）
3.文件存储在file表单元素的files属性中，他是一个数组
*/
var file=document.querySelector('#imgfile').files[0];//获取第一张图片
reader.readAsDataURL(file);
//文件读取完毕后须要作的事情：数据是BASE64
reader.onload=function () {
document.querySelector('img').src=reader.result;
}
}
</script>
浏览器默认阻止ondrop事件，必须在ondragover中加入e.preventDefault()；阻止默认行为chrome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5中拖拽接口的使用</title>
<style>
.first,.second{
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
padding: 2px 2px;
}
.first{
border: solid 1px blue;
}
.second{
border: solid 1px red;
}
p{
margin: 0 0;
background-color: #7d64ff;
}
</style>
</head>
<body>
<div class="first">
<p class="one" draggable="true">Hello!</p>
</div>
<div class="second">
</div>
<script>
//应用于拖拽元素
var p=document.querySelector('p');
// p.ondrag=function (ev) {
// console.log('ondrag');
// }
// p.ondragstart=function (ev) {
// console.log('ondragstart');
// }
// p.ondragend=function (ev) {
// console.log('ondragend');
// }
// p.ondragleave=function (ev) {
// console.log('ondragend');
// }
//应用于目标元素,
var div2= document.querySelector('.second');
div2.ondragover=function (e) {
e.preventDefault();
}
div2.ondrop=function () {
div2.appendChild(p);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height:200px;
border:solid 1px red;
margin-left: 20px;
margin-top: 20px;
float:left
}
p{
background-color: greenyellow;
margin-top:1px;
}
</style>
</head>
<body>
<div id="one">
<p id="first" draggable="true">first</p>
<p id="second" draggable="true">second</p>
</div>
<div id="two">
</div>
<script>
var obj=null;//当前被拖拽的元素
document.ondragstart=function (ev) {
//经过事件来获取当前被拖拽的元素
ev.target.style.opacity=0.5;
ev.target.parentNode.style.borderWidth="5px";
obj=ev.target;
// 经过dataTransfer来实现数据的存储与捕获
//setData(format,data):
//format:数据类型：text/html text/uri-list
//data:数据:通常来讲时字符串值
ev.dataTransfer.setData('text/html',ev.target.id);
}
document.ondragover=function (ev) {
ev.preventDefault();
}
document.ondrop=function (ev) {
//经过ev.dataTransfer.setData存储的数据。只能在drop事件中获取:getData
var id=ev.dataTransfer.getData('text/html');
ev.target.appendChild(document.getElementById(id));
}
</script>
</body>
</html>
定位在浏览器端是不被容许的，可是在手机端能够apache
navigator.geolocation.getCurrentPosition(success,error,option) success:*成功以后的回调函数 error:* 失败以后的回调函数 postion: 获取当前位置信息的方式
success：获取的地理信息会经过参数传递给回调函数数组
// position.coords.latitude 纬度 //position.coords.longitude 经度 //position.coords.accuracy 精度 // position.coords.altitude 海拔高度
error:出错信息也会传递给回调函数浏览器
function showEerror(error)
{
switch (error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML='User denined the request for Geolocation.'
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML='Location infomation is unavailable.'
break;
case error.TIMEOUT:
x.innerHTML='The request to get user location timed!'
break;
case error.UNKNOWN_ERROR:
x.innerHTML='An unknown error occurred.'
break;
}
}
option参数缓存
enabeHigAccuracy:true/false 是否使用高精度 timeout:设置超时时间，单位ms maxmumAge:能够设置浏览器从新获取去地理位置的时间间隔，单位也是毫秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理定位接口的使用</title>
<style>
</style>
</head>
<body>
<div class="demo" id="demo"></div>
<script>
var x= document.getElementById("demo");
function getLoction(){
if(navigator.geolocation)
{
/*
* getCurrentPosition三个参数：sucdess,error,option
*成功以后的回调函数
* 失败以后的回调函数
* 获取当前位置信息的方式
* */
navigator.geolocation.getCurrentPosition(showPosition,showError,{});
}
}
//获取地理信息成功以后的回调函数，获取的地理信息会经过参数传递给回调函数
// position.coords.latitude 纬度
//position.coords.longitude 经度
//position.coords.accuracy 精度
// position.coords.altitude 海拔高度
function showPosition(postion)
{
x.innerText="Latitude:"+postion.coords.latitude+'<br/>'+
'Longitude:'+position.coords.longitude;
}
//获取失败以后的回调,出错信息也会传递给回调函数
function showEerror(error)
{
switch (error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML='User denined the request for Geolocation.'
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML='Location infomation is unavailable.'
break;
case error.TIMEOUT:
x.innerHTML='The request to get user location timed!'
break;
case error.UNKNOWN_ERROR:
x.innerHTML='An unknown error occurred.'
break;
}
}
getLoction()
</script>
</body>
</html>
若是真要获取地理位置，可使用第三方接口来实现服务器
cookie存储数据大小有限制4K
经过F12 -->applicatons中能够查看到存储的数据 存储的数据跟页面有关系，浏览器只要关闭也会清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>sessionStorage的使用：</h2>
- 存储数据到本地5mb
- setItem(key,value)经过键值对来存储数据
- getItem(key)经过key来获取数据的值,找不到就是空值
- removeItem(key)经过key来删除数据 ,key不存在，不会报错
- clear():清空全部内容 <br>
<input type="text" id="name" value="设置数据">
<input type="button" id="setData" value="设置数据">
<input type="button" id="getData" value="获取数据">
<input type="button" value="删除数据" id="delData">
<script>
//数据存储
document.querySelector('#setData').onclick=function () {
var name=document.querySelector('#name').value;
window.sessionStorage.setItem('username',name);
}
//获取数据
document.querySelector('#getData').onclick=function () {
username=window.sessionStorage.getItem('username');
alert(username);
}
//删除数据
document.querySelector('#getData').onclick=function () {
window.sessionStorage.removeItem('username');
}
</script>
</body>
</html>
不一样浏览器不能够共享数据，同一浏览器能够共享数据
浏览器关闭仍然存在，存在硬盘上的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>localStorage的使用：</h2>
- 存储数据到本地20mb <br>
- setItem(key,value)经过键值对来存储数据 <br>
- getItem(key)经过key来获取数据的值,找不到就是空值 <br>
- removeItem(key)经过key来删除数据 ,key不存在，不会报错<br>
- clear():清空全部内容 <br>
<p>不一样浏览器不能够共享数据，同一浏览器能够共享数据</p>
<p>**浏览器关闭仍然存在，存在硬盘上的**</p>
<input type="text" id="name" value="设置数据">
<input type="button" id="setData" value="设置数据">
<input type="button" id="getData" value="获取数据">
<input type="button" value="删除数据" id="delData">
<script>
//数据存储
document.querySelector('#setData').onclick=function () {
var name=document.querySelector('#name').value;
window.localStorage.setItem('username',name);
}
//获取数据
document.querySelector('#getData').onclick=function () {
username=window.localStorage.getItem('username');
alert(username);
}
//删除数据
document.querySelector('#getData').onclick=function () {
window.localStorage('username');
}
</script>
</body>
</html>
使用HTML5,经过cache manifest文件，能够轻松的建立web离线版本
CACHE:指定焕春的文件清单
NETWORK:下面的配置每一次都许哟啊从新从服务器获取文件清单列表
若是文件没法获取则使用指定的文件进行替代
FALLBACK:#若是文件找不到，指定默认的文件
若是想缓存全部文件能够写一个*
CACHE MANIFEST #CACHE:指定缓存文件路径 #> 若是想缓存全部文件能够写一个* CACHE: ../imgs/297.jpg ../imgs.294.jpg #配置每一次都要从新从服务器获取文件清单列 NETWORK: ../imgs.294.jpg #若是文件找不到，指定默认的文件 FALLBACK: ../imgs/294.jpg ../imgs/default.jpg #若是须要对找不到文件都使用上面的规则替换请指定下面的符号，去掉# #/:
必须使用原生js dom实现,若是使用jquery必须转成dom
播放暂停样式切换
toggleClass('类1 类2')