H5学习

最新推荐文章于 2023-07-29 22:31:32 发布

pig-qr

最新推荐文章于 2023-07-29 22:31:32 发布

阅读量179

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43493493/article/details/103168293

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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	密码
email	邮箱：提供了一个电子邮箱的完整验证如果不满住不会提交
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

pig-qr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习

H5学习语义标签<body> <header>头部区域</header> <section> <article>侧边栏内容</article> <aside>内容之外的内容</aside> </section> <fo...
复制链接

扫一扫