HTML小案例

字数统计: 4.3k字   |   阅读时长: 22分
阅读量 40

tab栏切换案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}

.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}
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

.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
}

nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}

nav a:last-child {
border-right: 0 none;
}

nav a.active {
background-color: #9BAF9B;
}

.cont {
overflow: hidden;
display: none;
}

.cont ol {
line-height: 30px;
}
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local" >
<ol>
<li>河感在生矿难，死伤在全10</li>
<li>禽流感在感在广1处继续蔓延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广在全国暴发</li>
<li>禽流感在全国多处继续蔓延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>河南再次发生矿难，死伤人数超过100</li>
<li>禽流感次发生蔓延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广减产绝收发</li>
<li>禽流感在全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>333河南再次发生矿难，死伤人数超过100</li>
<li>禽流感在全国多处农作物农延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延，温家宝指示</li>
<li>南方大农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
<li>四川原副省长李成云被查 5年前曾违纪又复出</li>
<li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>
<li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
<li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
<li>国子监大街门匾现错字 已悬挂近10年(图)</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
</div>
<script>
// 目标： 默认显示一个 当前的样式
// 点击导航，实现切换
// key 表示的当前显示的是第几个

(function(key){
// 获取所有的导航
var navs=document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件，并且添加当前样式
for(var i=0;i<navs.length;i++){
// 如果是用户指定的当前样式
if(key==i){
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId=navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#'+secId).style.display='block';
}

// 给每一个导航绑定点击事件
navs[i].onclick=function(){
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav=document.querySelector('.active');
// 获取对应的内容区域 ，让其隐藏
var currentId=currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#'+currentId).style.display='none';

// 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId=this.dataset['cont'];
document.querySelector('#'+myId).style.display='block';
}
}

})(0);
</script>

拖拽案例

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1,.box2{
width: 400px;
height: 400px;
border: 1px solid #000;
}

.box1 div,.box2 div{
width: 80px;
width: 97px;
height: 97px;
background-color: red;
border-radius: 50%;
float: left;
border: 1px solid #000;
text-align: center;
line-height: 100px;
}

.box2{
position: absolute;
left:600px;
top:100px;
}


</style>
</head>
<body>
<div class="box1">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="box2">

</div>

<script>
var box1=document.querySelector('.box1');
var box2=document.querySelector('.box2');

var boxs=document.querySelectorAll('.box1 div');

var temp=null;

for(var i=0;i<boxs.length;i++){
boxs[i].addEventListener('dragstart',function(){
temp=this;
});
}

box2.addEventListener('dragover',function(e){
e.preventDefault();
});

box2.addEventListener('drop',function(e){
box2.appendChild(temp);
temp=null;
});
</script>
</body>
</html>

记住用户名

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label for="">
用户名：<input type="text" class="userName"/>
</label>
<br/><br/>
<label for="">
密 码：<input type="text" class="pwd"/>
</label>
<br/><br/>
<label for="">
<input type="checkbox" class="check" id=""/>记住密码
</label>
<br/><br/>
<button>登录</button>

<script>
var userName=document.querySelector('.userName');
var pwd=document.querySelector('.pwd');
var chk=document.querySelector('.check');
var btn=document.querySelector('button');

// 当点击登录的时候 如果需要记住密码： 存储密码，否则 清除密码
btn.onclick=function(){
if(chk.checked){
// 记住数据
window.localStorage.setItem('userName',userName.value);
window.localStorage.setItem('pwd',pwd.value);
}else{
// 清除数据
window.localStorage.removeItem('userName');
window.localStorage.removeItem('pwd');
}
}
// 下次登录的 ，如果记录的有数据 直接填充
window.onload=function(){
userName.value=window.localStorage.getItem('userName');
pwd.value=window.localStorage.getItem('pwd');

}
</script>
</body>
</html>

表单类型

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin:0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}

input{
display: block;
width: 100%;
height:30px;
margin:10px 0;
}
</style>
</head>
<body>
<!-- type：表单的类型-->
<!--<input type="file" />-->
<form action="">
<fieldset>
<legend>表单属性</legend>

<label for="">
email: <input type="email" name="email" id=""/>
</label>

<label for="">
url: <input type="url" name="url" />
</label>

