HMTL5新增Api

切图仔

发布于 2022-09-08 17:13:36

4770

发布于 2022-09-08 17:13:36

文章被收录于专栏：生如夏花绚烂

网络状态检测

  //网络连接
        window.addEventListener('online',function(){
           alert('有网')
       })
       window.addEventListener('offline',function(){
           alert('网络断开')
       })

全屏与取消全屏

      /**
       * 全屏显示 webkit moz o ms
       * Node.webkitrequestFullScreen()
      */
     var img = document.querySelector('img')
     var full = document.querySelector('#full')
     full.onclick = function(){
        // img.webkitRequestFullScreen();
        if(img.requestFullScreen){
            img.requestFullScreen()
        } else if (img.webkitRequestFullScreen){
            img.webkitRequestFullScreen() //webkit 
        } else if (img.mozRequestFullScreen){
            img.mozRequestFullScreen() //moz
        } else if (img.msRequestFullscreen){
            img.msRequestFullscreen() //ms 
         
        }else if (img.oRequestFullScreen){
            img.oRequestFullScreen()
        }else{
            alert('您的浏览器不支持全屏')
        }
     }
         //取消全屏Api 与全屏一样需要添加浏览器前缀
         //CancelFullScreen()
     //document.CancelFullScreen()
         
         //伪类选择器
          /**
      * 是否全屏
      * document.IsfullScreen  //true/false
      * 全屏伪类选择器 浏览器前缀 
      * div:-webkit-full-screen{
      * }
      * 
      * /

文件读取

案例图片上传预览

<!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>
    <input type="file" multiple>
    <img src="" alt="">
    <script>
        var file = document.querySelector('input')
        var img  = document.querySelector('img')
        file.onchange = function(){
            console.log(this.files)
            //初始化render对象 
            var render = new FileReader()

            //读取this.files[0]的内容
            render.readAsDataURL(this.files[0])

            //文件内容读取完毕后存储到this.result中
            render.onload = function(){
                img.src = this.result
            }
        }
    </script>
</body>
</html>

拖拽

相关事件

拖动源对象相关事件 ondragstart:源对象开始被拖动 ondrag:源对象在拖动过程中 ondragend:源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件 ondragenter:目标对象被源对象拖动着进入 ondragover:目标对象被源对象拖动着悬停在上方 ondragleave:源对象拖动着离开了目标对象 ondrop:源对象拖动着在目标对象上释放

案例

html结构

 <div class="one">
        <h6 id="one" draggable="true">one</h6>
        <h6 id="two" draggable="true">two</h6>
        <h6 id="three" draggable="true">three</h6>
        <h6 id="four" draggable="true">four</h6>
    </div>
    <div class="two"></div>
    <div class="three"></div>

 document.ondragstart = function(e){
            console.log('源对象开始被拖动')
            //拖拽的时候存储数据 --- 拖拽的对象id
            e.dataTransfer.setData('text/html',e.target.id)
        }
        document.ondrag = function(){
            console.log('源对象被拖中')
        }
        document.ondragend = function(){
            console.log('源对象拖动结束')
        }
        //找到目标对象 设置释放效果
        
        document.ondragenter = function(){
            console.log('源对象拖动进入目标对象')
        }

        document.ondragover = function(e){
            console.log('源对象悬停在目标对象上方')
            return false //清除默认事件 
        }
        document.ondragleave = function(){e
            console.log('源对象从目标对象离开')
        }
        document.ondrop = function(e){
            console.log('源对象释放在目标对象')
            //获取dataTransfer里面的数据
            var id = e.dataTransfer.getData('text/html');
            e.target.appendChild(document.getElementById(id))
        }

效果