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.mzph.cn/news/732376.shtml

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

相关文章

Pytorch线性回归实现（原理）

Pytorch线性回归实现（原理）

设置梯度 直接在tensor中设置 requires_gradTrue&#xff0c;每次操作这个数的时候&#xff0c;就会保存每一步的数据。也就是保存了梯度相关的数据。 import torch x torch.ones(2, 2, requires_gradTrue) #初始化参数x并设置requires_gradTrue用来追踪其计算历史 print(x…
阅读更多...
AndroidStudio跑马灯实现

AndroidStudio跑马灯实现

在activity_main.xml中编写如下代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_h…
阅读更多...
meta元数据元素

meta元数据元素

文章目录 元数据Metadatameta标签的四种使用方式meta的属性meta使用示例 HTML <meta> 元素表示那些不能由其他 HTML标签&#xff08; <style>、 <script>等&#xff09;表示的元数据信息。 元数据Metadata Metadata元数据&#xff0c;简单地来说就是描述…
阅读更多...
Linux——权限的理解

Linux——权限的理解

Linux——权限的理解 文章目录 Linux——权限的理解一、shell命令以及运行原理二、Linux权限的概念切换用户对指令提权 三、Linux权限管理1. 文件访问者的分类&#xff08;人&#xff09;2. 文件类型和访问权限&#xff08;事物属性&#xff09;文件类型基本权限文件权限值的表…
阅读更多...
Linux系统安装及简单操作

Linux系统安装及简单操作

目录 一、Linux系统安装 二、Linux系统启动 三、Linux系统本地登录 四、Linux系统操作方式 五、Linux的七种运行级别&#xff08;runlevel&#xff09; 六、shell 七、命令 一、Linux系统安装 场景1&#xff1a;直接通过光盘安装到硬件上&#xff08;方法和Windows安装…
阅读更多...
小白跟做江科大51单片机之DS1302可调时钟

小白跟做江科大51单片机之DS1302可调时钟

原理部分 1.DS1302可调时钟介绍 单片机定时器主要占用CPU时间&#xff0c;掉电不能继续运行 图1 2.原理 图2 内部有寄存器&#xff0c;寄存的时候以时分秒寄存&#xff0c;以通信协议实现数据交互&#xff0c;就可以实现对数据进行访问和读写 3.主要寄存器定义 CE芯片使能…
阅读更多...
js对象 静态方法和实例方法

js对象 静态方法和实例方法

求下面代码的输出结果&#xff1a; 首先先分析一下上面各函数&#xff1a; Person.say function(){console.log("a")} 第一个say()方法是定义在Person函数身上的&#xff0c;我们如果想使用这个方法&#xff0c;可以通过Person().say()来调用 this.say function()…
阅读更多...
【Docker7】Docker安全及https安全认证

【Docker7】Docker安全及https安全认证

Docker安全及https安全认证一、Docker 容器与虚拟机的区别1、隔离与共享2、性能与损耗3、不同点 二、Docker 存在的安全问题1、Docker 自身漏洞2、Docker 源码问题 三、Docker 架构缺陷与安全机制1、容器之间的局域网攻击2、DDoS 攻击耗尽资源2.1 什么叫CC攻击&#xff1f;什么…
阅读更多...
Python实现汉诺塔演示程序

Python实现汉诺塔演示程序

Python实现汉诺塔演示程序 汉诺塔问题 一个板子上有三根柱子以及一些大小各不相同的圆盘。我们分别把这三根柱子叫做起始柱A、辅助柱B及目标柱C&#xff0c;汉诺塔移动圆盘的规则如下&#xff1a; 把起始柱A上所有的圆盘都移动到C柱&#xff0c;且在移动过程中始终保持圆盘从…
阅读更多...
先进电机技术 —— 伺服驱动器与变频器

先进电机技术 —— 伺服驱动器与变频器

一、变频器与伺服驱动器发展趋势 在近年来的技术发展中&#xff0c;变频器和伺服驱动器均呈现出显著的先进性提升和技术融合趋势&#xff0c;以下是一些主要的发展方向&#xff1a; ### 变频器的发展趋势&#xff1a; 1. **智能化与网络化**&#xff1a; - 高级变频器集成…
阅读更多...
【知识分享】自动化测试首选接口自动化？

【知识分享】自动化测试首选接口自动化？