<label for="">
number: <input type="number" name="number" step="3" />
</label>

<label for="">
tel: <input type="tel" name="tel" />
</label>

<label for="">
search: <input type="search" name="search" />
</label>

<label for="">
range: <input type="range" name="range" value="100" min="0" max="300"/>
</label>

<label for="">
color: <input type="color" name="color" />
</label>

<label for="">
time: <input type="time" name="time" />
</label>

<label for="">
date: <input type="date" name="date" />
</label>

<label for="">
month: <input type="month" name="month" />
</label>

<label for="">
week: <input type="week" name="week" />
</label>




<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>

下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<select >
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
<option>选项1</option>
</select>
<br/><br/><br/>
<!-- 一个普通的输入框-->
<input type="text" list="car" />

<!--数据列表标签-->
<datalist id="car">
<option>宝马</option>
<option>宝骏</option>
<option>宝强</option>
<option>宝宝</option>
<option>奥迪</option>
<option>奥迪奥</option>
<option>迪奥</option>
</datalist>

表单元素

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin:0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}

input,meter,progress{
display: block;
width: 100%;
height:30px;
margin:10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单元素</legend>
<label>
用户名：<input type="text" name="userName" />
</label>

<label>
密码：<input type="password" name="pwd" />
</label>
<label >
性别：<input type="text" name="sex" list="sex" />
</label>

<!-- 定义数据列表-->
<datalist id="sex">
<option >男</option>
<option >女</option>
<option >不祥</option>
</datalist>

<label for="">
推荐人：<output>春哥</output>
</label>
<br/><br/>
<label for="">
加密类型： <keygen/>
</label>
<br/><br/>
<label for="#">
度量器：<meter value="80" max="100" min="0" low="30" high="80"></meter>
</label>
<!-- 进度条-->
<progress value="40" max="100" min="0"></progress>
<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>

表单属性

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin:0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}

input{
display: block;
width: 100%;
height:30px;
margin:10px 0;
}
</style>
</head>
<body>
<!--&lt;!&ndash; 表单新增属性&ndash;&gt;-->
<!--<input type="text" class="name" />-->
<!--
placeholder:提示文字（占位符）
autofocus:自动获取焦点
autocomplete: 自动完成（填充的） on 开启（默认） off 取消自动提示
required: 必填
multiple: 多选
novalidate:关闭默认的验证功能（只能加给form）
pattern: 自定义正则验证
pattern="1\d{10}"
-->
<!--<form action="" novalidate>-->
<form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="on" required/>
</label>

<label for="">
电话：<input type="tel" pattern="1\d{10}" />
</label>

<!-- 上次文件-->
<input type="file" name="file" multiple/>

<input type="submit" />
</fieldset>
</form>

</body>
</html>

表单事件

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin:0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}

