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

HTML5高级部分

news 2025/10/31 7:25:20

目录

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

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/10/10 5:21:09

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/10/27 15:07:18

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/10/25 21:14:56

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/7/7 9:39:54

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2025/10/29 13:58:47

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

编程新知 2025/10/22 19:54:33