前端全栈学习第十天-H5

淩亂°似流年 2021-09-18 00:28 537阅读 0赞

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>
    
    
    
    
    
    
    <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>
    
    
    
    
    
    
    
    
    
    
    </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">
        
        <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拖拽接口的使用-通用

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