【HTML5高级第三篇】drag拖拽、音频视频、defer/async属性、dialog应用

文章目录

    • 一、拖拽事件
      • 1.1 拖拽事件
      • 1.2 案例:拖拽丢弃图片
    • 二、音频和视频
    • 三、defer 与 async 属性
      • 3.1 概述
      • 3.2 示例一:
      • 3.3 示例二:
    • 四、dialog 元素

一、拖拽事件

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

1.1 拖拽事件

  • ondrag: 拖拽

  • ondragenter: 拖拽进入

  • ondragleave: 拖拽离开

  • ondragstart: 拖拽开始

  • ondragend: 拖拽结束

  • ondragover:悬浮

  • ondrop: 丢弃事件

    该事件有一个bug,dargover事件中的默认行为阻止了ondrop事件不能够执行,所以要给一个元素添加该事件,必须要给该元素添加ondragover事件并阻止默认事件

var img = document.querySelector("img");//ondrag 拖拽事件
// img.ondrag = function(e){
//     console.log("ondrag...");
//     // this.style.left = e.clientX + "px";
//     // this.style.top = e.clientY + "px";
// }// ondragstart 拖拽开始
img.ondragstart = function(){console.log("拖拽开始...")
}
// ondragend: 拖拽结束
img.ondragend = function(e){console.log("拖拽结束...",e)// this.style.left = e.clientX + "px";// this.style.top = e.clientY + "px";
}// // ondragenter: 拖拽进入
// img.ondragenter = function(){
//     console.log("拖拽进入....")
// }// // ondragleave: 拖拽离开
// img. ondragleave = function(){
//     console.log("拖拽离开....")
// }// ondragover:悬浮
img.ondragover = function(e){e.//阻止默认事件//preventDefault()[dom标准写法(ie678不兼容)]//ie678用returnValue//或者利用return false也能阻止默认行为,没有兼容问题(只限传统注册方式)preventDefault();console.log("拖拽悬浮....")
}// ondrop: 丢弃事件
img.ondrop = function(){console.log("丢弃成功....")
}
//ondrop 丢弃事件有一个 bug 需要 ondragover 配合使用,然后再 ondragover 中阻止默认行为  才能触发ondrop

1.2 案例:拖拽丢弃图片

<img src="./images/1.png" alt="" id="drop1">
<img src="./images/trash.png" alt="" id="trash">
<script>//将页面中的图片拖到垃圾桶中丢弃var drop1 = document.getElementById("drop1");var trash = document.getElementById("trash");var elem = null;drop1.ondragstart = function(){elem = this;}// 垃圾桶丢弃事件trash.ondragover = function(e){e.preventDefault();}trash.ondrop = function(){// drop1.remove()elem.remove();
}
</script>

二、音频和视频

  • play() 播放音频或视频

  • pause() 暂停播放

  • audio.volume 获取音量在这里插入图片描述
    上面报错,超出[0,1]范围,也就是说音量范围在 0-1之间,那就是 0.1 ,0.2 …

  • audio.muted 设置是否静音,默认是false,非静音状态 设置true,为静音状态

  • muted 属性是一个 boolean(布尔) 属性。

  • muted 属性设置或返回音频/视频是否应该被静音(关闭声音)。

  • audio.currentTime 获取和设置当前播放进度

  • audio.duration 获取播放总时间

html代码:

<!-- <audio src="./video/3.mp3" controls id="audio"></audio> -->
<video src="./video/2.mp4" controls id="audio"></video>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="add">音量+</button>
<button id="reduce">音量-</button>
<button id="muted">静音</button>
<div id="bar"><div class="progress"></div><div class="block"></div><div class="complete"></div>
</div>

css代码:

#bar{width: 450px;height: 50px;background-color: red;position: relative;
}.progress{width: 430px;height: 6px;background-color: blue;position: absolute;left: 10px;top: 25px;transform: translateY(-50%);
}.block{width: 10px;height: 20px;background-color: orange;position: absolute;left: 10px;top: 25px;transform: translateY(-50%);/* transition:all .1s; */
}.complete{/* width: 300px; */height: 6px;background-color: orange;position: absolute;left: 10px;top: 25px;transform: translateY(-50%);
}

JS代码:

