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

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

相关文章

React 全栈体系(四)

第二章 React面向组件编程 六、组件的生命周期 1. 效果 需求:定义组件实现以下功能&#xff1a; 让指定的文本做显示 / 隐藏的渐变动画从完全可见&#xff0c;到彻底消失&#xff0c;耗时2S点击“不活了”按钮从界面中卸载组件 <!DOCTYPE html> <html lang"e…

ES6常用新特性

ES6改动很大&#xff0c;可以简单分为四类 1、解决原有语法的缺陷和不足 例如&#xff1a;let&#xff0c;const 2、对原有语法进行增强 解构、扩展、模板字符串 3、新增对象、全新的方法&#xff0c;全新的功能 Object.assign()、Proxy对象代理、Reflect 等等 4、全新的数据类…

手写题目3:算出一个dom里面所有元素的节点数

算出一个dom里面所有元素的节点数 start 获取一个dom元素内的所有节点数。 代码 // 递归函数 function countNodes(node) {// 计算自身var count 1;// 判断是否存在子节点if (node.hasChildNodes()) {// 获取子节点var cnodes node.childNodes;// 对子节点进行递归统…

elasticsearch的索引库操作

索引库就类似数据库表&#xff0c;mapping映射就类似表的结构。我们要向es中存储数据&#xff0c;必须先创建“库”和“表”。 mapping映射属性 mapping是对索引库中文档的约束&#xff0c;常见的mapping属性包括&#xff1a; type&#xff1a;字段数据类型&#xff0c;常见的…

蓝桥杯官网填空题(矩形切割)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小明有一些矩形的材料&#xff0c;他要从这些矩形材料中切割出一些正方形。 当他面对一块矩形材料时&#xff0c;他总是从中间切割一刀&#xff0c;切出一块最大的…

[论文笔记]A COMPARE-AGGREGATE MODEL FOR MATCHING TEXT SEQUENCES

引言 今天带来论文A COMPARE-AGGREGATE MODEL FOR MATCHING TEXT SEQUENCES的阅读笔记。 很多NLP任务,包括阅读理解、文本蕴含和问答任务,都需要在序列之间进行比较。匹配序列间重要的单位是这些解决这些任务的关键。本篇工作提出了一个通用的比较聚合(compare-aggragate)框…

Docker Compose常用命令

常用命令 1.1 restart, start, stop-- 启动和停止服务 命令必须在 docker-compose.yml文件所在的目录下执行。 # 前台启动, 启动项目中的所有服务。 $. docker-compose up# 后台启动, 启动所有服务并在后台运行。 $. docker-compose up -d# 停止所有服务。 $. docker-compose …

大数据课程K18——Spark的ALS算法与显式矩阵分解

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Spark的ALS算法与显式矩阵分解; ⚪ 掌握Spark的ALS算法原理; 一、ALS算法与显式矩阵分解 1. 概述 我们在实现推荐系统时,当要处理的那些数据是由用户所提供的自身的偏好数据,这些…

什么是机器学习中的监督学习和无监督学习,举例说明

1、什么是机器学习中的监督学习和无监督学习&#xff0c;举例说明。 监督学习&#xff1a; 监督学习是一种机器学习的方法&#xff0c;它通过已知的数据&#xff08;即训练数据&#xff09;来预测未知的数据&#xff08;即测试数据&#xff09;。例如&#xff0c;一个监督学习…

k8s node环境部署(三)

1、添加node1、node2环境 前面配置master环境的截图最后一段 复制下来 分别在node主机执行 kubeadm join 192.168.37.132:6443 --token p5omh3.cqjqt8ymrwkdn2fc \ --discovery-token-ca-cert-hash sha256:608a1cbadd060cfdeac2fae84c19609061b750ab51bf9a19887ff7ea…

Ubuntu之apt-get系列--安装JDK8--方法/教程

