1.表单新增的type属性
- email: email提供了默认的电子邮箱校验：要求必须包含@符号，同时必须包含服务器的名称，例如@qq.com，@163.com，如果不能满足验证，则会阻止当前数据的提交
- tel: tel并不提供校验功能，它的本质目的是为了在移动端能打开数字键盘，这意味着数字键盘限制了用户只能输入数字
- url: 验证只能输入合法的网址：必须包含http://…
- number: 只能输入数字（包含小数点），不能输入其他字符，max：可输入的最大值；min：可输入的最小值；value：默认值
- range:范围条
- search:更人性化的输入体验，输入框最右侧有一个X符号，可一键删除输入框的内容
- color:提供颜色选择
- time:时分秒
- date:年月日
- datetime-local:日期时间
- month:月份
- week:星期
<form>
<input type="email"><br>
<input type="tel"><br>
<input type="url"><br>
<input type="number" max="100" min="0" value="66"><br>
<input type="range" max="100" min="0" value="22"><br>
<input type="search"><br>
<input type="color"><br>
<input type="time"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="month"><br>
<input type="week"><br>
<input type="submit" value="提交">
</form>
2.表单新增的其他属性
- placeholder:提示文本；
- autofocus:自动获取输入框焦点；
- autocomplete:提示输入过的内容，但要满足两个条件
1.必须成功提交过；
2.标签元素具有name属性 - required:必须输入值，如果没有输入会阻止当前数据的提交
- pattern:正则表达式验证
*: 表示任意个
?: 代表0个或1个
+: 代表1个或多个 - multiple:可以选择多个文件，当type类型为email时，也可以输入多个邮箱地址，以逗号分隔
- form:指定表单id，那么将来指定id的表单进行数据提交的时候，也会将当前form属性值为对应表单id的数据一起提交-
<form id="myForm">
<input type="text" name="account" placeholder="请输入用户名" autofocus autocomplete="on"><br>
<input type="tel" required pattern="^(\+86)?\d{10}$"><br>
<input type="file" multiple name="files"><br>
<input type="email" multiple name="email">
<input type="submit">
</form>
<input type="text" name="address" form="myForm">
<!--这个元素并没有包含在form中：默认情况下该元素也不会被提交，通过form属性提交->
3.表单新增元素（datalist）
- 创建选项值：value–具体的值 label–提示信息，辅助值
- 看似功能十分强大但是兼容性特别差
- option:可以是单标签，也可以是双标签
- 如果input的type为URL，那么value值必须包含http://…
<form id="myForm">
专业：<input type="text" list="sublist">
<datalist id="sublist">
<option value="java" label="针不戳"></option>
<option value="Python" label="人多"></option>
<option value="javascript" label="一般"></option>
</datalist>
<input type="submit">
</form>
4.表单新增的事件
- oninput：监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容），就会触发该事件
- 与onkeyup的区别：可检测到右键粘贴导致的文本框内容变化
- oninvaild:当验证不通过时触发
<form id="myForm">
用户名：<input type="text" name="userName" id="userName"><br>
电话：<input type="tel" name="userPhone" pattern=“^{d}10$” id="userPhone"><br>
<input type="submit">
</form>
<script>
document.getElenemtById('userName').oninput=function(){
console.log(this.value)
}
document.getElenemtById('userPhone').oninvaild=function(){
this.setCustomValidity('请输入合法的手机号')
}
</script>
5.进度条
- progress:max:最大值 value：当前值
- meter:high:规定的较高的值 low:规定的较低的值 max：最大值 min:最小值 value：当前值
<progress max="100" value="22"></progress>
<meter max="100" min="0" low="22" high="66" value="33"></meter>
6.小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
fieldset{
width:60%;
margin:10px auto;
padding:40px;
}
fieldset>label{
padding:10px;
display: inline-block;
}
fieldset>meter,
fieldset>input{
width:100%;
padding:10px 10px;
font-size: 15px;
border:1px solid skyblue;
border-radius:10px;
outline:none;
}
fieldset>meter{
outline: #333;
height:50px;
padding:0;
}
fieldset>input[type="submit"]{
margin:10px;
}
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名：</label>
<input id="userName" type="text" placeholder="请输入姓名">
<label for="userPhone">手机号码：</label>
<input id="userPhone" type="tel" pattern="^(\+86)?\d{10}$">
<label for="userEmail">邮箱地址：</label>
<input id="userEmail" type="email" required>
<label for="userSchool">所属学院：</label>
<input id="userSchool" type="text" list="school">
<datalist id="school">
<option value="web前端"></option>
<option value="web后端"></option>
<option value="python"></option>
</datalist>
<label for="userGrade">入学成绩：</label>
<input id="userGrade" type="number" min="0" max="100" value="0">
<label for="userLevel">基础水平：</label>
<meter id="userLevel" min="0" max="100" value="0" low="59" high="95"></meter>
<label for="userRegister">入学日期：</label>
<input id="userRegister" type="datetime-local" >
<label for="userGraduate">毕业日期：</label>
<input id="userGraduate" type="datetime-local" >
<input type="submit" value="提交">
</fieldset>
</form>
</body>
<script>
document.querySelector('#userPhone').addEventListener('invalid',function(){
this.setCustomValidity("请输入十位电话号码")
})
document.querySelector('#userGrade').addEventListener('input',function (){
document.querySelector('#userLevel').value=this.value
})
</script>
</html>
7.自定义属性
- 以**data-**开头
- data-后必须至少有一个字符，多个单词使用-连接
- 名称都是小写字符，不能包含大写字符和特殊符号
<p data-school-name='itcast'>
22132
</p>
<script>
let p=document.querySelector('p');
let value=p.dataset['schoolName']
console,log(value)
</script>
8.全屏接口
-
requestFullScreen():开启全屏显示
不同浏览器下需要添加不同的前缀
Chrome：webkit firefox：moz ie：ms opera：o
-
cancelFullScreen():退出全屏显示
与开启全屏类似，需要添加前缀
-
fullScreenElement():是否是全屏状态
兼容性写法
<button>full</button>
<script>
document.querySelector('button').addEventListener('click',function (){
let div= document.querySelector('body');
if(div.requestFullScreen){
div.requestFullScreen();
}
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
else if(div.msRequestFullScreen){
div.msRequestFullScreen();
}
})
</script>
9.fileReader
- readAsText():读取文本文件（可以使用Txt打开的文件），返回文本字符串，默认编码是UTF-8
- readAsBinaryString():读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。（把文件以二进制的形式传递给后端）
- readAsDataURL():读取文件以获取一段以data开头的字符串。DataURL是将资源转换成base64编码的字符串形式，并且将这些内容直接存储在URL中，优化网站的加载速度和执行效率
- abort（）:中断读取
- 事件函数
- onabort()读取文件中断时触发
- onerror()读取错误时触发
- onload()文件读取成功完成时触发
- onloadend()文件读取完成时触发，无论成功与否
- onloadstart()开始读取时触发
- onprogress()读取文件过程中持续触发
- 实现案例
<body>
<form action="">
<input type="file" name="myFile" id="myFile" onchange="submitFile()">
<input type="submit" value="submit">
</form>
<img src="" alt="">
</body>
<script>
function submitFile(){
let reader=new FileReader();//创建文件读取对象
let file=document.querySelector('#myFile').files[0];
reader.readAsDataURL(file);//读取文件
//1.没有返回值，但是会把读取结果存储在读取对象的result中
//2.需要传递一个blob参数，即二进制文件（一般指图片或者其他可以嵌入到文档的类型）
reader.onload=function(){
console.log(reader.result);
document.querySelector('img').src=reader.result;
}
}
</script>
10.拖拽
在HTML5中，想要拖拽元素，需要为元素添加draggable属性
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手，但浏览器存在默认行为，会阻止ondrop事件，需要在ondragover中阻止浏览器的默认行为
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2{
width:400px;
height: 400px;
border:1px solid skyblue;
}
</style>
</head>
<body>
<div class="div1">
<p id="wwww" draggable="true">232323</p>
</div>
<div class="div2"></div>
</body>
<script>
document.ondragstart=function(e){
console.log(e)
e.target.style.opacity=0.5;
e.dataTransfer.setData("text/html",e.target.id);
}
document.ondragend=function(e){
e.target.style.opacity=1;
}
document.ondragover=function(e){
e.preventDefault();
}
document.ondrop=function(e){
let id=e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id))
}
</script>
</html>
11.地理定位
1.H5地理位置定位功能
首先判断用户浏览器是否支持该功能，目前大多数现代浏览器均支持，获取位置信息需用户授权同意
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
2.showPosition（）获取用户经度纬度
function showPosition(position){
console.log(position);
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
console.log('纬度:'+lat+',经度:'+lag);
}
3.执行函数getLocation(),如果调用成功即可显示经度纬度
4.补充showError（），这个函数是报错信息
showError(error){
console.log(error.code)
}
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}
12.sessionStorage
1.特点
- 存储数据到当前页面的内存中
- 它的生命周期为关闭当前页面，关闭页面，数据会自动清除
2.使用
- setItem(key,value)：存储数据，以键值对的方式存储
- getItem(key)：获取数据，通过指定名称的key获取对应的value值
- removeItem(key)：移除指定名称key的value值
- clear()：清空所有存储的数据
13.localStorage
1.特点
- 不同浏览器不能共享数据，但是在同一个浏览器的不同窗口中可以共享数据
- 存储内容大概20mb
- 永久生效，它的数据存储在硬盘上，并不会随着页面或者浏览器的关闭而清除数据
2.使用
与sessionStorage方法相同
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
