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…
阅读更多...
软考笔记--系统架构评估

软考笔记--系统架构评估

系统架构评估是在对架构分析、评估的基础上&#xff0c;对架构策略的选取进行决策。它利用数据或逻辑分析技术&#xff0c;针对系统的一致性&#xff0c;正确性&#xff0c;质量属性&#xff0c;规划结果等不同方面&#xff0c;提供描述性&#xff0c;预测性和指令性的分析结果…
阅读更多...
C#协变与逆变：解锁高级编程技巧，轻松提升代码性能

C#协变与逆变：解锁高级编程技巧，轻松提升代码性能

文章目录 协变协变接口的实现逆变里氏替换原则 协变 协变概念令人费解&#xff0c;多半是取名或者翻译的锅&#xff0c;其实是很容易理解的。 比如大街上有一只狗&#xff0c;我说大家快看&#xff0c;这有一只动物&#xff01;这个非常自然&#xff0c;虽然动物并不严格等于…
阅读更多...
【Spring Boot `@Autowired` Annotation】

【Spring Boot `@Autowired` Annotation】

文章目录 1. 使用Qualifier注解2. 使用Primary注解3. 手动注入&#xff08;较少推荐&#xff09; 在Spring Boot中&#xff0c;Autowired注解用于自动装配bean。默认情况下&#xff0c;它按照类型进行装配。当存在多个相同类型的bean时&#xff0c;就会出现以下错误&#xff1a…
阅读更多...
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…
阅读更多...
题目 1971: 外出旅游

题目 1971: 外出旅游

题目描述: 佳佳带着f个水果和m元钱出去玩&#xff0c;每天房屋的租金为x元&#xff0c;佳佳每天早上必须吃一个水果&#xff0c;佳佳通过询问商店的服务人员 得到了水果的价格&#xff0c;每个水果售卖p元。请你计算一下佳佳最多可以在外面待多长时间&#xff1f; 代码: pac…
阅读更多...
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; - 高级变频器集成…
阅读更多...
react hook:useMemo

react hook:useMemo

useMemo在每次重新渲染的时候能够缓存计算的结果。 在初次渲染时&#xff0c;useMemo 返回调用 calculateValue 的结果。 在接下来的渲染中&#xff0c;如果依赖项没有发生改变&#xff0c;它将返回上次缓存的值&#xff1b;否则将再次调用 calculateValue&#xff0c;并返回最…
阅读更多...
Git本地新项目推送到远程仓库

Git本地新项目推送到远程仓库

假设开发了一个新项目&#xff0c;想推送到远程&#xff0c;具体的操作方式和命令如下&#xff1a; &#xff08;使用 git bash&#xff09; 1、切到项目目录中 2、初始化git仓库并在本地提交 //初始化git仓库 git init//将当前目录下的文件添加到仓库&#xff08;缓冲区&…
阅读更多...
【知识分享】自动化测试首选接口自动化？

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

在分层测试的“金字塔”模型中&#xff0c;接口测试属于第二层服务集成测试范畴。 相比UI自动化测试而言&#xff0c;接口自动化测试收益更大&#xff0c;且容易实现&#xff0c;维护成本低&#xff0c;有着更高的投入产出比。因此&#xff0c;项目开展自动化测试的首选一般为接…
阅读更多...
Python 基础语法：基本数据类型（字符串）

Python 基础语法：基本数据类型（字符串）

在日常生活中&#xff0c;我们经常会用文字来记录事物的名称、或记录事情的发展过程等&#xff0c;这些文字类型的数据&#xff0c;就叫做字符串。在未来的写代码的工作中&#xff0c;无论你从事的是哪个方面的编程&#xff0c;字符串操作必不可少&#xff0c;非常重要。 1 字…
阅读更多...
linux系统安装docker

linux系统安装docker

docker安装 docker安装自带源安装docker版本和官方源安装国内源安装新版docker生产docker的环境配置登入登出docker hub国内镜像源 docker安装 自带源安装 CentOS 7 中 Docker 的安装: Docker 软件包已经包括在默认的 CentOS-Extras 软件源(联网使用centos7u2自带网络Yum源)里…
阅读更多...
计算机网络(基础篇)复习笔记——体系结构/协议基础（持续更新中......)

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

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

Copyright @ 2022~2023