HTML5高级部分

最新推荐文章于 2024-05-10 15:47:34 发布

蓝朽

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量872

点赞数 1

分类专栏：前端相关文章标签： html5 前端 html

本文链接：https://blog.csdn.net/lx00000025/article/details/133360335

版权

前端相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、拖拽API

1.1 拖拽元素

页面中设置了draggable="true"的元素可以进行拖拽，默认为false
图片和超链接默认可以被

<!-- 被拖拽的对象 -->
<div class="box1" draggable="true"></div>

1.2 监听事件

ondragstart 开始拖动的时候
ondrag 正在拖动
ondragend 结束拖动
ondragenter 进入目标容器时
ondragover 正在目标容器中拖动
ondragleave 离开目标容器
ondrop 在目标容器中松开鼠标

注：在目标容器中必须在ondragover事件中阻止默认行为，否则不能触发ondrop事件

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 100px;
            width: 200px;
            background-color: skyblue;
        }
        .box2{
            height: 500px;
            width: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- 图片和链接默认可以被拖动 -->
    <!-- 被拖拽的对象 -->
    <div class="box1" draggable="true"></div>
    <!-- 目标对象 -->
    <div class="box2"></div>
    <script>
        //被拖拽的对象
        let box1 = document.querySelector('.box1');
        //目标对象
        let box2 = document.querySelector('.box2');
        //开始拖动
        box1.ondragstart = function(){
            console.log("开始拖动");
        }
        //正在拖动
        box1.ondrag = function(){
            console.log("正在拖动");
        }
        //结束拖动
        box1.ondragend = function(){
            console.log("结束拖动");
        }

        //进入目标容器时
        box2.addEventListener("dragenter",function() {
            console.log("进入目标容器");
        })
        //正在目标容器中拖动
        box2.addEventListener("dragover",function(e) {
            //阻止默认行为，否则不能触发drop事件
            e.preventDefault();
            console.log("正在目标容器中拖动")
        })  
        //离开目标容器时
        box2.addEventListener("dragleave",function() {
            console.log("离开目标容器");
        })
        //释放鼠标时触发
        box2.addEventListener("drop",function() {
            console.log("释放鼠标");
        })
    </script>
</body>
</html>

1.3 dataTransfer传递数据

目的：为了实现数据的交换

dataTransfer常用方法：

setData(key,value) 设置数据
getData(key) 获取数据
setImageDrag(imgElement, xOffset, yOffset) 设置拖拽时显示的图标
clearData(key | ' ') 删除指定数据和全部数据

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dustbin{
            height: 400px;
            width: 100px;
            font-size: 60px;
            text-align: center;
            background-color: gray;
            float: left;
        }
        .dragbox{
            float: left;
            margin-left: 20px;
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
        .dragbox .draglist{
            width: 500px;
            height: 60px;
            line-height: 60px;
            background-color: rgb(175, 173, 173);
            border: 1px dashed rgb(93, 91, 91);
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="dustbin"><br>垃<br>圾<br>箱</div>
    <div class= "dragbox">
        <div class="draglist" title="拖拽我" draggable="true">列表1</div>
        <div class="draglist" title="拖拽我" draggable="true">列表2</div>
        <div class="draglist" title="拖拽我" draggable="true">列表3</div>
        <div class="draglist" title="拖拽我" draggable="true">列表4</div>
        <div class="draglist" title="拖拽我" draggable="true">列表5</div>
        <div class="draglist" title="拖拽我" draggable="true">列表6</div>
    </div> 
    <div class="dragremind"></div>
    <script>
        //源对象
        let draglists = document.querySelectorAll(".draglist");
        //目标对象
        let dustbin = document.querySelector(".dustbin");
        //临时变量
        let dragDom = null;
        draglists.forEach(item => {
            item.ondragstart = function(e){
                //设置数据dataTransfer
                e.dataTransfer.setData("text",e.target.innerHTML);
                let img = new Image();
                img.src = "./image/1.jpg"
                //setDragImage设置拖拽时显示的图片
                e.dataTransfer.setDragImage(img,0,0);
                dragDom = this;
            }
            //没有拖拽到父容器松开了
            item.ondragend = function(e){
                //清楚数据
                e.dataTransfer.clearData('text');
                dragDom = null;
            }
        });
        
        //目标对象
        dustbin.ondragover = function(e){
            e.preventDefault();
        }
        dustbin.ondrop = function(){
            if (dragDom) {
                document.querySelector(".dragremind").innerText = `${dragDom.innerText}被删除了`
                dragDom.remove();
            }
        }
    </script>
</body>
</html>

二、媒体API

2.1 常用监听事件

onplay 当媒体开始播放时触发
onpause 媒体暂定播放触发
onended 媒体播放结束
ontimeupdate 当媒体的播放时间发生变化时触发，通常与进度条等播放控件结合使用
oncanplay 当媒体可以开始播放时触发，表示媒体已经加载到足够的数据以供播放
onloadedmetadata 当媒体的元数据（例如尺寸、时长等）加载完成时触发。
onloadeddata 在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。
onerror 当媒体加载或播放过程中发生错误时触发。

代码示例：

        let mVideo = document.querySelector(".mVideo");
        //当媒体开始播放时触发
        mVideo.onplay = function(){
            console.log("视频开始播放");
        }
        //媒体暂定播放触发
        mVideo.onpause = function(){
            console.log("视频暂停");
        }
        //媒体播放结束
        mVideo.onended = function(){
            console.log("视频结束");
        }
        //当媒体的播放时间发生变化时触发，通常与进度条等播放控件结合使用
        mVideo.ontimeupdate = function(){
            console.log("视频时间发生改变");
        }
        //当媒体可以开始播放时触发，表示媒体已经加载到足够的数据以供播放
        mVideo.oncanplay = function(){
            console.log("视频可以开始播放");
        }
        //当媒体的元数据（例如尺寸、时长等）加载完成时触发。
        mVideo.onloadedmetadata = function(){
            console.log('视频元数据加载完成');
        }
        //当媒体加载或播放过程中发生错误时触发。
        mVideo.onerror = function(){
            console.log("视频发生错误");
        }

2.2 常用API

1.控制条是否显示

mVideo.controls = true;

2.播放视频

mVideo.play();

3.当前媒体元素的播放时间，单位秒

mVideo.currentTime

4.以秒为单位给出媒体的长度

mVideo.duration

5.设置媒体播放时的音量。0 为静音，1 为音量最大时的值。

mVideo.volume = 1

6.指示要在元素中使用的媒体资源的 URL。

mVideo.src = "./video/卡点音乐相册.mp4"

7.暂停媒体的播放

mVideo.pause();

三、画布API

3.1 canvas 标签

<canvas id="cvs" width="400" height="400"></canvas>

3.2 创建canvas对象

//获取canvas元素
let cvs = document.querySelector("#cvs");
//创建canvas对象
let ctx = cvs.getContext('2d');

3.3 常用API

moveTo(x,y) 起点坐标
lineTo(x,y) 终点坐标
strokeStyle 线条颜色
lineWidth 线条宽度
fillStyle 填充颜色
fillRect(x, y, width, height) 绘制填充矩形
strokeRect(x, y, width, height) 绘制空心矩形
clearRect(x, y, width, height) 擦除矩形区域
arc(x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆弧路径的方法
stroke() 绘制当前或已经存在的路径的方法。
fillText(text, x, y) 绘制实心文本
strokeText(text, x, y) 绘制空心文本
beginPath() 创建一个新的路径
closePath() 将笔点返回到当前子路径起始点
clip() 将当前创建的路径设置为当前剪切路径
save() 保存 canvas 全部状态
restore() 弹出顶端的状态

四、地理API

允许网站或应用基于用户的地理位置提供定制的信息。

4.1 方法

getCurrentPosition(success, error, options) 确定设备的位置并返回一个携带位置信息的 Position 对象。
watchPosition(success, error, options) 设备的地理位置发生改变的时候自动被调用,该方法会返回一个 ID
clearWatch(id) 注销监听器

代码示例：

<script>
        //1.判断浏览器是否支持Geolocation API
        if('geolocation' in navigator){
            alert("支持 geolocation")
        }else{
            alert("不支持 geolocation")
        }
        //2.获取位置信息
        navigator.geolocation.getCurrentPosition(res=>{
            console.dir(res);
            console.log(res.coords);
            document.querySelector(".longitude").innerText = `经度:${res.coords.longitude}`
            document.querySelector(".latitude").innerText = `纬度:${res.coords.latitude}`

        },err=>{
            console.log(err);
        },{timeout:3000});
        //3.在设备的地理位置发生改变的时候自动被调用
        let id = navigator.geolocation.watchPosition(res=>{
            console.log(res.coords);
        },err=>{
            console.log(err);
        })
        //4.注销监听器
        navigator.geolocation.clearWatch(id);
    </script>