当前位置： 首页 > news >正文

HTML5高级部分

news 2026/5/13 8:12:11

目录

  • 一、拖拽API
    • 1.1 拖拽元素
    • 1.2 监听事件
    • 1.3 dataTransfer传递数据
  • 二、媒体API
    • 2.1 常用监听事件
    • 2.2 常用API
  • 三、画布API
    • 3.1 canvas 标签
    • 3.2 创建canvas对象
    • 3.3 常用API
  • 四、地理API
    • 4.1 方法

一、拖拽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){//设置数据dataTransfere.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

  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 APIif('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>

相关文章：

HTML5高级部分

目录 一、拖拽API1.1 拖拽元素1.2 监听事件1.3 dataTransfer传递数据 二、媒体API2.1 常用监听事件2.2 常用API 三、画布API3.1 canvas 标签3.2 创建canvas对象3.3 常用API 四、地理API4.1 方法 一、拖拽API 1.1 拖拽元素 页面中设置了draggable"true"的元素可以进…...

编程日记 2023/9/30 20:01:48

浏览器输入 URL 并回车发生了什么

本文节选自我的博客&#xff1a;浏览器输入 URL 并回车发生了什么 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是MilesChen&#xff0c;偏前端的全栈开发者。&#x1f4dd; CSDN主页&#xff1a;爱吃糖的猫&#x1f525;&#x1f4e3; 我的博客&#xff1a;爱吃糖…...

编程日记 2023/9/30 20:00:46

asp.net core mvc 文件上传，下载，预览

//文件上传用到了IformFile接口 1.1文件上传视图 <form action"/stu/upload" method"post" enctype"multipart/form-data"><input type"file" name"img" /><input type"submit" value"上传&…...

编程日记 2023/9/30 19:58:44

Axios有哪些常用的方法？

Axios是一个常用的JavaScript库&#xff0c;用于进行HTTP请求。它提供了一组简洁而强大的方法来发送各种类型的请求&#xff0c;并处理响应数据。以下是Axios中一些常用的方法及其格式&#xff1a; GET请求&#xff1a; axios.get(url[, config]).then(response > {// 请求…...

编程日记 2023/9/30 19:57:42

PL/SQL+cpolar公网访问内网Oracle数据库

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…...

编程日记 2023/9/30 19:56:40

stable diffusion和gpt4-free快速运行

这是一个快速搭建环境并运行的教程 stable diffusion快速运行gpt快速运行 包含已经搭建好的环境和指令&#xff0c;代码等运行所需。安装好系统必备anaconda、conda即可运行。 stable diffusion快速运行 github: AUTOMATIC1111/稳定扩散网络UI&#xff1a;稳定扩散网页用户界…...

编程日记 2023/9/30 19:55:39

分享三个国内可用的免费GPT-AI网站

AIchatOS国内的不需要梯子 AItianhu同上 国内百度的文心一言一样非常优秀...

编程日记 2023/9/30 19:51:34

使用SDKMAN在Linux系统上安装JDK

本文使用的Linux发行版为Rocky Linux 9.2&#xff0c;可以当做CentOS的平替产品。 SDKMAN是一个sdk包管理工具&#xff0c;通过自带的命令可以快速切换软件环境&#xff0c; 官网地址&#xff1a;https://sdkman.io/。 1、安装sdkman&#xff1a; # curl -s "https://ge…...

编程日记 2023/9/30 19:50:32

MySQL(8) 优化、MySQL8、常用命令

一、MySQL优化 从上图可以看出SQL及索引的优化效果是最好的&#xff0c;而且成本最低&#xff0c;所以工作中我们要在这块花更多时间。 服务端参数配置&#xff1b; max_connections3000 连接的创建和销毁都需要系统资源&#xff0c;比如内存、文件句柄&#xff0c;业务说的支持…...

编程日记 2023/9/30 19:49:30

前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（三）

思维导图 全选案例 大按钮控制小按钮 小按钮控制大按钮 css伪类选择器checked <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><…...

编程日记 2023/9/30 19:48:29

嵌入式汇编大合集

嵌入式汇编 内联汇编的基本格式: asm volatile( /* volatile : 可选，禁止编译器对汇编代码进行优化 */"汇编指令" /* 汇编指令间使用\n分隔 */:"=限制符"(输出参数):"限制符"(输入参数):保留列表 )共四个部分：汇编语句，输出部分，输入部分…...

编程日记 2023/9/30 19:44:25

C#WPF框架MvvMLight应用实例

本文实例演示C#WPF框架MvvMLight应用实例。 目录 一、MVVM概述 二、MVVMLight概述 三、使用MVMLight框架 一、MVVM概述 MVVM概述MVVM是Model-View-ViewModel的简写，主要目的是为了解耦视图（View）和模型（Model）。...

编程日记 2023/9/30 19:42:22

【JVM】双亲委派模型

双亲委派模型 1. 什么是双亲委派模型2. 双亲委派模型的优点 1. 什么是双亲委派模型 提到 类加载 机制&#xff0c;不得不提的一个概念就是“双亲委派模型”。 双亲委派模型指的就是 JVM 中的类加载器如何根据类的全限定名找到 .class 文件的过程 类加载器: JVM 里面专门提供…...

编程日记 2023/9/30 19:40:18

多叉树+图实现简单业务流程

文章目录 场景整体架构流程业务界面技术细节小结 场景 这次遇到一个需求,大致就是任务组织成方案,方案组织成预案,预案可裁剪调整.预案关联事件等级配置,告警触发预案产生事件.然后任务执行是有先后的,也就是有流程概念. 整体架构流程 方案管理、预案管理构成任务流程的基础条…...

编程日记 2023/9/30 19:39:17

Word | 简单可操作的快捷公式编号、右对齐和引用方法

1. 问题描述 在理工科论文的写作中&#xff0c;涉及到大量的公式输入&#xff0c;我们希望能够按照章节为公式进行编号&#xff0c;并且实现公式居中&#xff0c;编号右对齐的效果。网上有各种各样的方法来实现&#xff0c;操作繁琐和简单的混在一起&#xff0c;让没有接触过公…...

编程日记 2023/9/30 19:37:15

leetCode 123.买卖股票的最佳时机 III 动态规划 + 状态压缩

123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09; 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff0…...

编程日记 2023/9/30 19:34:13

JavaScript计算两个时间相差多少个小时的封装函数

js中计算两个时间相差小时数 在JavaScript中&#xff0c;你可以使用Date对象来处理日期和时间。下面是一个函数&#xff0c;它接受两个时间字符串作为参数&#xff0c;并返回两者之间的时间差&#xff08;以小时为单位&#xff09;&#xff1a; function calculateHours(time…...

编程日记 2023/9/30 19:33:12

Qt 画自定义饼图统计的例子

先给出结果图&#xff0c;这个例子是将各种事件分类然后统计的其比例&#xff0c;然后画饼图显示出来 这个是我仿照官方给的例子&#xff0c;让后自己理解后&#xff0c;修改的&#xff0c;要生成饼图&#xff0c;需要QT的 charts 支持&#xff0c;安装QT 没有选择这个的&#…...

编程日记 2023/9/30 19:31:09

【数据结构】链表与LinkedList

作者主页&#xff1a;paper jie 的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…...

编程日记 2023/9/30 19:28:05

Flink RoaringBitmap去重

1、RoaringBitmap的依赖 <!-- 去重大哥--> <dependency><groupId>org.roaringbitmap</groupId><artifactId>RoaringBitmap</artifactId><version>0.9.21</version> </dependency> 2、Demo去重 package com.gwm.driver…...

编程日记 2023/9/30 19:27:03

安卓全局音效处理：RootlessJamesDSP原理、配置与调优实战

1. 项目概述&#xff1a;在移动音频领域实现高自由度音效处理如果你是一名对手机音质有追求的发烧友&#xff0c;或者是一位喜欢折腾系统级音频设置的安卓用户&#xff0c;那么“RootlessJamesDSP”这个名字你很可能不会陌生。简单来说&#xff0c;这是一个无需获取安卓系统最高…...

编程新知 2026/5/13 7:52:50

告别生产翻车！用Altium Designer 21的DRC规则为你的PCB设计上好“保险”

Altium Designer 21 DRC规则深度实战&#xff1a;从设计规范到生产就绪的PCB 在硬件开发领域&#xff0c;PCB设计完成后到实际生产前的最后一道防线就是设计规则检查&#xff08;DRC&#xff09;。很多工程师将DRC视为简单的软件功能验证&#xff0c;但实际上&#xff0c;它承担…...

编程新知 2026/5/13 5:16:49

bittorrent-tracker与WebTorrent生态：现代浏览器P2P下载的终极指南 [特殊字符]

bittorrent-tracker与WebTorrent生态&#xff1a;现代浏览器P2P下载的终极指南 &#x1f30a; 【免费下载链接】bittorrent-tracker &#x1f30a; Simple, robust, BitTorrent tracker (client & server) implementation 项目地址: https://gitcode.com/gh_mirrors/bit/…...

编程新知 2026/5/13 4:18:20

Day3：拆箱ROS2|一起搭建机器人开发车间

Day1:一起学习了ros2是什么以及ros2为机器人开发提供了哪些核心功能. Day2一起安装了ros2。 接下来自然会想到如果现在要用ROS2开发一个机器人&#xff0c;应该怎样开始&#xff1f; 下面我们以雷达小车机器人举例说明&#xff1a; 1、需要为机器人创建一个【工作空间】作为顶层…...

编程新知 2026/5/13 4:06:06

NSA 5G：从双连接到网络切片，解析5G组网演进之路

1. 非独立组网5G&#xff1a;一场关于“先有鸡还是先有蛋”的行业博弈如果你在2017年的世界移动通信大会&#xff08;MWC&#xff09;现场&#xff0c;可能会感到一丝困惑。前一年&#xff0c;整个行业还在为5G描绘一幅彻底颠覆4G、开启万物互联新纪元的宏伟蓝图。然而一年后&a…...

编程新知 2026/5/13 1:58:49

自治性、反应性、学习能力：AI Agent的关键特性

自治性、反应性、学习能力：AI Agent的关键特性——从蚂蚁觅食到通用智能体的进化之路 关键词 AI Agent, 自治性, 反应性, 强化学习, 记忆机制, 环境交互, 通用人工智能萌芽 摘要 想象一下：你有一个能自己帮你规划周末露营路线（自治性）、中途遇到暴雨自动切换到附近民宿…...

编程新知 2026/5/13 1:13:14

本地化AI代码助手部署指南：从模型选型到性能调优

1. 项目概述&#xff1a;一个面向开发者的本地化AI代码助手最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“JPeetz/Hermes-Studio”。乍一看名字&#xff0c;可能会联想到希腊神话里的信使赫尔墨斯&#xff0c;或者某个设计软件。但点进去你会发现&#xff0c;这其实是一…...

编程新知 2026/5/13 1:03:10

离线语音识别性能提升：Vosk API的3大架构优化策略实践

离线语音识别性能提升&#xff1a;Vosk API的3大架构优化策略实践 【免费下载链接】vosk-api Offline speech recognition API for Android, iOS, Raspberry Pi and servers with Python, Java, C# and Node 项目地址: https://gitcode.com/GitHub_Trending/vo/vosk-api …...

编程新知 2026/5/13 0:42:41

通过Taotoken官方价折扣与活动价降低大模型API使用门槛

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken官方折扣与活动价降低大模型API使用门槛 对于开发者而言&#xff0c;大模型API的成本是项目落地和持续迭代中必须考量…...

编程新知 2026/5/13 0:10:11

Super IO插件：Blender文件操作效率革命，从繁琐拖拽到智能粘贴

Super IO插件&#xff1a;Blender文件操作效率革命&#xff0c;从繁琐拖拽到智能粘贴 【免费下载链接】super_io blender addon for copy paste import / export 项目地址: https://gitcode.com/gh_mirrors/su/super_io Super IO是一款革命性的Blender插件&#xff0c;通…...

编程新知 2026/5/12 22:33:26