• HTML5高级部分

    目录

    一、拖拽API

    1.1 拖拽元素

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

    
<div class="box1" draggable="true">div>

    • 1
    • 2

    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>Documenttitle>
    <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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    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>Documenttitle>
    <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">列表1div>
        <div class="draglist" title="拖拽我" draggable="true">列表2div>
        <div class="draglist" title="拖拽我" draggable="true">列表3div>
        <div class="draglist" title="拖拽我" draggable="true">列表4div>
        <div class="draglist" title="拖拽我" draggable="true">列表5div>
        <div class="draglist" title="拖拽我" draggable="true">列表6div>
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82

    二、媒体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("视频发生错误");
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    2.2 常用API

    1.控制条是否显示

    mVideo.controls = true;

    • 1

    2.播放视频

    mVideo.play();

    • 1

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

    mVideo.currentTime

    • 1

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

    mVideo.duration

    • 1

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

    mVideo.volume = 1

    • 1

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

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

    • 1

    7.暂停媒体的播放

    mVideo.pause();

    • 1

    三、画布API

    3.1 canvas 标签

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

    • 1

    3.2 创建canvas对象

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

    • 1
    • 2
    • 3
    • 4

    3.3 常用API

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

    四、地理API

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

    4.1 方法

    1. getCurrentPosition(success, error, options) 确定设备的位置并返回一个携带位置信息的 Position 对象。
    2. watchPosition(success, error, options) 设备的地理位置发生改变的时候自动被调用,该方法会返回一个 ID
    3. 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
  • 相关阅读:
    学习JS闭包
    influxdb 中得 fields 与 tag 区别总结
    三千字回顾ES6
    云存储架构——打造安全的企业级数据流转平台技术方案
    腻子粉怎么选？
    如何做到一套FPGA工程无缝兼容两款不同的板卡？
    nodejs清空文件内容
    SQL基础理论篇（八）：视图
    合并区间：解决区间重叠问题的高效算法
    移动安全赋能化工能源行业智慧转型
  • 原文地址：https://blog.csdn.net/lx00000025/article/details/133360335