HTML5基础2

  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. 图解

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/272281.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[云原生] k8s之存储卷

[云原生] k8s之存储卷

一、emptyDir存储卷 当Pod被分配给节点时&#xff0c;首先创建emptyDir卷&#xff0c;并且只要该Pod在该节点上运行&#xff0c;该卷就会存在。正如卷的名字所述&#xff0c;它最初是空的。Pod 中的容器可以读取和写入emptyDir卷中的相同文件&#xff0c;尽管该卷可以挂载到每…
阅读更多...
如何不丢精度保存PPT中的图片，实测有效

如何不丢精度保存PPT中的图片，实测有效

1.在powerpoint软件中 文件-》选项 -》高级-》设置为不压缩&#xff0c;且默认输出为最高 2.导入对应图片后&#xff0c;右键导出图片&#xff0c;选择.emf文件 3.使用windows自带的画图工具打开.emf文件&#xff0c;ctrls另存为.png文件 此方法亲测可以生成清晰度很高的图片
阅读更多...
python：布伊山德U检验（Buishand U test，BUT）突变点检测（以NDVI时间序列为例）

python：布伊山德U检验（Buishand U test，BUT）突变点检测（以NDVI时间序列为例）

作者：CSDN @ _养乐多_ 本文将介绍布伊山德U检验（Buishand U test，BUT）突变点检测代码。以 NDVI 时间序列为例。输入数据可以是csv，一列NDVI值，一列时间。代码可以扩展到遥感时间序列突变检测（突变年份、突变幅度等）中。 结果如下图所示， 文章目录 一、准备数据二、…
阅读更多...
【JavaEE进阶】 @Transactional详解

【JavaEE进阶】 @Transactional详解

文章目录 &#x1f343;前言&#x1f332;rollbackFor&#xff08;异常回滚属性&#xff09;&#x1f384;事务隔离级别&#x1f6a9;MySQL事务隔离级别&#x1f6a9;Spring事务隔离级别 &#x1f38b;Spring事务传播机制&#x1f6a9;什么是事务传播机制&#x1f6a9;事务有哪…
阅读更多...
spark 实验二 RDD编程初级实践

spark 实验二 RDD编程初级实践

目录 一. pyspark交互式编程示例&#xff08;学生选课成绩统计&#xff09; 该系总共有多少学生&#xff1b; 该系DataBase课程共有多少人选修&#xff1b; 各门课程的平均分是多少&#xff1b; 使用累加器计算共有多少人选了DataBase这门课。 二.编写独立应用程序实现数…
阅读更多...
关于Python读取Excel表格中的内容

关于Python读取Excel表格中的内容

1、准备 首先准备好Excel表&#xff0c;并向里面填充好内容 2、相关算法 import pandas as pd# file_path rE:\data.xlsx # r对路径进行转义&#xff0c;windows需要 file_path rdata.xlsx# 这行代码括号里的head0&#xff0c;表示excel文件中第一行是表头&#xff0c;…
阅读更多...
解决ChatGPT发送消息没有反应

解决ChatGPT发送消息没有反应

ChatGPT发消息没反应 今天照常使用ChatGPT来帮忙码代码&#xff0c;结果发现发出去的消息完全没有反应&#xff0c;即不给我处理&#xff0c;也没有抱任何的错误&#xff0c;按浏览器刷新&#xff0c;看起来很正常&#xff0c;可以查看历史对话&#xff0c;但是再次尝试还是一…
阅读更多...
MySQL安装使用（mac）

MySQL安装使用（mac）

目录 一、下载MySQL 二、环境变量 三、启动 MySql 四、初始化密码设置 一、下载MySQL 打开 MySql 官方下载页面 我是macOS12&#xff0c;所以选择了8.0.30 下载完成之后&#xff0c;打开安装&#xff0c;一直下一步安装完成&#xff0c;在最后安装完成时&#xff0c;会弹出…
阅读更多...
《赵玉平说职场智慧》读书笔记

《赵玉平说职场智慧》读书笔记

目录 一、宋江是如何成为笼络人心的领导 二、给你一个干的理由——宋江的精神激励策略 三、团队如何应对这种多样化的挑战 帮领导解决难题 帮领导打退强敌 替领导四处出席 帮领导做好杂事 帮领导打响名气 四、小人难养&#xff0c;小心唯上 五、如何拒绝&#xff1f; …
阅读更多...
Python和Google Colab进行卫星图像二维小波变化和机器学习

Python和Google Colab进行卫星图像二维小波变化和机器学习

2D 小波分解是图像处理中的一种流行技术，使用不同的滤波器将图像分解为不同的频率分量（“近似”和“细节”系数）。该技术对于各种图像处理任务特别有用，例如压缩、去噪、特征提取和边缘检测。 在本文中，我们将演示如何在 Google Colab 中使用 Python 下载高分辨率样本卫星…
阅读更多...
什么是MAE和MSE？

什么是MAE和MSE？