原文网址&#xff1a;Ubuntu之apt-get系列--安装JDK8--方法/教程_IT利刃出鞘的博客 简介 本文介绍如何在Ubuntu下安装JDK8。 验证是否安装 可以通过如下命令判断系统是否有安装ssh服务&#xff1a; 命令 java -version 结果 如上所示&#xff0c;表示还没有安装。 查看…

实训三:多表查询 - 大学数据库创建与查询实战

大学数据库创建与查询实战 第1关&#xff1a;数据库表设计任务描述相关知识大学数据库的整体设计教师信息表&#xff08;instructor&#xff09;开课信息表&#xff08;section&#xff09; 编程要求测试说明参考代码 第2关&#xff1a;查询&#xff08;一&#xff09;任务描述…

从零开始学习软件测试-第38天笔记

接口测试 什么是接口 接口是两个独立部件共享信息的边界&#xff0c;测试中常说的接口大部分是web接口。web接口是遵循了http或者https协议的URL。 数据的流转过程 由客户端通过接口将数据发送给服务器。服务器收到数据之后&#xff0c;取出想要的数据&#xff0c;拼装成一…

[虚幻引擎插件介绍] DTGlobalEvent 蓝图全局事件, Actor, UMG 相互回调,自由回调通知事件函数,支持自定义参数。

本插件可以在虚幻的蓝图 Actor&#xff0c; Obiect&#xff0c;UMG 里面指定绑定和执行消息&#xff0c;可带自定义参数。 参数支持 Bool&#xff0c;Byte&#xff0c;Int&#xff0c;Int64&#xff0c;Float&#xff0c;Name&#xff0c;String&#xff0c;Text&#xff0c;Ve…

Ubuntu 20.04 LTS 安装Kubernetes 1.26

1、环境配置 (1)添加主机名称解析记录 cat > /etc/hosts << EOF 192.168.44.200 master01 master01.bypass.cn 192.168.44.201 node01 node01.bypass.cn 192.168.44.202 node02 node02.bypass.cn EOF(2)禁止K8s使用虚拟内存 swapoff -a sed -ri s(.*swap.*)#\1…

常见关系型数据库SQL增删改查语句

常见关系型数据库SQL增删改查语句&#xff1a; 创建表&#xff08;Create Table&#xff09;&#xff1a; CREATE TABLE employees (id INT PRIMARY KEY,name VARCHAR(50),age INT,department VARCHAR(50) ); 插入数据&#xff08;Insert Into&#xff09;&#xff1a; INSERT …

sqlite3 是一个命令行工具,用于与 SQLite 数据库进行交互和管理

通过在终端或命令提示符中键入 sqlite3 命令&#xff0c;可以启动 sqlite3 工具并连接到指定的 SQLite 数据库文件。 连接成功后&#xff0c;你将获得一个交互式的命令行界面&#xff0c;可以在其中执行各种数据库操作。使用 sqlite3 命令时&#xff0c;可以提供以下参数&#…

自然语言处理:提取长文本进行文本主要内容(文本意思)概括 (两种方法,但效果都一般)

本文主要针对长文本进行文本提取和中心思想概括&#xff0c;原文档放在了附件里面&#xff1a;<科大讯飞公告> -----------------------------------方法一&#xff1a;jieba分词提取文本&#xff08;句子赋分法&#xff09;------------------------- 1、首先导入相关…

【车载开发系列】诊断故障码中的扩展数据

【车载开发系列】诊断故障码中的扩展数据 诊断故障码中的扩展数据 【车载开发系列】诊断故障码中的扩展数据一. 扩展数据概念二. DemDataElementClass对象三. DemInternalDataElement对象四. DemExtendedDataClass五. DemExtendedDataRecordClass1)DemExtendedDataRecordNumbe…

【Cicadaplayer】avpkt 队列(mPacketQueue)的条件等待(wait)

此时,网络包读取,网络包可能有音频、视频、字幕等等。MAX_QUEUE_SIZE 是总共的包数目的上限,保证mPacketQueue 不能太大也不能太小。小于此值,读取线程会等待。std::condition_variable.wait()的用法和设计缺陷带来的坑 大神对条件变量做了深入分析。int avFormatDemuxer::…