H5

HTML接口

1、监听网络状态接口（只在移动端起作用）

1
2
3
4
//online 网络连接事件
window.add

//offline 网络链接事件

2、全屏接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//请求全屏(操作对象是DOM元素)
if(DOM.requestFullScreen){
	DOM.requestFullScreen();
}else if(DOM.webkitRequestFullScreen){
	DOM.webkitRequestFullScreen();
}else if(DOM.mozRequestFullScreen){
	DOM.mozRequestFullScreen();
}else if(DOM.msRequestFullScreen){
	DOM.msRequestFullScreen();
}

//退出全屏(操作对象是document)
if(document.cancelFullScreen){
    document.cancelFullScreen();
}else if(document.webkitCancelFullScreen){
	document.webkitCancelFullScreen();
}else if(document.mozCancelFullScreen){
	document.mozCancelFullScreen();
}else if(document.msCancelFullScreen){
	document.msCancelFullScreen();
}

//是否是全屏状态(操作对象是document)
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement){
    console.log('true'); //全屏
}else{
    console.log('false');//非全屏
}

3、文件读取接口

1
2
3
4
<body>
	<input type="file" id="subfile">
    <img src="" id="img">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var img = document.getElementById('img');
var file = document.getElementById('subfile');
//onchange 当file input内容发生改变时触发
file.onchange = function(){
    //创建一个文件读取对象
    var reader = new FileReader();

    if (this.files && this.files.length > 0) {

        //读取上文头像的数据
        reader.readAsDataURL(this.files[0]);

        //数据读取成功之后回调函数
        reader.onload = function(){
            img.src = reader.result
        }

        //读取文件错误
        reader.onerror = function(){
            console.log('读取文件错误');
        }

        //读取的进度
        reader.onprogress=function(e){
            var percent = e.loaded/e.total*100+"%";
            console.log(percent);
        }
    }    
}

4、拖拽接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//作用于被拖动元素的
	//ondragstart  拖动开始
	//ondragend    拖动结束
	//ondrag       拖动过程中


	//作用于目标元素的
	//ondragenter   进入目标元素
	//ondragleave   移开目标元素
	//ondragover    在目标元素上移动。要在这个方法中阻止默认时间，ondrop方法才会执行
	//ondrop        在目标元素上丢下


    //向剪切板中存了一条数据（key是element，值是被拖动元素的id信息）
e.dataTransfer.setData("element",e.target.id);
//从剪切板中获取数据
var id = e.dataTransfer.getData("element");

例子

1
2
3
4
5
6
7
<body>
    <div id="box1">
        <p id="p1">xxxxxxxxxxx</p>
        <p id="p2">xxxxxxxxxxx</p>
    </div>
    <div id="box2"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');

document.ondragstart = function(e){
    //e.dataTransfer类似剪贴板 且只保存字符串形式的数据
    e.dataTransfer.setData('ele',e.target.id);
    // e.target.style.cursor = 'move'; 
}
document.ondragend = function(){

}
document.ondrag = function(e){

}

document.ondragenter = function(){

}
document.ondragleave = function(){

}
document.ondragover = function(e){
    e.preventDefault();
}
//若要是ondrop生效 需要取消ondragover的默认操作
document.ondrop = function(e){
    var id = e.dataTransfer.getData('ele');
    e.target.appendChild(document.getElementById(id));
}

数据存储

1
2
3
4
localStorage.setItem("key","value");   //以key来存储一条数据
localStorage.getItem("key");        //以key来获取数据
localStorage.removeItem("key");    //以key来移除数据
localStorage. clear();              //清除localStorage中的内容

应用缓存

步骤

1、创建一个扩展名是appcache的文件，并进行配置，配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
#后面写注释

#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../第1阶段HTML/img/三国演义.jpg
../第1阶段HTML/img/水浒传.jpg
../第1阶段HTML/img/红楼梦.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../第1阶段HTML/img/西游记.jpg

#配置如果文件无法通过网络获取该文件则使用指定的文件进行替代
FALLBACK:
../第1阶段HTML/img/西游记.jpg ../第1阶段HTML/img/1.PNG
# /:代表所有文件

2、在html页面中的标签中添加属性manifest=”demo.appcache”

