首页 > 代码库 > Html5学习3（拖放、Video（视频）、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week )）
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 )）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。