在分层测试的“金字塔”模型中&#xff0c;接口测试属于第二层服务集成测试范畴。 相比UI自动化测试而言&#xff0c;接口自动化测试收益更大&#xff0c;且容易实现&#xff0c;维护成本低&#xff0c;有着更高的投入产出比。因此&#xff0c;项目开展自动化测试的首选一般为接…
阅读更多...
计算机网络(基础篇)复习笔记——体系结构/协议基础（持续更新中......)

计算机网络(基础篇)复习笔记——体系结构/协议基础（持续更新中......)

目录 1 计算机网络基础相关技术Rip 路由更新操作 2 体系结构(OSI 7层, TCP/IP4层)应用层运输层网络层IPv4无分类域间路由选择 CIDRIPV6 数据链路层循环冗余校验CRC协议设备 物理层传输媒体信道复用技术宽带接入技术数据通信 3 网络局域网(以太网Ethernet) 4 通信过程编码:信道极…
阅读更多...
vue router 解决路由带参数跳转时出现404问题

vue router 解决路由带参数跳转时出现404问题

我的页面是从一个vue页面router跳转到另一个vue页面&#xff0c;并且利用windows.open() 浏览器重新创建一个页签。但是不知道为什么有时候可以有时候又不行&#xff0c;经过反复测试与分析&#xff0c;最终发现是因为有一个参数的值里包含了小数点., 小数点是浏览器合法字符&a…
阅读更多...
Pytest测试中的临时目录与文件管理！

Pytest测试中的临时目录与文件管理！

在Pytest测试框架中&#xff0c;使用临时目录与文件是一种有效的测试管理方式&#xff0c;它能够确保测试的独立性和可重复性。在本文中&#xff0c;我们将深入探讨如何在Pytest中利用临时目录与文件进行测试&#xff0c;并通过案例演示实际应用。 为什么需要临时目录与文件&a…
阅读更多...
#KEIL使用

#KEIL使用

关于在调试时&#xff0c;有些局部变量值无法在窗口中查看报错“not in scope"&#xff0c;是被优化掉了&#xff0c;降低优化等级即可。 参考博客&#xff1a; KeilMDK 开发过程中遇到一些奇怪问题记录_keil遇到了不正当的冲突-CSDN博客
阅读更多...
全国保护性耕作/常规耕作农田分类数据集

全国保护性耕作/常规耕作农田分类数据集

基于Sentinel-2遥感产品&#xff0c;使用来自文献调研和目视解译产生的保护性/常规耕作样本点&#xff0c;通过交叉验证方法训练随机森林分类器&#xff0c;生成了2016-2020年全国保护性耕作/常规耕作农田分类数据集。分类代码&#xff1a;0值代表非农田&#xff0c;1值表示第一…
阅读更多...
“轻松入门Electron：一步步构建梦想中的桌面软件

“轻松入门Electron：一步步构建梦想中的桌面软件

在数字化的浪潮中&#xff0c;桌面应用依旧占据着其独特而重要的位置&#xff0c;不论是在企业解决方案、专业工具软件还是个性化应用领域中都是如此。随着技术的演进&#xff0c;创建这些应用的过程已经变得更为简单和可行&#xff0c;尤其是随着Electron等框架的出现。Electr…
阅读更多...
【异常处理】sbt构建Chisel库时出现extracting structure failed:build status:error的解决办法

【异常处理】sbt构建Chisel库时出现extracting structure failed:build status:error的解决办法

文章目录 报错背景&#xff1a;解决思路&#xff1a;①IDEA中配置本地的SBT进行下载②更改下载源为华为的镜像站1. 修改sbtconfig.txt2. 增加repositories文件 ③查看报错信息 总结整理的Scala-Chisel-Chiseltest版本信息对应表 报错背景&#xff1a; 最近在写Chisel时&#x…
阅读更多...
K8s-MySQL主从集群

K8s-MySQL主从集群

K8s-MySQL主从集群 引言 该案例代码均可从https://github.com/WeiXiao-Hyy/k8s_example 获取&#xff0c;欢迎Star&#xff01; 需求 一个“主从复制”的MySQL集群有一个主节点Master有多个从节点Slave从节点需要能水平扩展所以写操作只能在主节点上执行读操作可以在所有节点…
阅读更多...
Navicat Premium：掌控数据库的强大工具

Navicat Premium：掌控数据库的强大工具

在当今数字化的时代&#xff0c;数据管理变得越来越重要。无论您是数据库管理员、开发人员还是普通用户&#xff0c;找到一个高效、易用的数据库管理工具是至关重要的。Navicat Premium for Mac/Win 就是这样一款强大的多协议数据库管理工具&#xff0c;它将为您的数据库管理体…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023