从零开始的HTML5之旅(三)

HTML5音频

??HTML5规定了一种通过audio元素包含音频的方法。audio能够播放声音文件和音频流。

音频格式

格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari3.0
Ogg Vorbis 支持 支持 支持
Mp3 支持 支持 支持
Wav 支持 支持 支持

??从上面的格式中我们可以知道,在实际应用中仅仅只需要用到Ogg格式和Mp3格式。
??audio的属性、方法、事件和video基本一致,可以参考从零开始的HTML5之旅(二)

音频Demo

<!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="audio_div">
        <audio id="audio1" controls >
            <source src="https://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
            <source src="https://www.w3school.com.cn/i/song.mP3" type="audio/mpeg">
        </audio>
    </div>
    <div id="btn">
        <button onclick="Play()">开始</button>
        <button onclick="Pause()">暂停</button>
    </div>
</body>

</html>

<script>
    var id = document.getElementById("audio1");

    function Play() {
        id.play();
    }

    function Pause(){
        id.pause();
    }

</script>

HTML5拖放

??拖放是HTML5的标准的组成部分。它是种常见的特性,就是将一个东西抓取然后拖到另一个位置放下。在HTML5种,任何元素都能进行拖放。

浏览器支持

??IE9+、Firefox、Opera、Chrome、Safari都支持拖放。

拖动时的事件

事件 描述
ondragstart 用户开始拖动元素时触发
ondrag 元素正在拖动时触发
ondragend 用户完成元素拖动后触发

释放目标时的事件

事件 描述
ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop 在一个拖动过程中,释放鼠标键时触发此事件

设置可拖动

<a draggable="true"></a>
<img draggable="true">
……
<p draggable="true"></p>

用ondragstart和setData()给目标设值

<img id="drag1" height="80px"  width="80px" src="" draggable="true" ondragstart="drag(event)" />

//以下是js中的代码
function drag(e){
e.dataTransfer.setData("Text",e.target.id)
}

??这个代码中,数据类型是"Text",元素id则为"drag1"。

规定在何处放置目标

??ondragover事件规定在哪里放置被拖动的数据。HTML中默认是不能将元素放在其他元素中的,因此,需要我们主动设置允许放置。这就需要用到ondragover事件中的e.preventDefault()方法。

<div style="height: 90px;width: 90px; border:1px solid brown" ondragover="allowDrop(event)"></div>

function allowDrop(e){
    e.preventDefault();
}

放置

??ondrop:在一个拖动过程中,释放鼠标键时触发此事件

??这里直接放上代码:

<div style="height: 90px;width: 90px; border:1px solid brown" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

function drop(e){
e.preventDefault(); //避免浏览器对数据的默认处理
var data=e.dataTransfer.getData("Text"); //声明变量data,将获取的数据存到data中。此方法返回setData()中设置为相同数据的任何数据,其中被获取的数据是ID为drag1的元素。
e.target.appendChild(document.getElementById(data)); //将被拖元素放置在新容器中
}

完整代码

<!DOCTYPE HTML>
<html>
<head>
    <title>拖放Demo</title>
</head>
<body>

<div style="height: 90px;width: 90px; border:1px solid brown" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" height="80px"  width="80px" src="https://images.cnblogs.com/cnblogs_com/ODevil/1668365/o_20031214461554175539_p0_master1200.jpg" draggable="true" ondragstart="drag(event)" />

</body>
</html>

<script type="text/javascript">
    function allowDrop(e)
    {
    e.preventDefault();
    }

    function drag(e)
    {
    e.dataTransfer.setData("Text",e.target.id);
    }

    function drop(e)
    {
    e.preventDefault();
    var data=e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
    }
    </script>

原文地址:https://www.cnblogs.com/ODevil/p/12494936.html

时间: 2024-10-08 12:34:10

从零开始的HTML5之旅(三)的相关文章

从零开始的HTML5之旅(六)——Re SVG