$("#play").onclick = function(){$("#audio").play();
}$("#pause").onclick = function(){$("#audio").pause();
}$("#add").onclick = function(){// var vol = $("#audio").volume;// vol += 0.1;// $("#audio").volume = vol > 1 ?  vol = 1 : vol;// 使用小数可以实现音量的增减 但是JS有精度损失问题  所以能不用则不用var vol = $("#audio").volume * 10; // [0,1] * 10 = [1,10]vol = ++vol > 10 ? vol = 10 : vol;$("#audio").volume = vol / 10;console.log($("#audio").volume)
}$("#reduce").onclick = function(){// var vol = $("#audio").volume;// vol -= 0.1;// $("#audio").volume = vol < 0 ?  vol = 0 : vol;var vol = $("#audio").volume * 10;vol = --vol > 10 ? vol = 10 : vol;$("#audio").volume = vol / 10;console.log($("#audio").volume)
}$("#muted").onclick = function(){$("#audio").muted ? this.innerHTML = "静音" : this.innerHTML = "恢复";$("#audio").muted = !$("#audio").muted;
}$(".block").onmousedown = function(){$(".progress").onmousemove = function(e){// console.log(e.clientX)var ml = e.clientX - 10;$(".block").style.left = ml + "px";$(".complete").style.width = ml + "px";var r = ml / this.clientWidth;console.log(r)$("#audio").currentTime = $("#audio").duration * r;}
}function $(selector){return document.querySelector(selector);
}

浏览器:

音频:

在这里插入图片描述

视频:

在这里插入图片描述

三、defer 与 async 属性

3.1 概述

在 HTML5 之前,加载页面过程中,如果某个 script 标签引入一个外部的 js 脚本文件,浏览器在读取该 js 脚本过程中会暂停页面的加载工作,发送一个请求去下载 js 脚本文件,脚本下载完毕后才继续执行页面的加载工作。如果脚本文件比较庞大,那么脚本的下载工作必然会成为页面加载时一个性能方面的瓶颈。

在 HTML5 中,针对 script 元素,新增 defer 与 async 属性,来加快页面的加载速度。当使用这两个属性时,浏览器发出下载脚本的请求并开始下载工作后,会立即继续执行页面的加载工作。脚本下载完毕时触发一个 onload 事件,通过监听该事件来指定当脚本文件下载完毕后所需要执行的一些操作。

两个属性的区别仅在于何处执行 onload 事件处理函数:

  • 使用 async 属性,脚本下载完毕后,立即执行 onload 事件处理函数。引入多个脚本文件且都添加 async 属性时,按照脚本下载时间执行脚本文件(不按照代码书写顺序执行)
  • 使用 defer 属性,脚本下载完毕后,等待页面全部加载完毕后,才执行 onload 事件处理函数。引入多个脚本文件且都添加 defer 属性时,则在页面加载完毕后按照代码中外部脚本的引用顺序依次执行对应的 onload 事件处理函数(不按照脚本下载时间顺序执行)

注意:由于外部脚本文件的下载工作也属于整个页面加载工作的一部分,所以外部脚本文件的 onload 事件处理函数优先于浏览器窗口对象(window 对象)或 body 元素的 onload 时间处理函数执行。

3.2 示例一:

对比两个属性使用时较未使用时页面加载速度

脚本文件代码:

function myInit(){let x = "示例文字,很多的样子...";alert(x);
}

script引入时三种情况:

<script src="./js/test.js" onload="myInit()"></script>
<script src="./js/test.js" defer onload="myInit()"></script>
<script src="./js/test.js" async onload="myInit()"></script>

浏览器 Timeline 中观察三种情况页面的加载时间:

在这里插入图片描述

3.3 示例二:

在页面中引入两个外部脚本文件,test.js 脚本文件内容较多,test2.js 脚本文件内容较少。对这两个外部脚本文件均使用 async 或 defer属性。观察这两个引入文件的执行顺序。

<script src="./js/test.js" defer onload="myInit()"></script>
<script src="./js/test2.js" defer onload="myInit2()"></script>// 或<script src="./js/test.js" async onload="myInit()"></script>
<script src="./js/test2.js" async onload="myInit2()"></script>

四、dialog 元素

dialog 元素代表一个对话框。

默认情况下,dialog 元素处于隐藏状态,可以在 JS 脚本中使用元素的 show 方法显示 dialog 元素,可以使用元素的 close 方法隐藏 dialog 元素。

如果想要以模态框(模式对话框)的形式显示 dialog ,则需要使用元素的 showModal() 方法。

如下,点击“打开对话框”按钮,弹出模态框;点击模态框中的“关闭”按钮,关闭当前模态框:

在这里插入图片描述

在这里插入图片描述

HTML代码:

<!-- dialog对话框,元素默认处于隐藏状态,可以在脚本中使用元素的show方法显示dialog元素,close方法隐藏dialog元素 -->
<button id="open">打开对话框</button>
<dialog id="dg"><h1>用户登录</h1><form action="#"><p><label for="uname">用户名:</label><input type="text" placeholder="请输入用户名"></p><p><label for="pwd">密码:</label><input type="password" placeholder="请输入密码"></p><p><button id="login-btn">登录</button><button id="close-btn">关闭</button></p></form>
</dialog>

CSS代码:

*{margin: 0;padding: 0;}
#dg{width: 30%;padding: 20px 10px;text-align: center;line-height: 3;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);
}label{display: inline-block;width: 100px;text-align: right;
}#dg button{margin: 0 10px;
}

