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

HTML5基础2

news 2025/9/14 22:57:32
  1. drag

    1. 可以把拖放事件拆分成4个步骤

      1. 设置元素为可拖放。为了使元素可拖动，把 draggable 属性设置为 true 。

        <img draggable="true">

      2. 拖动什么。ondragstart 和 setData()

        const dragestart = (ev)=>{ev.dataTransfer.setData('play',ev.target.id)}

      3. 放到何处 - ondragover

         const dragover = (ev)=>{ev.preventDefault();}

      4. 进行放置 - ondrop

        const drop = (ev)=>{ev.preventDefault();let data = ev.dataTransfer.getData('play')ev.target.appendChild(document.getElementById(data))}

      5. 完整示例

        <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="div1" style="width: 400px;height: 500px;border:1px solid black;" ondragover="dragover(event)"ondrop="drop(event)"></div><img src="../images/lightoff.png" id="img1" style="width: 200px;height: 300px;" alt="" draggable="true"ondragstart="dragestart(event)">
</body>
<script>const dragestart = (ev)=>{ev.dataTransfer.setData('play',ev.target.id)console.log()}const dragover = (ev)=>{ev.preventDefault();}const drop = (ev)=>{ev.preventDefault();let data = ev.dataTransfer.getData('play')ev.target.appendChild(document.getElementById(data))}
</script>
</html>
  2. 地图
    1. 引入百度api
    2. 获取地图对象
    3. 调用方法
    4. 返回信息
    5. 示例 
      <!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请--><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body><input type="button" onclick="getLocation()" value="确认" /><div id="position"></div></body>