HTML5 SVG SVG是什么? ??SVG是一种图像文件格式,其英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML,由W3C联盟进行开发的.严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的.高分辨率的Web图形页面.用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看. ??SVG是一种用XML定义的语言,用来描述二维矢量/栅格图形.S

从零开始的HTML5之旅(六)

HTML5地理定位 ??HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 ??IE9.Firefox.Chrome.Safari以及Opera支持地理定位.对于拥有GPS的设备,定位将更加准确. 地理定位 ??用getCurrentPosition()方法获得用户的位置. getCurrentPosition(successCallback, errorCallback,PositionOpti

Ajax之旅(三)-- 异步更新

上篇博文中,已经为大家在理论上讲述了什么是XMLHttpRequest对象,它是Ajax实现异步更新的核心对象.下面,我们就通过一个实例,来了解XMLHTTPRequest对象的使用或者说异步更新的实现. 实例:判断用户代码是否重复        方案一:同步更新.原理如下图所示: 从上图中可以看到,当我们在浏览器用户代码输入框中输入"用户代码"后,只能等待服务器的响应,当服务器将结果反馈给浏览器后,我们才可以进行下一个操作,也就是继续输入"用户名称". 这就是同步

从零开始学ios开发(三):第一个有交互的app

感谢大家的关注,也给我一份动力,让我继续前进.有了自己的家庭有了孩子,过着上有老下有小的生活,能够挤出点时间学习真的很难,每天弄好孩子睡觉已经是晚上10点左右了,然后再弄自己的事情,一转眼很快就到12点了,就要去睡了,现在身体汤不牢啊,如果不早点睡,第二天上班肯定没精神,要靠红牛了,呵呵,在这样的情况下再挤出时间学习ios真的很困难,只能是见缝插针,抓紧一切可用的时间学习,时间,挤一挤总归是有的,只是多少问题. 这几天看来书的第三章,主要讲了如何添加按钮,然后为按钮添加响应事件,当点击按钮后,触

HTML5实现动画三种方式

编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真! 分三种方式实现: (1)   canvas元素结合JS (2)   纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE) (3)   CSS3结合Jquery实现 知道如何使用CSS3动画比知道如何使用<canvas>元

-------走过夏天,一路慢行的HTML5之旅!

一.HTML5的概念 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 二.HTML5文档的结构  HTML文档主要包括三大部分:文档声明部分.<head>头部部分.<body>主体部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </

在这个夏天与Html5不期而遇(三)

一.HTML 1.学习HTML我们主要做的工作是前端,在与后台结合的过程中我们都需要互相有一定的了解. 2.服务器技术:PHP技术,JAVA技术,.NET技术 3.客户端技术: 基础:Html5 css3 javascript 中级:jquery(Java的框架) bootstrap(前端框架) 简单的服务器技术 ajax技术 高级:(协同工作的软件)+手机APP页面+react native 4.WEB的工作原理: B/S模式:浏览器/服务器(这是我们日常使用的网页搜索模式) C/S模式:客户

HTML5学习笔记三 HTML元素、属性、标题、段落

一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签中进行关闭(以开始标签的结束而结束) 大多数 HTML 元素可拥有属性 嵌套的 HTML 元素  HTML 文档由嵌套的 HTML 元素构成. <!doctype html> <html> <body> <p>这是第一段</p> </body&

C#微信开发之旅(三):AccessToken获取及全局管理

由于AccessToken有效期为2小时,并且接口调用有数量限制,所以开始时选择用WCF做了全局管理(项目中要到AccessToken的地方太多了,支付相关.生成二维码.获取用户信息.菜单操作等等) 下面是AccessToken全局管理的单例类,(原理:通过微信接口获取AccessToken,存储在内存中,当其他项目调用时,会判断是否过期,过期去拿新Token再返回): 1 /// <summary> 2 /// AccessToken类,公众号通过此token 获取相关信息 (单例类) 3