H5学习
语义标签
<body>
<header>头部区域</header>
<section>
<article>侧边栏内容</article>
<aside>内容之外的内容</aside>
</section>
<footer></footer>
</body>
在IE中无法显示高度(可以添加样式display:block;),因为行级元素在设置高度上的无效的
兼容处理:
(1)创建语义标签
<script>
document.createElement(header);
</script>
<style>
header{
display:block;
}
</style>
(2)引入JS
<script src="../js/html5shiv.min.js"></script>
表单新增的type属性
属性 | |
---|---|
text | 文本 |
password | 密码 |
邮箱:提供了一个电子邮箱的完整验证 如果不满住不会提交 | |
tel | 电话: 移动端打开数字键盘 限制了用户只能输数字 |
url | 网址:类似email 必须包含http |
number | 数量: 有一个双向箭头 只能输入数字(包含小数点)可以设置max="“min=”“value=”" 默认值 |
search | 商品名称:有提示右边有个删除 |
range | 范围: 调音量 |
color | 颜色: 可以选择颜色 |
time | 时间: |
date | 日期: 年月日 |
datetime | 大多数浏览器不支持,只有safari支持 |
datetime-local | |
month | 月份: |
week | 星期: |
submit | 提交: |
属性
属性 | |
---|---|
placeholder | 提示文本 |
autofocus | 自动获取焦点 |
autocomplete=“on/off” | 打开提示 前提1.必须成功提交 2.添加了autocomplete必须要有name属性 |
required | 必须输入 如果没有就无法提交 |
pattern | 正则表达式验证 "^(+86)?1/d{10}$"电话验证 |
file | multiple 1.选择多个文件 2.可以填多个邮箱 (在email中,允许输入多个邮箱地址用,连接) |
form | 指定表单的ID 也会将当前表单内容提交 |
datalist 建立关联
选择:<input type="text" list="buy">
<datalist id="buy">
<option value="TIANMAO" label="国际"></option>
<option value="TAOBAO" label="多样"></option>
<option value="JD" label="仓库"></option>
<option value="SN" label="电器"></option>
</datalist>
//不同浏览器不同 option可以是双标签也可以是单标签<option/>
//如果type是url value必须添加HTTP://
keygen
加密操作
生成公钥,私钥
output
只能显示不能修改
进度条、度量器
标签 | 属性 |
---|---|
progress | low max min value |
meter | low max min value |
DOM操作
1.querySelector("");
2.querySelectorAll("");
样式
添加样式
classList.add("");
移除样式
classList.remove(“blue”)
切换样式
classList.toggle("") 无则添加,有则移除
判断样式
classList.contains
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
margin: 0;
padding:0;
height: 100px;
width: 100px;
border: 1px solid red;
}
#div1{
border: 3px solid green;
}
.div2{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="增加样式" id="btn1">
<input type="button" value="移除样式" id="btn2">
<input type="button" value="切换样式" id="btn3">
<script>
window.onload=function(){
var btn1=document.querySelector("#btn1");
var btn2=document.querySelector("#btn2");
var btn3=document.querySelector("#btn3");
btn1.onclick=function(){
document.querySelector("#div1").classList.add("div2");
}
btn2.onclick=function(){
document.querySelector("#div1").classList.remove("div2");
}
btn3.onclick=function(){
document.querySelector("#div1").classList.toggle("div2");
}
}
</script>
</body>
</html>
新媒体标签
标签 | 属性 | |
---|---|---|
audio | controls: | 添加属性才能看到 |
autoplay: | 自动播放 | |
loop: | 循环 |
video类似
标签 | 属性 | |
---|---|---|
video | controls: | 添加属性才能看到 |
autoplay: | 自动播放 | |
loop: | 循环 | |
poster: | 视频还没下载,用户还没点击播放的默认形式,第一帧画面 |
多媒体接口
方法
load() 加载、 play() 播放、 pause() 暂停
属性 | |
---|---|
currentTime | 当前播放进度 |
duration | 视频总长 |
paused | 水平播放状态 |
事件 | |
---|---|
oncanplay | 可以播放这触发 |
ontimeupdate | 报告播放进度 |
onended | 播放完时触发 |
自定义视频播放器
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/8.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.css">
</head>
<body>
<h3 class="playerTitle">Player</h3>
<div class="player">
<video src="../mp/aa.mp4"></video>
<div class="controls">
<a href="javascript:;" class="switch fa fa-play"></a>
<a href="javascript:;" class="expand fa fa-expand"></a>
<div class="progress">
<div class="bar"></div>
<div class="loaded"></div>
<div class="elapse"></div>
</div>
<div class="time">
<span class="currentTime">00:00:00</span>
\
<span class="totalTime">00:00:00</span>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script>
$(function(){
var video=$("video")[0];
//开始
$(".switch").on("click",function(){
if(video.paused){
video.play();
$(this).toggleClass("fa-play fa-pause");
}
else{
video.pause();
$(this).toggleClass("fa-play fa-pause");
}
});
//全屏
$(".expand").on("click",function(){
if (video.requestFullScreen) {
video.requestFullScreen();
}
else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}
});
//封装time函数 返回时间
function getTime(time){
var hour=Math.floor(time/3600);
hour=hour<10?"0"+hour:hour;
var minute=Math.floor(time%3600/60);
minute=minute<10?"0"+minute:minute;
var second=Math.floor(time%60);
second=second<10?"0"+second:second;
return hour+":"+minute+":"+second;
}
//实现播放
video.oncanplay=function(){
setTimeout(function(){
video.style.display="block";
var total=video.duration;
//接收时间
var ss=getTime(total);
//展示在元素中,赋值
$(".totalTime").html(ss);
},2000);
}
//实现页面播放中的进度时间,ontimeupdate
video.ontimeupdate=function () {
//获取当前的播放时间
var total=video.duration;
var current=video.currentTime;
var percent=current/total*100+"%";
var ss=getTime(current);
$(".currentTime").html(ss);
//设置进度条的动态进度
$(".elapse").css("width",percent);
}
//点击进度条播放
$(".bar").on("click",function(e){
//获取进度条离x的距离
var x=e.offsetX;
var percent=x/$(this).width()*100+"%";
//设置进度条
$(".elapse").css("width",percent);
//设置时间
var time=video.duration*x/$(this).width();
var ss=getTime(time);
$(".currentTime").html(ss);
//设置动画
video.currentTime=time;
});
//播放完就回到初始状态
video.onended=function(){
video.currentTime=0;
$(".switch").toggleClass("fa-play fa-pause");
}
});
</script>
</body>
</html>
GitHub上也有写好的一下框架
Dplayer