<script type="text/javascript">var x = document.getElementById('position');function getLocation() {// 创建百度地理位置实例，代替 navigator.geolocationvar geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(e) {if(this.getStatus() == BMAP_STATUS_SUCCESS){// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitudex.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;} else {x.innerHTML = 'failed' + this.getStatus();}});}</script>
</html>
  3. datalist
    1. HTML5新增标签 用于input/form
    2. 示例 
      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input list="browsers"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist>
</body>
</html>
  4. localStorage和sessionStorage
    1. localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
    2. sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
    3. 图解

相关文章：

HTML5基础2

drag 可以把拖放事件拆分成4个步骤 设置元素为可拖放。为了使元素可拖动&#xff0c;把 draggable 属性设置为 true 。 <img draggable"true"> 拖动什么。ondragstart 和 setData() const dragestart (ev)>{ev.dataTransfer.setData(play,ev.target.id)} …...

编程日记 2024/3/9 19:30:03

数据结构与算法-希尔排序

引言 在计算机科学中&#xff0c;数据结构和算法是构建高效软件系统的基石。而排序算法作为算法领域的重要组成部分&#xff0c;一直在各种应用场景中发挥着关键作用。今天我们将聚焦于一种基于插入排序的改进版本——希尔排序&#xff08;Shell Sort&#xff09;&#xff0c;深…...

编程日记 2024/3/9 19:29:03

蓝桥杯算法错题记录

这里写目录标题 本文还在跟新&#xff0c;最新更新时间24/3/91. nextInt () next() nextLine() 的注意事项2 . 转换数据类型int ,string,charint -> string , charstring -> int ,charchar -> int , string 进制转换十六进制转化为10 进制 最大公约数 本文还在跟新&am…...

编程日记 2024/3/9 19:28:02

【Python 图像处理 PIL 系列 13 -- PIL 及 Image.convert 函数介绍】

文章目录 Python PIL 介绍PIL 使用介绍PIL convert 介绍PIL convert 使用示例 Python PIL 介绍 PIL 是 Python Image Library 的简称。PIL 库中提供了诸多用来处理图片的模块&#xff0c;可以对图片做类似于 PS&#xff08;Photoshop&#xff09; 的编辑。比如&#xff1a;改变…...

编程日记 2024/3/9 19:27:01

使用docker datascience-notebook进行数据分析

Jupyter/datascience-notebook 简介 jupyter/datascience-notebook 是 Docker Hub 上可用的 Docker 镜像&#xff1a;https://hub.docker.com/。该镜像提供了一个开箱即用的环境&#xff0c;用于数据科学任务&#xff0c;包括&#xff1a; Jupyter Notebook: 一个基于 Web 的…...

编程日记 2024/3/9 19:26:00

VR全景技术在VR看房中有哪些应用，能带来哪些好处

引言&#xff1a; 随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术在房地产行业中的应用也越来越广泛。其中&#xff0c;VR全景技术在VR看房中的运用尤为突出。今天&#xff0c;让我们一起深入探讨VR全景技术在VR看房中的应用及其带来的种种好处。 一、…...

编程日记 2024/3/9 19:22:57

Winform窗体随着屏幕的DPI缩放，会引起窗体变形及字体变形，superTabControl标签字体大小不匹配

一、前言 superTabControl做的浏览器标签（cefsharp）在缩放比例（125%，150%时字体不协调） 物联网浏览器，定制浏览器，多媒体浏览器（支持H264）参考栏目文章即可 二、配置参数 app.manifest参数 dpiAware =true <application xmlns="urn:schemas-microsoft-c…...

编程日记 2024/3/9 19:19:54

java网络编程 01 IP，端口，域名，TCP/UDP, InetAddress

01.IP 要想让网络中的计算机能够互相通信&#xff0c;必须为计算机指定一个标识号&#xff0c;通过这个标识号来指定要接受数据的计算机和识别发送的计算机&#xff0c;而IP地址就是这个标识号&#xff0c;也就是设备的标识。 ip地址组成&#xff1a; ip地址分类&#xff1a;…...

编程日记 2024/3/9 19:16:52

第十篇 - 如何利用人工智能技术做好营销流量整形管理？（Traffic Shaping）- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市​​​​​​​。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先…...

编程日记 2024/3/9 19:14:50

npm ERR! errno -13具体问题处理

npm ERR! errno -13具体问题处理 出现问题的报错 npm ERR! code EACCES npm ERR! syscall open npm ERR! path /Users/xxxx/.npm/_cache/index-v5/c6/06/xxxxx npm ERR! errno -13 npm ERR! npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! …...

编程日记 2024/3/9 19:11:47

【Python】3. 基础语法(2) -- 语句篇

顺序语句 默认情况下, Python 的代码执行顺序是按照从上到下的顺序, 依次执行的. print("1") print("2") print("3")执行结果一定为 “123”, 而不会出现 “321” 或者 “132” 等. 这种按照顺序执行的代码, 我们称为 顺序语句. 这个顺序是很关…...

编程日记 2024/3/9 19:03:41

IPsec VPN之安全联盟

一、何为安全联盟 IPsec在两个端点建立安全通信&#xff0c;此时这两个端点被称为IPsec对等体。安全联盟&#xff0c;即SA&#xff0c;是指通信对等体之间对某些要素的约定&#xff0c;定义了两个对等体之间要用何种安全协议、IP报文的封装方式、加密和验证算法。SA是IPsec的基…...

编程日记 2024/3/9 18:59:38

012集——显示高考天数倒计时——vba实现

以下代码实现高考倒计时&#xff1a; Sub 高考倒计时() 高考日期 CDate("06,07," & Year(Date)) If Date > 高考日期 Then高考日期 CDate("06-07-" & Year(Date) 1) End If 年月日 Year(Date) & "年" & Month(Date) &am…...

编程日记 2024/3/9 18:57:36

1.1 深度学习和神经网络

首先要说的是&#xff1a;深度学习的内容&#xff0c;真的不难。你要坚持下去。 神经网络 这就是一个神经网络。里面的白色圆圈就是神经元。神经元是其中最小的单位。 神经网络 单层神经网络&#xff1a; 感知机 &#xff08;双层神经网络&#xff09; 全连接层&#xff1a; …...

编程日记 2024/3/9 18:56:35

sentinel docker 基础配置学习

1&#xff1a;去官网下载 Releases alibaba/Sentinel GitHub 2&#xff1a;保存到linux 3&#xff1a;编写dockerfile FROM openjdk:8-jreLABEL authors"xxx" #第二步创建一个文件夹Z RUN mkdir /app #第三步复制jar 到app 下 COPY xxxxxx-1.8.7.jar /app/#第四…...

编程日记 2024/3/9 18:54:33

与缓存相关的状态码

与缓存相关的 HTTP 状态码主要涉及客户端和服务器之间对资源缓存的处理和验证&#xff0c;以下是一些常见的与缓存相关的状态码&#xff1a; 1. **200 OK**&#xff1a; - 当服务器成功处理了客户端的请求时&#xff0c;会返回状态码 200 OK。这意味着请求成功&#xff0c;…...

编程日记 2024/3/9 18:53:32

影刀_如何点击桌面图片上的指定区域

问题&#xff1a;如图&#xff0c;桌面上有一张打开的图片&#xff0c;如何点击“J&T极兔快递”的左上角和右下角&#xff1f; 总体流程&#xff1a; 1、用“影刀离线OCR”指令获取目标区域坐标值。 分别是&#xff1a;x1,y1,x2,y2 2、用快捷键ctrlalt键获取图片左上角的…...

编程日记 2024/3/9 18:49:25

linux安装部署mmdetection，亲测可行

安装了两天&#xff0c;最后终于成功&#xff0c;这里有一些注意事项&#xff0c;版本对应啥的&#xff1a; 这里是mmdetection与MMCV的版本对应关系&#xff1a; mmdet与mmcv的版本对应有一些包因为版本问题直接pip下载不了&#xff0c;这里直接跑到官网去复制下载命令&#…...

编程日记 2024/3/9 18:47:23

redis常见问题

目录 一、缓存穿透 二、缓存击穿 三、缓存雪崩 四、redis做为缓存&#xff0c;mysql的数据如何与redis进行同步呢?(双写一致性) 五、redis做为缓存&#xff0c;数据的持久化是怎么做的? 六、数据过期策略 七、数据淘汰策略 八、Redis分布式锁使用场景 九、Redis分布…...

编程日记 2024/3/9 18:45:21

Java虚拟机（JVM）元数据区存放的内容

类元数据 元数据区&#xff08;在HotSpot虚拟机中也称为Metaspace&#xff09;主要存放了类的元数据信息&#xff0c;如类的名称、访问修饰符、常量池、字段描述、方法描述等。 运行时常量池 运行时常量池是每个类或接口的常量池表的运行时表示形式&#xff0c;包含了若干种不…...

编程日记 2024/3/9 18:44:20

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/9/14 11:16:46

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/7 8:52:29

微软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/9/9 10:12:58

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/8 17:56:14

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/11 12:55:02

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/9/8 23:17:56

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/8/30 23:51:46

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/13 0:44:14

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/8/26 17:36:58