html文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<!--manifest="应用程序缓存清单文件的路径  建议文件的扩展名是appcache,这个文件的本质就是一个文本文件"-->
<html lang="en" manifest="demo.appcache">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            img{
                width: 100px;
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="../第1阶段HTML/img/三国演义.jpg">
        <img src="../第1阶段HTML/img/水浒传.jpg">
        <img src="../第1阶段HTML/img/红楼梦.jpg">
        <img src="../第1阶段HTML/img/西游记.jpg">
    </body>
</html>

3、运行

在vscode中安装 live server插件，安装完成后，右键选择Open with live server打开。

4、测试

f12 –> Network –> Offline

视频播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
video.paused   视频是否正在播放
video.pause()   暂停视频播放
video.play()     开始视频播放
video.duration   获取视频的总时长
video.currentTime  获取视频当前播放的时长

//视频处于能够播放状态
video.oncanplay = function(){}

//视频播放过程中执行的回调函数
video.ontimeupdate = function(){}

//视频播放完毕
video.onended = function(){}

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="./jquery-1.12.2.js"></script>
        <script src="./common.js"></script>
        <title>Document</title>
        <style>
            body {
                padding: 0;
                margin: 0;
                font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
                background-color: #F7F7F7;
            }

            a {
                text-decoration: none;
            }

            .playerTitle{
                width:100%;
                margin: 0 auto;
                line-height:100px;
                font-size: 40px;
                text-align: center;
            }

            .player{
                width: 720px;
                height: 360px;
                margin: 0 auto;
                background: url("./images/loading.gif") center no-repeat;
                background-size: cover;
                position: relative;
            }
            video{
                height:100%;
                width: 100%;
                margin: 0 auto;
                display: none;
            }
            .controls {
                width: 720px;
                height: 40px;
                position: absolute;
                left: 0px;
                bottom: -40px;
                background-color: #000;
            }
            .controls > .switch{
                width: 20px;
                height: 20px;
                display: block;
                font-size: 20px;
                color: #fff;
                position: absolute;
                left: 10px;
                top: 10px;
            }
            .controls > .expand{
                width: 20px;
                height: 20px;
                display: block;
                font-size: 20px;
                color: #fff;
                position: absolute;
                right: 10px;
                top: 10px;
            }
            .controls > .progress{
                width: 430px;
                height: 10px;
                position: absolute;
                left:40px;
                bottom:15px;
                background-color: #555;
            }
            .controls > .progress > .bar{
                width:100%;
                height:100%;
                border-radius: 3px;
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                z-index: 999;
            }

            .controls > .progress > .elapse{
                width:0%;
                height:100%;
                background-color: #fff;
                border-radius: 3px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 3;
            }
            .controls > .time{
                height: 20px;
                position: absolute;
                left:490px;
                top: 10px;
                color: #fff;
                font-size: 14px;
            }

        </style>
   <body>
        <link rel="stylesheet" href="./fonts/font-awesome.css">
        <h3 class="playerTitle">视频播放器</h3>
        <div class="player">
            <video src="./mp4/chrome.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">
                    <!--bar是透明的，主要作用用来控制拖动-->
                    <div class="bar"></div>
                    <!--elapse主要用来显示已经播放的进度-->
                    <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>
            $(function(){
                var video = $('video')[0];
                var dur;
                //屏幕点击播放或者暂停
                $(video).click(function(){
                    if(video.paused){
                        video.play();
                    }else{
                        video.pause();
                    }
                    $('.switch').toggleClass('fa-play fa-pause');
                });

                //播放暂停按钮
                $('.switch').click(function(){
                    if(video.paused){
                        video.play();
                    }else{
                        video.pause();
                    }
                    $(this).toggleClass('fa-play fa-pause');
                });

                //正在播放的处理
                video.ontimeupdate = function(){
                    //时长显示
                    var cur = video.currentTime;
                    $('.currentTime').text(getFormatStr(cur));
                    //进度条显示
                    var percent = cur/dur*100;
                    console.log(percent);
                    $('.elapse').css('width',percent+'%');
                }
                //双击视频全屏
                $(video).dblclick(function(){
                    /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
                    if(video.requestFullScreen){
                        video.requestFullScreen();
                    }
                    else if(video.webkitRequestFullScreen){
                        video.webkitRequestFullScreen();
                    }
                    else if(video.mozRequestFullScreen){
                        video.mozRequestFullScreen();
                    }
                    else if(video.msRequestFullScreen){
                        video.msRequestFullScreen();
                    }
                });

                //全屏
                $(".expand").click(function(){
                    /*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
                    if(video.requestFullScreen){
                        video.requestFullScreen();
                    }
                    else if(video.webkitRequestFullScreen){
                        video.webkitRequestFullScreen();
                    }
                    else if(video.mozRequestFullScreen){
                        video.mozRequestFullScreen();
                    }
                    else if(video.msRequestFullScreen){
                        video.msRequestFullScreen();
                    }
                });

                //视频加载完毕可以播放时 触发事件
                video.oncanplay = function(){
                    //多媒体总时长
                    dur = video.duration;
                    $('.totalTime').text(getFormatStr(dur));
                    $(this).show();
                }
            })  
        </script>
        </body>
</html>

first-child 和 first-of-type

1
2
3
4
5
6
7
8
/*找到P元素,通过P找到父元素，通过父元素找所有的子元素，找第一个元素，匹配判断类型(如果不是无效选择器)*/
p:first-child{
       background-color: red;
}
/*找到P元素，通过P找到父元素，通过父元素找子元素当中类型为P的，然再去找第几个*/
p:first-of-type{
       background-color: blue;
}

伪类选择器与为元素选择器的区别

​ css之后规定 伪类选择器为一个冒号: 元素选择器为两个冒号::

伪类选择器之所以称作为伪类选择器，是因为作用域类选择器类似。

​ 可以认为，伪类选择器为指定元素以类选择器的方式设置样式。直接为当前元素设置样式。

伪元素选择器实质上是临时给指定的内容外面包裹了一个元素(这个元素是无法知道的，下面我们以为例)。在对此元素增加样式。

如

1
2
3
div::first-letter{
  color:green;
}
1
2
3
<div>这是一个div</div>
<!-- 经过伪元素选择器的修饰后 -->
<div><i style="color:green">这</i>是一个div</div> <!-- 实质上这个 i 元素我们是看不到的 -->

伪元素选择器

1
2
3
4
5
6
7
8
9
10
11
::after

::before

::first-letter

::first-line

::selection

::backdrop

最后更新： 2019年09月02日 11:07

原始链接： https://HowlCN1997.github.io/2019/02/15/H5/

赏
× 请我吃糖~
打赏二维码