表单
input
- email
在提交表单时,会自动验证 email 域的值。
E-mail: <input type="email" name="user_email" />
- url
在提交表单时,会自动验证 url 域的值。
Homepage: <input type="url" name="user_url" />
- number
只能输入数字和e
Points: <input type="number" name="points" min="1" max="10" />
- range
数字滑动条
<input type="range" name="points" min="1" max="10" />
- Date Pickers(日期选择器)
Date: <input type="date" name="user_date" />
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
- search
表单元素
- datalist
规定输入域的选项列表
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
option 元素永远都要设置 value 属性。
表单属性
- autocomplete
规定 form 或 input 域应该拥有自动完成功能
<form action="demo_form.asp" method="get" autocomplete="on">
E-mail: <input type="email" name="email" autocomplete="off" /><br />
</form>
- autofocus
规定在页面加载时,域自动地获得焦点
User name: <input type="text" name="user_name" autofocus="autofocus" />
- form
规定输入域所属的一个或多个表单
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
拖放
- 设置元素为可拖动
<div draggable="true"></div>//将draggable属性设置为true
- 拖动的元素
<div draggable="true" ondragstart="drag(event)"></div>
//规定被拖动的数据
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//数据类型(text)和值(可拖动元素的id)
}
- 放置的位置
<div ondragover="allowDrop(event)"></div>
function allowDrop(event){
event.preventDefault();
}
- 进行放置
<div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
function drop(ev){
ev.preventDefault();
var data=ev.data.Transfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
例子(多个div交换位置)
<div id="div1" draggable="true" ondragover="allowDrop(event)" ondrop="drop(event,this)" ondragstart="drag(event, this)"></div>
<div id="div2" draggable="true" ondragover="allowDrop(event)" ondrop="drop(event,this)" ondragstart="drag(event, this)"></div>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
let srcDiv = null;
function drag(ev,divDom)
{
srcDiv=divDom;
ev.dataTransfer.setData("text/html",divDom.innerHTML);
}
function drop(ev,divDom)
{
ev.preventDefault();
if(srcDiv !== divDom){
srcDiv.innerHTML = divDom.innerHTML;
divDom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
</script>
兼容ie时,setData(“text”,元素内容);只支持text
video
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
方法
play() //播放
pause() //暂停
load() //重新加载视频元素
cnaPlayType()//浏览器是否能播放指定的视频类型
autoplay //自动播放
controls //显示播放控件
loop //循环播放
currentTime //播放的当前时间
chrome浏览器下,currentTime用IDE编辑器打开时失效,本地文件夹直接打开html或者src地址为服务器获取则正常。
隐藏视频控制条(webkit)
video::-webkit-media-controls {
display:none !important;
}
canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); //创建context对象
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
SVG
可伸缩矢量图形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Geolocation(地理定位)
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition); //获取用户的位置
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置
clearWatch() - 停止 watchPosition() 方法
web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>