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

HTML5高级部分

news 2025/12/15 14:20:27

目录

  • 一、拖拽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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/12/15 8:47:15

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/7 13:42:04

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/12/10 15:33:55

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/12/12 19:38:31

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/12/14 17:38:06

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/12/13 0:29:47

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/12/15 2:28:25