HTML5和CSS3二接口
Posted 酒茶白开水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5和CSS3二接口相关的知识，希望对你有一定的参考价值。
代码下载地址
网络状态改变事件
<script>
/*online：网络联通时触发*/
window.addEventListener("online", function ()
alert("网络联通了");
);
/*offline：网络断开时触发*/
window.addEventListener("offline", function ()
alert("网络断开了");
);
</script>
全屏显示接口
<body>
<div>
<img src="images/huliena.jpeg" alt="" width="810" height="540"> <br/>
<input type="button" id="fullscreen" value="开启全屏">
<input type="button" id="exitFullscreen" value="退出全屏">
<input type="button" id="isFullscreen" value="是否全屏">
</div>
<script>
/*全屏操作方法和属性：
1、requestFullscreen()：开启全屏显示
不同浏览器需要加不同前缀：chrome/safari-webkit，firefox-moz，ie-ms，oprea-o
2、exitFullscreen()：退出全屏显示
不同浏览器也需要加上述不同前缀，退出全屏只能使用document来实现
3、fullscreenElement：是否是全屏显示状态
不同浏览器也需要加上述不同前缀，也只能使用document来判断
*/
window.onload = function ()
var div = document.querySelector("div");
/*全屏操作*/
document.querySelector("#fullscreen").onclick = function ()
/*使用能力测试添加不同浏览器前缀*/
if (div.requestFullscreen)
div.requestFullscreen();
else if (div.webkitRequestFullscreen)
div.webkitRequestFullscreen();
else if (div.mozRequestFullscreen)
div.mozRequestFullscreen();
else if (div.msRequestFullscreen)
div.msRequestFullscreen();
;
/*退出全屏*/
document.querySelector("#exitFullscreen").onclick = function ()
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if (document.mozExitFullscreen)
document.mozExitFullscreen();
else if (document.msExitFullscreen)
document.msExitFullscreen();
/*判断是否是全屏*/
document.querySelector("#isFullscreen").onclick = function ()
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement)
console.log("true");
else
console.log("false")
</script>
</body>
文件操作接口
<body>
<form action="">
<!--及时预览：
1、及时：选择文件后立刻预览处理——onchange
2、预览：通过读取对象的完成
-->
文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent();">
</form>
<!--src：指定路径（资源定位——url），请求的是外部资源，一般来说是服务器资源，意味着需要像服务器发送请求，占用服务器资源。-->
<img src="" alt="">
<script>
/*fileReader：读取文件内容
：读取文本文件，返回字符串（默认编码utf8）
：读取任意类型的文件，返回二进制字符串，不是用来读取文件给用户看而是用来存储文件。例如——读取文件获取二进制数据传给后台，
后台收到数据再存储。
：读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件嵌入到文档的方案。DataURL是
将资源转化为base64编码的字符串，并且将这些内容直接存储在URL中。优化网页加载速度和执行效率。
：中断执行效率。
* */
function getFileContent()
/*读取文件：
1、创建读取对象
2、获取文件，读取DataURL
没有任何返回值——void，读完文件后会将存储在文件读取对象的result中
需要传递一个参数binary large object文件(图片或其他可以嵌入到文档的类型)
文件存储在file表单元素的files属性中，它是一个数组
3、获取数据——fileReader提供完整的事件模型用来捕获读取文件的状态
onabort：读取文件中断触发
onerror：读取文件错误时触发
onload：读取文件成功时触发
onloadend：读取文件完成时触发，无论成功还是失败
onloadstart：开始读取触发
onloadprogress：读取过程中触发
* */
var reader = new FileReader();
var file = document.querySelector("#myFile").files[0];
reader.readAsDataURL(file)
reader.onload = function ()
document.querySelector("img").src = reader.result;
</script>
</body>
拖拽接口
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.div1
border: 1px solid red;
width: 300px;
height: 300px;
float: left;
position: relative;
p
margin: 0;
background-color: blue;
div.div2
border: 1px solid cyan;
width: 300px;
height: 300px;
float: left;
margin-left: 50px;
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，拖拽元素必须添加draggable="true"属性，图片和超链接默认可以拖拽-->
<p id="pe" draggable="true">我是文字，拖我！</p>
</div>
<div class="div2" id="div2">
</div>
<script>
/*被拖拽元素事件：
ondrag：拖拽过程中调用——持续触发
ondragstart：拖拽开始时调用
ondragend：拖拽结束调用
ondragleave：鼠标离开拖拽元素原本位置/松开鼠标时调用
* */
var pe = document.querySelector("#pe");
pe.ondrag = function ()
console.log("正在拖拽");
pe.ondragstart = function ()
console.log("开始拖拽");
pe.ondragend = function ()
console.log("结束拖拽");
pe.ondragleave = function ()
console.log("鼠标离开");
/*目标元素事件：
ondragenter：应用于目标元素，当拖拽元素进入时调用
ondragover：应用于目标元素，当停留在目标元素上时调用
ondrop：应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave：应用于目标元素，当鼠标离开目标元素时调用
* */
var div2 = document.querySelector("#div2");
div2.ondragenter = function ()
console.log("已经进入")
div2.ondragover = function (e)
/*console.log("正在停留")*/
/*如果想触发ondrap事件，必须在ondragover事件中禁止浏览器默认行为*/
e.preventDefault()
div2.ondrop = function ()
console.log("松开鼠标")
div2.appendChild(pe);
div2.ondragleave = function ()
console.log("离开目标")
/*给div1加上往回拖拽的功能*/
var div1 = document.querySelector("#div1");
div1.ondragover = function (e)
e.preventDefault();
div1.ondrop = function ()
div1.appendChild(pe);
</script>
</body>
拖动多个元素以及在拖曳中使用dataTransfer代替全局变量：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
padding: 0;
margin: 0;
div.div1
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
p
margin-top: 5px;
background-color: blue;
div.div2
border: 1px solid cyan;
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
div.div3
border: 1px solid purple;
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，拖拽元素必须添加draggable="true"属性，图片和超链接默认可以拖拽-->
<p id="pe" draggable="true">我是文字，拖我！</p>
<p id="pe1" draggable="true">我也是文字，拖我！</p>
</div>
<div class="div2" id="div2">
</div>
<div class="div3" id="div3">
</div>
<script>
var pe = document.querySelector("#pe");
var obj = null;
var target = null;
document.ondragstart = function (e)
/*通过事件捕获来获取当前被拖拽的子元素*/
target = e.target.parentNode;
e.target.style.alpha = 0.2;
e.target.parentNode.style.borderWidth = "5px";
obj = e.target;
/*通过datatransfer来实现数据的存储与获取
* format：数据类型text/plain、text/urilist
* data：数据一般来说是字符串值
* */
e.dataTransfer.setData("text/plain", e.target.id);
document.ondragend = function (e)
e.target.style.alpha = 1.0;
target.style.borderWidth = "1px";
document.ondragover = function (e)
/*console.log("正在停留")*/
/*如果想触发ondrap事件，必须在ondragover事件中禁止浏览器默认行为*/
e.preventDefault()
document.ondrop = function (e)
/*console.log(obj);
e.target.appendChild(obj);
console.log(e.target);*/
/*通过dataTransfer.setData存储的数据只能在ondrop中取*/
var id = e.dataTransfer.getData("text/plain");
var element = document.getElementById(id);
if (e.target.class=="")
e.target.appendChild(element);
</script>
</body>
</html>
地理定位接口
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.demo
width: 200px;
height: 200px;
border: 1px solid cyan;
</style>
</head>
<body>
<div class="demo", id="demo"></div>
<script>
var demo = document.getElementById("demo");
function getLoction()
demo.innerHTML = "定位";
/*能力测试：是否有定位功能*/
if (navigator.geolocation)
/*
successCallback：获取定位信息成功回调
errorCallback：失败回调
options：设置获取数据方式（对象）
anableHighAccuracy：ture/false是否开启高精度
timeout：设置超时时间，单位毫秒ms
maximumAge：设置浏览器重新获取地理信息的时间，单位毫秒ms
*/
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, anableHighAccuracy: false, timeout: 3000);
else
demo.innerHTML = "Geolocation is not surpported by this browser."
/*定位成功，会将地理信息传递给回调函数*/
function successCallback(positon)
console.log(positon);
/*
* latitude：经度
* longitude：纬度
* accuracy：精度
* altitude：海拔高度*/
demo.innerHTML = "Latitude: " + positon.coords.latitude + "<br/>Longitude: " + positon.coords.longitude
function errorCallback(error)
console.log(error);
switch (error.code)
/*用户拒绝定位请求*/
case error.PERMISSION_DENIED:
demo.innerHTML = "User denied the request for geoloction.";
break;
/*定位信息不可用*/
case error.POSITION_UNAVAILABLE:
demo.innerHTML = "Position information is unavailable.";
break;
/*请求超时*/
case error.TIMEOUT:
demo.innerHTML = "The request to get user location time out.";
break;
/*未知错误*/
case error.UNKNOWN_ERR:
demo.innerHTML = "An unknow error occured.";
break;
getLoction();
</script>
</body>
</html>
百度地图接口：
<body>
<div id="map1_container">
<div id="allmap1"></div>
</div>
<div id="map2_container">
<div id="allmap2"></div>
</div>
<script>
// 加载第一张地图
var map1 = new BMapGL.Map('allmap1'); // 创建Map实例1
var point1 = new BMapGL.Point(116.404, 39.915);
map1.centerAndZoom(point1, 9);
map1.enableScrollWheelZoom();
// 加载第二张地图
var map2 = new BMapGL.Map('allmap2'); // 创建Map实例2
var point2 = new BMapGL.Point(116.404, 39.915);
map2.centerAndZoom(point2, 15);
map2.enableScrollWheelZoom();
</script>
</body>
</html>
存储接口
sessionStorage存储数据：
<body>
<!--
sessionStorage：存储数据到本地，容量5MB左右
1、本质存储在本页内存中
2、生命周期为当前页面，关闭后就会被清除，前进/后退不受影响
setItem(key, value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，（如果找不到对应的key，就会获得null）
removeItem(key)：删除数据
clear：清空所以存储内容
-->
key：<input type="text", id="key"> <br/>
value：<input type="text" id="value"> <br/>
<input type="button" id="setData" value="存储数据" onclick="saveAction()">
<input type="button" id="getData" value="获取数据" onclick="getAction()">
<input type="button" id="removeData" value="移除数据" onclick="removeAction()">
<input type="button" id="clearData" value="清空数据" onclick="clearAction()">
<script>
function saveAction()
console.log("saveAction");
var key = document.querySelector("#key").value;
var value = document.querySelector("#value").value;
window.sessionStorage.setItem(key, value);
function getAction()
console.log("getAction");
var key = document.querySelector("#key").value;
alert(window.sessionStorage.getItem(key));
function removeAction()
console.log("removeAction");
var key = document.querySelector("#key").value;
window.sessionStorage.removeItem(key);
function clearAction()
console.log("clearAction");
window.sessionStorage.clear();
</script>
</body>
localStorage存储数据：
<body>
<!--
localStorage：容量20MB左右
1、不同浏览器不能共享数据，但是同一个浏览器的不同窗口可以共享数据
2、永久生效，不会随着页面关闭而删除，如果想删除必须手动删除
setItem(key, value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，（如果找不到对应的key，就会获得null）
removeItem(key)：删除数据
clear：清空所以存储内容
-->
key：<input type="text", id="key"> <br/>
value：<input type="text" id="value"> <br/>
<input type="button" id="setData" value="存储数据" onclick="saveAction()">
<input type="button" id="getData" value="获取数据" onclick="getAction()">
<input type="button" id="removeData" value="移除数据" onclick="removeAction()">
<input type="button" id="clearData" value="清空数据" onclick="clearAction()">
<script>
function saveAction()
console.log("saveAction");
var key = document.querySelector("#key").value;
var value = document.querySelector("#value").value;
window.localStorage.setItem(key, value);
function getAction()
console.log("getAction");
var key = document.querySelector("#key").value;
alert(window.localStorage.getItem(key));
function removeAction()
console.log("removeAction");
var key = document.querySelector("#key").value;
window.localStorage.removeItem(key);
function clearAction()
console.log("clearAction");
window.localStorage.clear();
</script>
</body>
应用程序缓存
<!--manifest="应用程序缓存清单文件的路径"，建议文件扩展名为appcache，该文件的本质就是文本文件-->
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img
width: 200px;
display: block;
</style>
</head>
<body>
<img src="images/one.png" alt="">
<img src="images/two.png" alt="">
<img src="images/three.png" alt="">
<img src="images/four.png" alt="">
<!--
通过cache manifest文件可以创建web应用的离线版本
优势：1、配置需要缓存的资源，2、网络无连接仍可用，3、本地读取资源，提升访问速度，增强用户体验，4、减少请求，减轻服务器压力
基础实现：
1、在html标签中包含manifest属性
2、创建配置appcache文件
-->
</body>
</html>
manifest配置文件：
CACHE MANIFEST
# 上面这句标记当前文件是缓存清单文件，第一句必须是这句
# 需要缓存的文件清单
CACHE:
../images/one.png
../images/two.png
# 每次都需要重新从服务器获取的资源文件清单
NETWORK:
../images/three.png
# *: 代表所有文件
# 如果文件无法获取则使用指定的文件替代
FALLBACK:
../images/fou.png ../images/huliena.jpeg
# /: 代表所有文件
以上是关于HTML5和CSS3二接口的主要内容，如果未能解决你的问题，请参考以下文章