前端全栈学习第十天-H5

最新推荐文章于 2020-11-24 01:00:38 发布

推开世界的门

最新推荐文章于 2020-11-24 01:00:38 发布

阅读量207

点赞数

分类专栏：前端学习笔记文章标签：学习笔记 h5

本文链接：https://blog.csdn.net/qq_38845858/article/details/86737624

版权

前端学习笔记专栏收录该内容

45 篇文章 5 订阅

订阅专栏

01-HTML-5网络监听接口

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //    1:ononline：网络连通时触发这个事件
    window.addEventListener("online", function () {
        alert("网络连通");
    })
    //2：onoffline：网络断开触发这个事件
    window.addEventListener("offline", function () {
        alert("网络连接失败");
    })
</script>
</body>

</html>

02-HTML-5全屏接口的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <img src="../../HTML/img/ha.png" alt=""/>
    <input type="button" value="全屏" id="full"/>
    <input type="button" value="退出全屏" id="cancelFull"/>
    <input type="button" value="是否全屏" isFull/>
</div>
<script>
    //    全屏操作的主要方法和属性
    //1.requestFullScreen();开启全屏显示
    //不同浏览器要添加不同的前缀
    //chrome ： webkit firefox： moz  ie： ms opera： o
    //2.canaelFullScreen();退出全屏显示
    //3.fullScreenElement();是否是全屏状态
    var div = document.querySelector("div");
    //    添加三个按钮的点击事件
    //    全屏操作
    document.querySelector("#full").onclick = function () {
//        div.requestFullScreen();
//        div.webkitRequestFullScreen();
//        div.mozRequestFullScreen();
//        div.msRequestFullScreen();
//        div.oRequestFullScreen();
        if (div.requestFullScreen) {
            div.requestFullScreen();
        }
        else if (div.webkitRequestFullScreen) {
            div.webkitRequestFullScreen();
        }
        else if (div.mozRequestFullScreen) {
            div.mozRequestFullScreen();
        }
        else if (div.msRequestFullScreen) {
            div.msRequestFullScreen();
        }
        else if (div.oRequsetFullScreen) {
            div.oRequestFullScreen();
        }

    }
    //    退出全屏
    document.querySelector("#cancelFull").onclick = function () {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.msCancelFullScreen) {
            document.msCancelFullScreen();
        }
        else if (document.oCancelFullScreen) {
            document.oCancelFullScreen();
        }
    }
//    是否是去全屏状态
</script>


</body>
</html>

03-HTML-5FileReader的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--展示图片-->
<!--src：指定路径，(资源定位;url)，src请求外部资源，一般来说是服务器资源，意味着，他需要向服务器发送请求
会占用服务器资源-->
<!--<img src="" alt=""/>-->
<!--需求：及时预览-->
<!--&lt;!&ndash;及时：当用户选择完图片就立刻进行预览处理&ndash;&gt; onchange-->
<!--预览：通过文件读取对象的readAsDataURL();-->
<form action="">
    <input type="file" name="myFile" id="myFile" onchange="getFileContent()"/>
    <input type="submit" value="点我"/>
</form>
<img src="" alt=""/>
<script>
    function getFileContent() {
//        console.log(123);
//  1：  创建文件读取对象
        var reader = new FileReader();
//        2：“读取文件，获取DataURL值

        var file = document.querySelector("#myFile").files;
        reader.readAsDataURL(file[0]);
//获取数据
//        FileReader：提供一个完整的事件模型，用来捕获读取文件时的状态
//        onabort：读取文件中断时触发
//        onerror：读取文件错误时触发
//        onload：文件读取成功完成事触发、
//        onloadend：读取完成时触发，无论成功失败
//        onloadstart：开始读取时触发
//        onprogress：读取文件过程中持续触发
        reader.onload = function () {
//    console.log(reader.result);
//    展示
            document.querySelector("img").src = reader.result;
        }
    }
</script>
<!--FileRrader:读取文件内容-->
<!--1：readAsText():读取文本文件(可以用TXT打开的文件)，默认编码是utf-8-->
<!--2：readAsBinaryString():读取任意类型的文件，返回的是二进制字符串。-->
<!--这个方法不是用来读取文件展示给用户，看而是存贮文件。-->
<!--3：readAsDataURL():读取文件获取一段以data开头的字符串，-->
<!--这段字符串的本质就是DataURL,是一种将文件(一般指图像或者能够嵌入到文档的文件格式)嵌入到文档的一种方案，-->
<!--DataURL是将资源转化为base64编码的字符串，-->
<!--并且将这些内容直接存储在url中>>优化网站的加载速度，和执行效率。-->
<!--4：abort：中断读取-->

