Html5学习3（拖放、Video（视频）、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week )）
1.Html拖放
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
} function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
} function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><!--放到何处：ondragover.进行放置：ondrop.-->
<img id="drag1" src="001.png" draggable="true" ondragstart="drag(event)" width="336" height="69"><!--draggable="true"代表图片可以拖动.ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值--> </body>
</html>
实现的结果如下：可以把图片拖放到矩形里面
（1）设置元素为可拖放：<img draggable="true">
（2）拖动什么：ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
（3）放到何处：ondragover 默认属性无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。要通过调用 ondragover 事件的 event.preventDefault() 方法。
（4）进行放置：ondrop。ondrop 属性调用了一个函数，drop(event)。
2.Html5 Video（视频）
（1）正常嵌入视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <video width="320" height="240" controls>
<source src="file:///F|/内涵段子/1444889702013.mp4" type="video/mp4">
</video> </body>
</html>
（2）可调节视频窗口大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="text-align:center">
<video id="video1" width="420">
<source src="file:///F|/内涵段子/1458624760130.mp4" type="video/mp4"><!--视频来源--></video>
<br>
<button onclick="playPause()">播放/暂停</button><!--4个按钮-->
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
</div> <script>
var myVideo=document.getElementById("video1"); function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
} function makeBig()
{
myVideo.width=560; //点击放大，视频宽度为560
} function makeSmall()
{
myVideo.width=320; //点击缩小，视频宽度为320
} function makeNormal()
{
myVideo.width=420; //点击普通视频宽度为420
}
</script> </body>
</html>
网页上显示为
3.Html5 Input类型
（1）color
<body>
<form action="demo-form.php">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
</body>
可以点击颜色，会出来颜色选择框，然后选择颜色提交。
（2）datetime可以从日期选择器中选取日期
<body>
<form action="demo-form.php">
生日: <input type="date" name="bday">
<input type="submit">
</form>
</body>
可以从日期选择器里面选择时间提交。
（3）email 在提交表单时，会自动验证 email 域的值是否合法有效
<body>
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
</body>
（4）month 生成年和月，是一个选择器。
<body>
<form action="demo-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
（5）number 数量选择器
<body>
<form action="demo-form.php">
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="12"><!--最小与最大的数量-->
<input type="submit">
</form>
</body>
（6）range 可以左右调整选取值
<body>
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
</body>
（7）search用于搜索域，比如站点搜索或 Google 搜索。
<body>
<form action="demo-form.php">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>
（8）Tel定义输入电话号码字段
<body>
<form action="demo-form.php">
电话号码: <input type="tel" name="usrtel"><br>
<input type="submit">
</form>
</body>
（9）time可输入时间控制器（无时区）
<body>
<form action="demo-form.php">
选择时间: <input type="time" name="usr_time">
<input type="submit">
</form>
</body>
（10）url用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
<body>
<form action="demo-form.php">
添加你的主页: <input type="url" name="homepage"><br>
<input type="submit">
</form>
</body>
（11）week定义周和年 (无时区)
<body>
<form action="demo-form.php">
选择周: <input type="week" name="year_week">
<input type="submit">
</form>
</body>
Html5学习3（拖放、Video（视频）、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week )）的更多相关文章
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5 学习05—— 拖放（Drag 和 Drop）
拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...
- HTML5学习之拖放（十）
l元素可以用于拖拽必须设置draggable="true"属性,img和a标签除外,她们两个默认就可以被拖拽 想做拖拽处理,就需要在Dom元素上监听拖放的事件:dragstart, ...
- 检测浏览器对HTML5新input类型的支持
HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...
- html5学习笔记2——新元素
一:H5的改变 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...
- 使用 HTML5 input 类型提升移动端输入体验
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 使用 HTML5 input 类型提升移动端输入体验（键盘）
在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
随机推荐
- 团队作业7——第二次项目冲刺（Beta版本)-第二篇
1.工作分工: 团队成员 分工 郭达22120 项目整合,后台代码 刘德培44060 数据库模块 石浩洋22061 前台界面优化 曾繁钦22056 前台界面优化.测试 孙斌22030 后台代码 2.燃 ...
- lintcode-185-矩阵的之字型遍历
185-矩阵的之字型遍历 给你一个包含 m x n 个元素的矩阵 (m 行, n 列), 求该矩阵的之字型遍历. 样例 对于如下矩阵: [ [1, 2, 3, 4], [5, 6, 7, 8], [9 ...
- iOS开发NSDate详解
1. 用于创建NSDate实例的类方法有 + (id)date; 返回当前时间 + (id)dateWithTimeIntervalSinceNow:(NSTimeInterval)secs; 返回以 ...
- TCP系列16—重传—6、基础快速重传(Fast Retransmit)
一.快速重传介绍 按照TCP协议,RTO超时重传是一个非常重要的事件,当RTO超时的时候,TCP会同时通过两种方式非常谨慎的降低发送数据包的速率,一种是基于拥塞控制削减发送窗口的大小,另外一个是通过指 ...
- erlang+thrift配合开发
I think, thrift is a tcp/ip based Client-Server architecture multi-languages supported RPC framewo ...
- centOS 6.5命令方式配置静态IP
想自己做个centOS玩一下,然后通过FTP访问操作,首先查看是否开启了SSH,命令如下: rpm -qa | grep ssh 这个时候看到的是centOS的ssh已经打开!要是通过FTP工具访问还 ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- ｔｃｐ发送缓冲区中的数据都是由产生数据的进程给推送到ip层还是有定时任务触发？
和几个变量有非常大的关系 发送缓冲区的大小,如何单独设置一个socket的发送缓冲区 socketopt 发送缓冲区中的数据,如果被拥塞窗口限制住了,那么这些数据可能就放在tcpbuffer里的,此时 ...
- 【bzoj4401】块的计数 结论题
题目描述 给出一棵n个点的树,求有多少个si使得整棵树可以分为n/si个连通块. 输入 第一行一个正整数N,表示这棵树的结点总数,接下来N-1行,每行两个数字X,Y表示编号为X的结点与编号为Y的结点相 ...
- Git无法删除文件问题：fatal: pathspec 'readme.txt' did not match any files
在使用Git时,不小心创建了一个不需要的文件,想要删除一个文件时,出现了错误: fatal: pathspec 'readme.txt' did not match any files 原因是新建的这 ...