JS代码:

let open = document.getElementById("open"),dg = document.getElementById("dg"),closeBtn = document.getElementById('close-btn');open.onclick = function(){// show() 显示dialog元素// dg.show();// showModal() 以模态框的形式显示dialog元素dg.showModal();
}closeBtn.onclick = function(){// close() 方法隐藏dialog元素dg.close();
}

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

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

相关文章

637. 二叉树的层平均值

637. 二叉树的层平均值 题目-简单难度示例1. bfs 题目-简单难度 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 示例 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&…

爬虫逆向实战(29)-某蜂窝详情页(cookie、混淆、MD5、SHA)

一、数据接口分析 主页地址&#xff1a;某蜂窝 1、抓包 通过抓包可以发现数据是静态的&#xff0c;在html中。 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无cookie是否加密&#xff1f; 通过查看“c…

Windows wsl2安装Ubuntu

wsl&#xff08;Windows Subsystem for Linux&#xff09;即适用于Windows的Linux子系统&#xff0c;是一个实现在Windows 10 / 11上运行原生Linux的技术。 wsl2 为其迭代版本&#xff0c;可以更好的在Windows上运行Linux子系统。 这里以 Windows 11 安装Ubuntu作为示例。 开启…

kafka学习-消费者

目录 1、消费者、消费组 2、心跳机制 3、消费者常见参数配置 4、订阅 5、反序列化 基本概念 自定义反序列化器 6、位移提交 6.1、自动提交 6.2、手动提交 同步提交 异步提交 7、再均衡 7.1、定义与基本概念 7.2、缺陷 7.3、如何避免再均衡 7.4、如何进行组内分…

电脑同时连接有线和无线网络怎么设置网络的优先级

电脑同时连接有线和无线网络怎么设置网络的优先级&#xff1a; 我们知道在 笔记本电脑系统 中&#xff0c;可以通过有线或无线网络进行联网。如果电脑在有线网络和无线网络同时存在的情况&#xff0c;应该怎么设置有线网络优先连接呢?对此我们提供下面的方法可以让电脑在有Wi…

链路追踪Skywalking快速入门

目录 1 Skywalking概述1.1 微服务系统监控三要素1.2 什么是链路追踪1.2.1 链路追踪1.2.2 OpenTracing1、数据模型&#xff1a;2、核心接口语义 1.3 常见APM系统1.4 Skywalking介绍1、SkyWalking 核心功能&#xff1a;2、SkyWalking 特点&#xff1a;3、Skywalking架构图&#x…

【C++】string类模拟实现上篇(附完整源码)