平均绝对误差&#xff08;Mean Absolute Error&#xff0c;MAE&#xff09;和平均方差误差&#xff08;Mean Squared Error&#xff0c;MSE&#xff09;是常用的评价回归模型性能的指标。它们用于衡量模型预测值与真实值之间的差异。 在深度学习领域&#xff0c;MAE 和 MSE 是…
阅读更多...
python使用selenium webdriver chrome

python使用selenium webdriver chrome

安装selenum包 pip install selenium 安装chrome驱动 查看chrome版本 安装驱动 下载地址&#xff1a;https://googlechromelabs.github.io/chrome-for-testing/#stable 找到符合版本的驱动下载&#xff0c;解压&#xff0c;把解压后的路径加入PATH环境变量中&#xff1a; …
阅读更多...
单片机为什么需要时钟？2种时钟电路对比？

单片机为什么需要时钟？2种时钟电路对比？

目录 一、晶体振荡器&#xff08;Crystal Oscillator&#xff09;的核心知识 二、单片机为什么需要时钟电路&#xff1f; 三、单片机的时钟电路方案 01、外部晶振方案 02、内部晶振方案 四、总结 单片机研发设计的项目中&#xff0c;它的最小电路系统包含 电源电路复位…
阅读更多...
MySQL安装与卸载

MySQL安装与卸载

安装 1). 双击官方下来的安装包文件 2). 根据安装提示进行安装(全部默认就可以) 安装MySQL的相关组件&#xff0c;这个过程可能需要耗时几分钟&#xff0c;耐心等待。 输入MySQL中root用户的密码,一定记得记住该密码 配置 安装好MySQL之后&#xff0c;还需要配置环境变量&am…
阅读更多...
技术选型思考：分库分表和分布式DB（TiDB/OceanBase） 的权衡与抉择

技术选型思考：分库分表和分布式DB（TiDB/OceanBase） 的权衡与抉择

在当今数据爆炸的时代&#xff0c;数据库作为存储和管理数据的核心组件&#xff0c;其性能和扩展性成为了企业关注的重点。随着业务的发展和数据量的不断增长&#xff0c;传统的单库单表架构逐渐暴露出性能瓶颈和扩展性限制。为了应对这些挑战&#xff0c;企业常常需要在分库分…
阅读更多...
【Redis知识点总结】（三）——Redis持久化机制、内存淘汰策略、惰性删除机制

【Redis知识点总结】（三）——Redis持久化机制、内存淘汰策略、惰性删除机制

Redis知识点总结&#xff08;三&#xff09;——Redis持久化机制、内存淘汰策略、惰性删除机制 Redis持久化RDBAOFAOF与RDB的对比混合持久化 内存淘汰策略惰性删除机制 Redis持久化 Redis有两种数据持久化的方式&#xff0c;一种是RDB、一种是AOF。 RDB RDB是内存快照&#…
阅读更多...
Python学习日记之学习turtle库（下 篇）

Python学习日记之学习turtle库（下 篇）

前言&#xff1a; 书接上篇&#xff0c;我们继续来了解Python内置库 turtle功能库。在前面的文章中&#xff0c;我们初步的了解了一下 turtle库&#xff0c;画布和画笔相关的函数&#xff0c;那么我们继续来深入了解一下吧。 详情见&#xff1a; Python学习日记之学习turtle库…
阅读更多...
练习3-softmax分类(李沐函数简要解析)与d2l.train_ch3缺失的简单解决方式

练习3-softmax分类(李沐函数简要解析)与d2l.train_ch3缺失的简单解决方式

环境为:练习1的环境 网址为:https://www.bilibili.com/video/BV1K64y1Q7wu/?spm_id_from333.1007.top_right_bar_window_history.content.click 代码简要解析 导入模块 导入PyTorch 导入Torch中的nn模块 导入d2l中torch模块 并命名为d2l import torch from torch import nn…
阅读更多...
Pytorch学习 day07（神经网络基本骨架的搭建、2D卷积操作、2D卷积层）

Pytorch学习 day07（神经网络基本骨架的搭建、2D卷积操作、2D卷积层）

神经网络基本骨架的搭建 Module&#xff1a;给所有的神经网络提供一个基本的骨架&#xff0c;所有神经网络都需要继承Module&#xff0c;并定义_ _ init _ _方法、 forward() 方法在_ _ init _ _方法中定义&#xff0c;卷积层的具体变换&#xff0c;在forward() 方法中定义&am…
阅读更多...
SpringBoot整合Redis实现分布式锁

SpringBoot整合Redis实现分布式锁

SpringBoot整合Redis实现分布式锁 分布式系统为什么要使用分布式锁&#xff1f; 首先&#xff0c;分布式系统是由多个独立节点组成的&#xff0c;这些节点可能运行在不同的物理或虚拟机器上&#xff0c;它们通过网络进行通信和协作。在这样的环境中&#xff0c;多个节点可能同…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023