input{
display: block;
width: 100%;
height:30px;
margin:10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱：<input type="email" name="" id="txt1"/>
</label>
<label for="">
密码：<input type="text" name="" id="txt2"/>
</label>

<input type="submit" />
</fieldset>
</form>
<script>
//表单事件： oninput　当用户输入的时候
// oninvalid 当验证不通过是触发
var txt1=document.getElementById('txt1');
var txt2=document.getElementById('txt2');
var num=0;

txt1.oninput=function(){
num++;
// 将字数显示在txt2中
txt2.value=num;
}
// oninvalid 当验证不通过是触发
// 一般用于设置验证不通过时的 提示文字
txt1.oninvalid=function(){
// 用于设置验证不通过时的 提示文字
this.setCustomValidity('亲，请输入正确的邮箱格式！');
}

</script>
</body>
</html>

自己控制多媒体的进度条的样式

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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 引入字体图标的文件-->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
*{
margin: 0;
padding: 0;
}
/*多媒体标题*/
figcaption{
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size:24px;
}

/* 播放器*/
.palyer{
width: 720px;
height: 360px;
margin:10px auto;
border: 1px solid #000;
background: url(images/loading.gif) center no-repeat #000;
background-size:auto 100%;
position: relative;
border-radius: 20px;

}

.palyer video{
height:100%;
display: block;
margin:0 auto;
/*display: none;*/
}

/* 控制条*/

.controls{
width: 700px;
height:40px;
background-color: rgba(255, 255, 0, 0.3);
position: absolute;
bottom:10px;
left:10px;
border-radius: 10px;
}
/*开关*/
.switch{
position: absolute;
width: 20px;
height: 20px;
left:10px;
top:10px;

text-align: center;
line-height: 20px;
color:yellow;

}
/*进度条*/
.progress{
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left:40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
/* 当前进度*/
.curr-progress{
width: 50%;
height: 10px;
background-color: #fff;
}
/* 时间模块*/
.time{
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
color:#fff;
position: absolute;
left:510px;
top:10px;
font-size:12px;

}
/*全屏*/
.extend{
position: absolute;
width: 20px;
height: 20px;

right:20px;
top:10px;

text-align: center;
line-height: 20px;
color:yellow;
}

</style>
</head>
<body>
<!-- 多媒体-->
<figure>
<!-- 多媒体标题-->
<figcaption>视频案例</figcaption>
<div class="palyer">
<video src="video/fun.mp4"></video>
<!-- 控制条-->
<div class="controls">
<!-- 播放暂停-->
<a href="#" class="switch icon-play"></a>
<div class="progress">
<!-- 当前进度-->
<div class="curr-progress"></div>
</div>
<!-- 时间-->
<div class="time">
<span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
</div>
<!-- 全屏-->
<a href="#" class="extend icon-resize-full"></a>
</div>

</div>
</figure>

<script>
// 思路：
/*
* 1、点击按钮 实现播放暂停并且切换图标
* 2、算出视频的总时显示出出来
* 3、当视频播放的时候，进度条同步，当前时间同步
* 4、点击实现全屏
*/

// 获取需要的标签
var video=document.querySelector('video');
// 播放按钮
var playBtn=document.querySelector('.switch');
// 当前进度条
var currProgress=document.querySelector('.curr-progress');
// 当前时间
var currTime=document.querySelector('.curr-time');
// 总时间
var totalTime=document.querySelector('.total-time');
// 全屏
var extend=document.querySelector('.extend');

var tTime=0;

// 1、点击按钮 实现播放暂停并且切换图标

playBtn.onclick=function(){
// 如果视频播放 就暂停，如果暂停 就播放
if(video.paused){
// 播放
video.play();
//切换图标
this.classList.remove('icon-play');
this.classList.add('icon-pause');
}else{
// 暂停
video.pause();
// 切换图标
this.classList.remove('icon-pause');
this.classList.add('icon-play');}
}

// 2、算出视频的总时显示出出来
// 当时加载完成后的事件，视频能播放的时候
video.oncanplay=function(){
// 获取视频总时长
tTime=video.duration;
console.log(tTime);

// 将总秒数 转换成 时分秒的格式：00：00:00
// 小时
var h=Math.floor(tTime/3600);
// 分钟
var m=Math.floor(tTime%3600/60);
// 秒
var s=Math.floor(tTime%60);

// console.log(h);
// console.log(m);
// console.log(s);

// 把数据格式转成 00:00：00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;


console.log(h);
console.log(m);
console.log(s);
// 显示出来
totalTime.innerHTML=h+":"+m+":"+s;
}
// * 3、当视频播放的时候，进度条同步，当前时间同步
// 当时当前时间更新的时候触发
video.ontimeupdate=function(){
// 获取视频当前播放的时间
// console.log(video.currentTime);
// 当前播放时间
var cTime=video.currentTime;
// 把格式转成00:00:00

var h=Math.floor(cTime/3600);
// 分钟
var m=Math.floor(cTime%3600/60);
// 秒
var s=Math.floor(cTime%60);

// 把数据格式转成 00:00：00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;

// 显示出当前时间
currTime.innerHTML=h+":"+m+":"+s;

// 改变进度条的宽度： 当前时间/总时间
var value=cTime/tTime;

currProgress.style.width=value*100+"%";

}

// 全屏
extend.onclick=function(){
// 全屏的h5代码
video.webkitRequestFullScreen();
}

</script>
</body>
</html>
赏

谢谢你请我吃糖果

 本文总阅读量次

扫一扫，分享到微信

微信分享二维码
Error: Comments Not Initialized
Styling with Markdown is supported
Powered by Gitment
总访问量: 28599| 总访客: 27616