目录 前言1. string的基本结构2. 构造函数、析构函数2.1 构造函数的实现2.1.1带参构造函数 2.2析构函数2.3无参构造函数2.4无参和带参构造函数合并 3. string的遍历3.1 operator[ ]3.2迭代器模拟实现 (简单实现&#xff09;3.3 const迭代器模拟实现 4. 数据的增删查改4.1 reser…

基于TensorFlow 2.3.0 的手势识别系统设计

一、开发环境 Windows 10PyCharm 2021.3.2Python 3.7TensorFlow 2.3.0 二、制作数据集&#xff0c;作者使用了10个类别的手势数集据 三、开始训练模型&#xff0c;作者使用自己开发的软件进行训练模型&#xff0c;方便快捷。软件介绍及下载地址&#xff1a; 手把手教你使用T…

原生js之dom表单改变和鼠标常用事件

那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件. 关于onchange方法 onchange方法在鼠标输入完后点击任何非输入框位置时触发.触发时即可改变原有输入框的值. out 、leave、over、down、up鼠标方法 当用…

KMP超高效匹配算法

简介&#xff1a; KMP算法是一种改进的字符串匹配算法&#xff0c;其中&#xff0c;KMP算法的运用核心是利用匹配失败后的信息&#xff0c;最大进度的减少模式串与目标串的匹配次数以达到快速匹配的效果。算法与暴力求解的改进在于每当一趟匹配过程中出现的字符比较不相等时&am…

Django创建应用、ORM的进阶使用及模型类数据库迁移

1 Django项目创建第一个应用 Django 项目就是基于 Django 框架开发的 Web 应用&#xff0c;它包含了一组配置和多个应用&#xff0c;我们把应用称之为 App&#xff0c;在前文中对它也做了相应的介绍&#xff0c;比如 auth、admin&#xff0c;它们都属于 APP。 一个 App 就是一…

postman token 请求头添加

思路&#xff1a; 1、登录成功后将 得到的token设置为集合变量 2、在需要携带Authorization的请求头上使用该集合变量 关键代码 const responseData pm.response.json(); if(responseData.code 1) {// 获取tokenconst {data:{token}} responseData// 设置为集合变量pm.colle…

C# 实现电子签名

本项目基于Emgu.CV&#xff08;C#下OpenCv的封装&#xff09;开发的&#xff0c;编译器最新版Vs2022&#xff0c;编译环境x86 直接看效果图 1.主页面 2.我们先看手写的方式&#xff1a; 点击确认就到主界面&#xff0c;如下 &#xff1a; 点击自动适配-&#xff0c;再点击生成…

《C++设计模式》——创建型

前言 创建型为了创建东西才是有用的&#xff0c;创建型设计模式使用的场景&#xff1a; 1、创建一个东西&#xff1b; 2、可重复利用&#xff1b; 3、灵活性高&#xff0c;代码可因地制宜。 Factory Method(工厂模式) 工厂模式将目的将创建对象的具体过程屏蔽隔离起来&#…

go channel实践与源码探索(初始化、发送消息、接收消息、关闭)

文章目录 概要一、并发编程1.1、Actor模型1.2、CSP模型 二、Go Channel实践三、源码分析3.1、初始化3.2、发送消息3.3、接收消息3.4、关闭通道 总结 概要 通道&#xff08;Channel&#xff09;是Go语言提供的协程之间通信与同步的方式。我们知道在并发编程&#xff08;多进程、…

时序分解 | MATLAB实现北方苍鹰优化算法NGO优化VMD信号分量可视化

时序分解 | MATLAB实现北方苍鹰优化算法NGO优化VMD信号分量可视化 目录 时序分解 | MATLAB实现北方苍鹰优化算法NGO优化VMD信号分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 北方苍鹰优化算法NGO优化VMD&#xff0c;对其分解层数&#xff0c;惩罚因子数做优化…

基于Python开发的玛丽大冒险小游戏(源码+可执行程序exe文件+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python开发的玛丽冒险小游戏程序&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xf…

Alibaba(商品详情)API接口

为了进行电商平台 的API开发&#xff0c;首先我们需要做下面几件事情。 1&#xff09;开发者注册一个账号 2&#xff09;然后为每个alibaba应用注册一个应用程序键&#xff08;App Key) 。 3&#xff09;下载alibaba API的SDK并掌握基本的API基础知识和调用 4&#xff09;利…

管理类联考——数学——汇总篇——知识点突破——应用题——交叉比例法/杠杆原理

读书笔记 甲有&#xff1a;x个a&#xff0c;乙有&#xff1a;y个b&#xff0c;甲乙的平均值为c&#xff0c;根据总数相等&#xff0c;得&#xff1a;axbyc(xy)&#xff0c;即ax-cxcy-by&#xff0c;则 x y c − b a − c \frac{x}{y}\frac{c-b}{a-c} yx​a−cc−b​ &#…

OpenCV(二十五):边缘检测(一)

目录 1.边缘检测原理 2.Sobel算子边缘检测 3.Scharr算子边缘检测 4.两种算子的生成getDerivKernels() 1.边缘检测原理 其原理是基于图像中灰度值的变化来捕捉图像中的边界和轮廓。梯度则表示了图像中像素强度变化的强弱和方向。 所以沿梯度方向找到有最大梯度值的像素&…