</body>
</html>

03-HTML-5拖拽接口的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            float: left;
            margin-right: 30px;
        }

        .div2 {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid red;
        }

        p {
            margin: 0;
            padding: 0;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="div1">
    <!--在h5中如果想拖拽元素，就必须为元素添加draggable=“true”图片会让超链接默认就可以拖拽-->
    <p draggable="true">请把我拖进去</p>
</div>
<div class="div2"></div>
<script>
    //学习拖拽，重点就是学习拖拽事件
    var p = document.querySelector("p");
    //    应用于被拖拽元素事件
    p.ondragstart = function (e) {
//        console.log("我被ondragstart了");
//        通过事件捕获来获取当前被拖拽的子元素
//        console.log(e.target);
//        事件源参数
        e.target.style.opacity=0.3;
        e.target.parentNode.style.borderWidth="5px";
    }
    p.ondragend = function () {
        console.log("我被ondragend了");
    }
    p.ondragleave = function () {
        console.log("我被ondragleave了");
    }
    p.ondrag = function () {
        console.log("我被ondrag了");
    }
    //ondrag
    //ondragstart
    //ondragleave
    //ondragend
    //    应用于目标元素事件
    var div2 = document.querySelector(".div2");
    div2.ondragenter = function () {
        console.log("我被目标ondragenter了");
    }
    div2.ondragover = function (e) {
//            console.log("我被目标ondragover了");
//            如果想触发ondrop事件，就必须在ondropover这里阻止浏览器的默认行为
        e.preventDefault();
    }
    //    浏览器默认会阻止ondrop事件，我们必须在ondropover中阻止浏览器的默行为
    div2.ondrop = function () {
        console.log("我被目标ondrop了");
//            添加拖拽元素到目标元素
        div2.appendChild(p);
    }
    div2.ondragleave = function () {
        console.log("我被目标ondragleave了");
    }
    //    ondragenter
    //    ondragover
    //    ondrop
    //    ondragleave
    //    拖回去
    var div1 = document.querySelector(".div1");
    div1.ondragenter = function () {
        console.log("我被目标ondragenter了");
    }
    div1.ondragover = function (e) {
//            console.log("我被目标ondragover了");
//            如果想触发ondrop事件，就必须在ondropover这里阻止浏览器的默认行为
        e.preventDefault();
    }
    //    浏览器默认会阻止ondrop事件，我们必须在ondropover中阻止浏览器的默行为
    div1.ondrop = function () {
        console.log("我被目标ondrop了");
//            添加拖拽元素到目标元素
        div1.appendChild(p);
    }
    div1.ondragleave = function () {
        console.log("我被目标ondragleave了");
    }
</script>
</body>
</html>

04-HTML-5拖拽接口的使用-通用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            float: left;
            margin-right: 30px;
        }

        .div2 {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid red;
        }

        p {
            margin: 0;
            padding: 0;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="div1">
    <!--在h5中如果想拖拽元素，就必须为元素添加draggable=“true”图片会让超链接默认就可以拖拽-->
    <p draggable="true">请把我拖进去</p>
</div>
<div class="div2"></div>
<script>
    //学习拖拽，重点就是学习拖拽事件
    var p = document.querySelector("p");
    //    应用于被拖拽元素事件
    p.ondragstart = function (e) {
//        console.log("我被ondragstart了");
//        通过事件捕获来获取当前被拖拽的子元素
//        console.log(e.target);
//        事件源参数
        e.target.style.opacity=0.3;
        e.target.parentNode.style.borderWidth="5px";
    }
    p.ondragend = function () {
        console.log("我被ondragend了");
    }
    p.ondragleave = function () {
        console.log("我被ondragleave了");
    }
    p.ondrag = function () {
        console.log("我被ondrag了");
    }
    //ondrag
    //ondragstart
    //ondragleave
    //ondragend
    //    应用于目标元素事件
    var div2 = document.querySelector(".div2");
    div2.ondragenter = function () {
        console.log("我被目标ondragenter了");
    }
    div2.ondragover = function (e) {
//            console.log("我被目标ondragover了");
//            如果想触发ondrop事件，就必须在ondropover这里阻止浏览器的默认行为
        e.preventDefault();
    }
    //    浏览器默认会阻止ondrop事件，我们必须在ondropover中阻止浏览器的默行为
    div2.ondrop = function () {
        console.log("我被目标ondrop了");
//            添加拖拽元素到目标元素
        div2.appendChild(p);
    }
    div2.ondragleave = function () {
        console.log("我被目标ondragleave了");
    }
    //    ondragenter
    //    ondragover
    //    ondrop
    //    ondragleave
    //    拖回去
    var div1 = document.querySelector(".div1");
    div1.ondragenter = function () {
        console.log("我被目标ondragenter了");
    }
    div1.ondragover = function (e) {
//            console.log("我被目标ondragover了");
//            如果想触发ondrop事件，就必须在ondropover这里阻止浏览器的默认行为
        e.preventDefault();
    }
    //    浏览器默认会阻止ondrop事件，我们必须在ondropover中阻止浏览器的默行为
    div1.ondrop = function () {
        console.log("我被目标ondrop了");
//            添加拖拽元素到目标元素
        div1.appendChild(p);
    }
    div1.ondragleave = function () {
        console.log("我被目标ondragleave了");
    }
</script>
</body>
</html>

05-HTML-5sessionStorage的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
sessionStorage的使用：存储数据到本地，大小为5mb
setItem(key,value) 存储数据，以键值对的方式存储数据
1：这个数本质是存储在当前页面的内存中
2：生命周期是当前页面
getItem(key) 获取数据 ，通过指定名称的key获取对应的value值
removeItem() 删除数据，通过指定名称的key删除对应的value值
clear() 清空所有存储的内容 <br/>
<input type="text" id="userName"/>
<input type="button" value="存储数据" id="setData"/>
<input type="button" value="获取数据" id="getData"/>
<input type="button" value="删除数据" id="removeData"/>
<script>
//    存储数据
document.querySelector("#setData").onclick=function(){
//    获取用户名
    var name = document.querySelector("#userName").value;
//    存储数据
    window.sessionStorage.setItem("userName",name);
}
//    获取数据
    document.querySelector("#getData").onclick=function(){
         var name = window.sessionStorage.getItem("userName");
        alert(name);
    }
//    删除数据
    document.querySelector("#removeData").onclick=function(){
        window.sessionStorage.removeItem("userName");
    }
</script>
</body>
</html>

06-HTML-5localStorage的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
localSrorage:
1：存储的内容大概20mb
2：在不同浏览器不可用共享，但是 在同一浏览器的不同页面可以共享
3：永久生效，他的数据存储在硬盘上，不会随着浏览器的关闭和页面的关闭而清除，需要手动清除
getItem(key) 获取数据 ，通过指定名称的key获取对应的value值
removeItem() 删除数据，通过指定名称的key删除对应的value值
clear() 清空所有存储的内容 <br/>
<input type="text" id="userName"/>
<input type="button" value="存储数据" id="setData"/>
<input type="button" value="获取数据" id="getData"/>
<input type="button" value="删除数据" id="removeData"/>
<script>
    //    存储数据
    document.querySelector("#setData").onclick=function(){
//    获取用户名
        var name = document.querySelector("#userName").value;
//    存储数据
        window.localStorage.setItem("userName",name);
    }
    //    获取数据
    document.querySelector("#getData").onclick=function(){
        var name = window.localStorage.getItem("userName");
        alert(name);
    }
    //    删除数据
    document.querySelector("#removeData").onclick=function(){
        window.localStorage.removeItem("userName");
    }
</script>
</body>
</html>

07-HTML-5应用缓存

<!DOCTYPE html>
<html>
<head lang="en" minifest="demo.appcache">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            width: 300px;
            display: block;
        }
    </style>
</head>
<body>
<img src="../../jd/images/col2.png" alt=""/>
<img src="../../jd/images/col3t.png" alt=""/>
<img src="../../jd/images/col3o.png" alt=""/>
<img src="../../jd/images/col3w.png" alt=""/>
</html>

demo.appcache

CACHE MANIFEST
#上面代码第一句必须是当前文档第一句
#后面写注释

#需要缓存的文件清单列表
CACHE:
#下面就是要缓存的清单列表
../../jd/images/col2.png
../../jd/images/col3t.png
#配制每一次都需要从服务器获取的清单列表
NETWORK:
../../jd/images/col3o.png


#配制如果文件无法获取，则使用指定的文件进行替代
../../jd/images/col3t.png ../../jd/images/col3q.png

推开世界的门

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端全栈学习第十天-H5

01-HTML-5网络监听接口&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&amp
复制链接

扫一扫