HTML5中接口的使用

最新推荐文章于 2024-04-08 08:09:24 发布

Simple_IDE

最新推荐文章于 2024-04-08 08:09:24 发布

阅读量957

点赞数

分类专栏： HTML 文章标签： javascript html

本文链接：https://blog.csdn.net/simple5960/article/details/108563393

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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>

Simple_IDE

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5中接口的使用

1.全屏接口<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
复制链接

扫一扫

专栏目录