AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

html+css+JavaScript例题

2017-11-28 1160
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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
<!DOCTYPE html>
< html >
 
     < head >
         < meta  charset = "utf-8"  />
         < title ></ title >
     </ head >
     <!--  引入样式文件  -->
     < link  rel = "stylesheet"  href = "css/style_A.css"  />
     <!--  引入脚本文件  -->
     < script  type = "text/javascript"  src = "js/operation.js" ></ script >
 
     <!-- 添加一个用于初始化的事件  -->
     < body  onload = "init()" >
         <!-- 打开修改或添加的操作窗口时，用来覆盖网页的div  -->
         < div  id = "back_div" >
             <!-- 作为进行添加操作的窗口，不打开时是隐藏的  -->
             < div  id = "addOperation" >
                 <!-- 让表单中的组件能够向右对齐  -->
                 < div  id = "main_div" >
                     < h2 >添加学生...</ h2 >
                     <!-- 收集并验证需要添加的数据  -->
                     < form  id = "add_from"  onsubmit = "return addStudent(this)" > <!-- 任何情况下都return false表单不提交 -->
                         < ul >
                             < li >
                                 < label >姓名：</ label >                                
                                 < input  type = "text"  required = "required"  placeholder = "姓名只能是中文"  name = "sname" 
                                     pattern = "[\u4E00-\u9FA5]{2,5}$"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >年龄：</ label >< input  type = "text"  required = "required"  placeholder = "周岁" 
                                     name = "age"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >性别：</ label >< label  style = "margin-left: 30px;" >男</ label >< input  type = "radio" 
                                     checked  name = "sex"  />< label  style = "margin-left: 70px;" >女</ label >< input  type = "radio"  name = "sex"  />
                                     < label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >住址：</ label >< input  type = "text"  required = "required"  placeholder = "联系地址" 
                                     name = "address"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >手机号码：</ label >< input  type = "text"  required = "required"  placeholder = "手机号码" 
                                     name = "phoneNumber"  pattern = "^1[34578]\d{9}$" />< label  class = "label" >*</ label >
                             </ li >
 
                             < button  id = "add_button"  type = "submit" >添加</ button >
                             < button  type = "button"  id = "close_button" >退出</ button >
                         </ ul >
                     </ form >
                 </ div >
             </ div >
             <!-- 作为进行修改操作的窗口，不打开时是隐藏的  -->
             < div  id = "editOperation" >
                 <!-- 让表单中的组件能够向右对齐  -->
                 < div  id = "editMain_div" >
                     < h2 >修改学生资料...</ h2 >
                     <!-- 收集并验证需要修改的数据  -->
                     < form  id = "edit_from"  onsubmit = "return editStudent(this)" >
                         < ul >
                             < li >
                                 < label >姓名：</ label >
                                 <!-- 隐藏域是用来记录需要修改的学生对象所在的数组下标的  -->
                                 < input  type = "hidden"  name = "arrayIndex"  />
                                 < input  type = "text"  required = "required"  placeholder = "姓名只能是中文"  name = "sname" 
                                     pattern = "[\u4E00-\u9FA5]{2,5}$"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >年龄：</ label >< input  type = "text"  required = "required"  placeholder = "周岁" 
                                     name = "age"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >性别：</ label >< label  style = "margin-left: 30px;" >男</ label >< input  type = "radio" 
                                     checked  name = "sex"  />< label  style = "margin-left: 70px;" >女</ label >< input  type = "radio"  name = "sex"  />
                                     < label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >住址：</ label >< input  type = "text"  required = "required"  placeholder = "联系地址" 
                                     name = "address"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >手机号码：</ label >< input  type = "text"  required = "required"  placeholder = "手机号码" 
                                     name = "phoneNumber"  pattern = "^1[34578]\d{9}$"  />< label  class = "label" >*</ label >
                             </ li >
 
                             < button  id = "edit_button"  type = "submit" >修改</ button >
                             < button  type = "button"  id = "editClose_button" >退出</ button >
 
                         </ ul >
                     </ form >
                 </ div >
             </ div >
         </ div >
 
         <!-- 让表格居中 -->
         < div  align = "center" >
             <!-- 以表格的方式显示数据 -->
             < table   id = "tableData"  cellspacing = "0"  >
                 < thead >
                     < tr >
                         < th >姓名</ th >
                         < th >年龄</ th >
                         < th >性别</ th >
                         < th >住址</ th >
                         < th >手机号码</ th >
                         < th >操作</ th >
                     </ tr >
                 </ thead >
                 <!-- 用于方便插入数据   -->
                 < tbody  id = "tableBody" >
 
                 </ tbody >
                 < tfoot >
                     < tr >
                         < td  colspan = "6"  align = "right" >
                             <!-- 注册相应的事件  -->
                             [
                             < a  href = "javascript://"  id = "addHref" >添加学生</ a >] 共计
                             < label  id = "rowCountLabel" >0</ label >行， 分
                             < label  id = "pageCountLabel" >0</ label >页， 当前是第
                             < label  id = "thisPageLable" >1</ label >页 [
                             < a  href = "javascript://"  id = "shouye" >首页</ a >] [
                             < a  href = "javascript://"  id = "shangyiye" >上一页</ a >] [
                             < a  href = "javascript://"  id = "xiayiye" >下一页</ a >] [
                             < a  href = "javascript://"  id = "weiye" >尾页</ a >]
                         </ td >
                     </ tr >
                 </ tfoot >
             </ table >
         </ div >
     </ body >
 
</ html >




CSS代码：

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
body{
     margin :  0px ;
}
#bac k_div{
     position :  absolute ;
     z-index :  997 ;
     width :  100% ;
     height :  100% ;
     background-color : rgba( 0 , 0 , 0 , 0.3 );
     display :  none ;
}
#add Operation,#editOperation{
     position :  absolute ;
     z-index :  998 ;
     width :  506px ;
     height :  333px ;
     top :  25% ;
     left :  35% ;
     background-color : cornflowerblue;
     border-radius:  10px ;
}
#tableData{
     width :  100% ;
     text-align :  center ;
}
#tableData thead tr th{
     margin :  0px ;
     font-size : 20px  ;
     box-shadow:  0px  10px  10px  darkgray;
     background-color : rgba( 230 , 230 , 230 , 0.5 );
}
#tableBody td{
     margin-top :  0px ;
     margin-bottom :  0px ;
     box-shadow:  0px  0px  3px  darkgray;
     background-color : rgba( 255 , 255 , 255 , 0.0 );
}
#tableBody tr:hover{
     height :  65px ;
     background-color : rgba( 230 , 230 , 230 , 0.3 );
}
#tableData tr td,th{
     padding :  20px ;
}
  a{
     text-decoration :  none ;
     
     color :  #6495ED ;
}
#delete{
     color :  red ;
}
  a:hover{
     text-decoration :  underline ;
     color : chocolate;
}
.label{
     color :  red ;
     margin-left : 5px ;
}
ul{
     list-style :  none ;
}
#main_div button,#editMain_div button{
     position :  absolute ;
     text-align :  left ;
}
#main_div button:hover{
     background-color : dimgray;
     color :  #D2691E ;
     border :  1px  solid  dimgray;
}
#editMain_div button:hover{
     background-color :  #6495ED ;
     color :  white ;
     border :  1px  solid  dimgray;
}
ul li{
     margin :  20px ;
}
#main_div,#editMain_div{
     width :  380px ;
     text-align :  right ;
}
#main_div h 2 ,#editMain_div h 2 {
     font-weight :  500 ;
     text-align :  left ;
     margin-left :  15px ;
}
#add _button,#edit_button{
     left :  175px ;
}
#close_button,#editClose_button{
     left :  305px ;
}





JavaScript代码：

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
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
//用于存储学生对象的数组
var  students =  new  Array();
 
//总共能分多少页数
var  pageConut = 0;
 
//当前页数
var  thisPage = 0;
 
//通过元素ID查找到元素对象，然后返回出去
function  $(element_ID) {
     return  window.document.getElementById(element_ID);
}
 
//关闭用于覆盖网页的div
function  close_div() {
     $( "back_div" ).style.display =  "none" ;
}
 
//打开添加学生资料的div
function  open_add() {
     $( "back_div" ).style.display =  "block" ;
     $( "addOperation" ).style.display =  "block" ;
     $( "editOperation" ).style.display =  "none" ;
}
 
//打开修改学生资料的div
function  open_edit() {
     $( "addOperation" ).style.display =  "none" ;
     $( "back_div" ).style.display =  "block" ;
     $( "editOperation" ).style.display =  "block" ;
}
 
//随便注入一些数据来测试用的
function  initData() {
     for ( var  i = 0; i <= 10; i++) {
         var  stu =  new  Student( "test"  + i, 12,  "男" ,  "湖南"  + i,  "15820365112" );
         students.push(stu);
     }
}
 
//初始化方法，主要用来给各个元素添加事件
function  init() {
     //初始化时注入一些数据来测试效果
     initData();
     
     //在初始化时显示第一页
     showStudentAll(1);
     
     //点击这个超链接后就能打开添加学生资料的窗口
     $( "addHref" ).onclick =  function () {
         open_add();
     }
     //点击这个按钮后就能退出添加学生资料的窗口
     $( "close_button" ).onclick =  function () {
         close_div();
     }
     //点击这个按钮后就能退出修改学生资料的窗口
     $( "editClose_button" ).onclick =  function () {
         close_div();
     }
 
     //点击这个超链接后就能跳转到首页
     $( "shouye" ).onclick =  function () {
         //如果只有一页就不跳到首页，并告诉用户只有一页数据
         if (pageConut == 1) {
             alert( "当前只有一页！" );
             return ;
         }
         //如果不止一页就可以跳到首页
         showStudentAll(1);
     }
     
     //点击这个超链接后就能跳转到上一页
     $( "shangyiye" ).onclick =  function () {
         //如果当前是第一页就停留，否则跳转到到上一页
         showStudentAll(thisPage == 1 ? 1 : thisPage - 1);
     }
     
     //点击这个超链接后就能跳转到下一页
     $( "xiayiye" ).onclick =  function () {
 
         //如果当前是最后一页就停留，否则跳转到到下一页
         showStudentAll(thisPage == pageConut ? pageConut : thisPage + 1);
     }
     
     //点击这个超链接后就能跳转到尾页
     $( "weiye" ).onclick =  function () {
         //如果只有一页或者当前就在尾页的话就不跳到尾页，并提示用户
         if (pageConut == 1) {
             alert( "当前只有一页！" );
             return ;
         } else  if (pageConut==thisPage){
             alert( "已经是尾页了！" );
             return ;
         }
         //如果不止一页或不在尾页就可以跳到尾页
         showStudentAll(pageConut);
     }
}
 
//以数组下标来删除学生数据
function  delStudent(index) {
     //询问用户是否确定删除数据，确定才进行删除
     if (window.confirm( "确定删除此数据吗？" )) {
         students.splice(index, 1);
     }
     //删除后刷新当前页面
     showStudentAll(thisPage);
}
 
//通过数组下标来获得需要修改的学生对象，并将此对象的数据显示在div窗口的表单上
function  showStudentEditDiv(index) {
     open_edit();
     //通过数组下标，拿出需要修改的学生数据对象
     var  stuObj = students[index];
     
     //把从数组里拿出来的对象数据，显示在表单上
     $( "edit_from" ).arrayIndex.value = index; //隐藏域是用来记录需要修改的学生对象所在的数组下标的
     $( "edit_from" ).sname.value = stuObj.name;
     $( "edit_from" ).age.value = stuObj.age;
     $( "edit_from" ).address.value = stuObj.address;
     $( "edit_from" ).phoneNumber.value = stuObj.phoneNumber;
 
     //先删除性别单选框里的checked属性，让两个单选框都不被选中
     $( "edit_from" ).sex[0].removeAttribute( "checked" );
     $( "edit_from" ).sex[1].removeAttribute( "checked" );
 
     //如果性别为“男”，就给“男”单选框添加checked属性，让这个单选框被选中，否则反之
     if (stuObj.sex ==  "男" ) {
         $( "edit_from" ).sex[0].setAttribute( "checked" ,  "true" );
     }  else  {
         $( "edit_from" ).sex[1].setAttribute( "checked" ,  "true" );
     }
 
}
 
//学生数据的封装类
function  Student(name, age, sex, address, phoneNumber) {
     this .name = name;
     this .age = age;
     this .sex = sex;
     this .address = address;
     this .phoneNumber = phoneNumber;
}
 
//将当前页码的学生数据呈现出来
function  showStudentAll(page) {
 
     //存储当前页码
     thisPage = page;
     
     //以10行为一页，计算总共分几页              //因为以10行为一页，所以数组长度除以10
     pageConut = Math.floor((students.length / 10) + (students.length % 10 == 0 ? 0 : 1));
                                                     //这里是要得出余数，因为如果尾页的行数少于10行的话，就得分一页出来，
                                                     //如果刚好是10行的话，就不需要分了已经能够整除了
     var  htmlStr =  "" ;  //用字符串存储组合好的html标签
     var  rowNum = 0;  //此变量作为循环的跳出条件之一
     
     //循环添加学生数据
                /*使用当前页数计算出前一页数据所占的行数，
                       并以此作为变量的初始值，让变量在这个节
                       点上进行增长，所以进入某页或者在某页添
                       加一行数据都是在这个节点上进行重新添加*/
     for ( var  i = ((page - 1) * 10); i < students.length && rowNum++ != 10; i++) {
                                                           //添加到第十行就要跳出循环                                                        
         var  stuObj = students[i];  //拿取学生对象
         
         //利用数组合成html标签，并将学生对象里的数据添加进去
         var  trStr = [ "<tr>" ,
             "<td>" ,
             stuObj.name,
             "</td>" ,
             "<td>" ,
             stuObj.age,
             "</td>" ,
             "<td>" ,
             stuObj.sex,
             "</td>" ,
             "<td>" ,
             stuObj.address,
             "</td>" ,
             "<td>" ,
             stuObj.phoneNumber,
             "</td>" ,
             "<td>" ,
             //添加事件，并把每行数据的数组下标记录在参数里
             "【<a href='javascript://' id='delete' onclick='delStudent(" , i,  ")'>删除</a>】" ,
             "【<a href='javascript://' onclick='showStudentEditDiv(" , i,  ")'>修改</a>】" ,
             "</td>" ,
             "</tr>"
         ].join( "" ); //将字符串数组合成一个字符串
 
         //alert(htmlStr);
         htmlStr += trStr;  //将合成后的字符串存储到该变量中
 
     }
     //把组合成的标签插入到tableBody里，也就是将数据显示到表格上
     $( "tableBody" ).innerHTML = htmlStr;
     //显示总行数
     $( "rowCountLabel" ).innerText = students.length;
     //显示总共分了几页
     $( "pageCountLabel" ).innerText = pageConut;
     //显示当前在第几页
     $( "thisPageLable" ).innerText = thisPage;
}
 
//添加学生资料，参数为表单对象
function  addStudent(fromObj) {
     //收集表单数据
     var  name = fromObj.sname.value;
     var  age = fromObj.age.value;
     var  sex = fromObj.sex[0].checked ?  "男"  :  "女" ;
     var  address = fromObj.address.value;
     var  phoneNumber = fromObj.phoneNumber.value;
 
     //在控制台打印日志信息，看看收集表单数据的过程有没有出问题
     console.log(name);
     console.log(age);
     console.log(sex);
     console.log(address);
     console.log(phoneNumber);
 
     //把收集到的学生数据封装到对象里
     var  stu =  new  Student(name, age, sex, address, phoneNumber);
     students.push(stu);  //然后把对象添加到数组里
 
     //重置表单数据
     fromObj.reset();
     //关闭添加窗口
     close_div();
     //显示当前页面的数据，也可以说是刷新
     showStudentAll(thisPage);
     //不提交表单
     return  false ;
 
}
 
//修改学生资料，参数为表单对象
function  editStudent(fromObj) {
     //收集表单数据
     var  name = fromObj.sname.value;
     var  age = fromObj.age.value;
     //有checked属性的就会返回true
     var  sex = fromObj.sex[0].checked ?  "男"  :  "女" ;
     var  address = fromObj.address.value;
     var  phoneNumber = fromObj.phoneNumber.value;
     var  arrayIndex = fromObj.arrayIndex.value;
 
     //在控制台打印日志信息，看看收集表单数据的过程有没有出问题
     console.log(name);
     console.log(age);
     console.log(sex);
     console.log(address);
     console.log(phoneNumber);
     console.log(arrayIndex);
 
     //通过隐藏域记录的数组下标拿出学生对象
     var  stuObj = students[arrayIndex];
 
     //将这个对象的数据重新覆盖一遍
     stuObj.name = name;
     stuObj.age = age;
     stuObj.sex = sex;
     stuObj.address = address;
     stuObj.phoneNumber = phoneNumber;
 
     //重置表单数据
     fromObj.reset();
     //关闭修改窗口
     close_div();
     //刷新当前页面
     showStudentAll(thisPage);
     //不提交表单
     return  false ;
 
}




运行结果：

9ee6c1dade22d2bf32cc3ec4b5ede8ec.png


2070da706cac129f40e30d149dd400cb.png

b6b98d89ed95c17488e6d74de5e0b720.png




本文转自 ZeroOne01 51CTO博客，原文链接：http://blog.51cto.com/zero01/1977526，如需转载请自行联系原作者

文章标签：
前端开发
JavaScript
Web App开发
存储
关键词：
JavaScript CSS
HTML CSS
HTML JavaScript
JavaScript HTML
HTML CSS JavaScript
技术小阿哥
目录
相关文章
花非花雾非雾11
|
1天前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
花非花雾非雾11
15 3
游客zi3qmblbcdexu
|
9天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
36 9
html的七十二变
|
7天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript（JS）和HTML代码的分离虽非绝对必要，但通常被推荐
html的七十二变
15 5
游客zi3qmblbcdexu
|
7天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身：如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身：如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
游客zi3qmblbcdexu
29 4
程序员小海绵
|
6天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
程序员小海绵
17 0
JavaWeb基础4——HTML,JavaScript&CSS
算精通
|
19天前
|
前端开发 JavaScript
JavaScript 动态更新 CSS
【9月更文挑战第01天】
算精通
12 2
听白
|
6天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
听白
11 0
请看我回答~
|
19天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML、CSS与JavaScript之旅
在这个数字时代，拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始，使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念，并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者，这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
请看我回答~
34 0
青竹雾色间
|
前端开发 开发者
HTML+CSS+JS 学习笔记（二）———CSS
HTML+CSS+JS 学习笔记（二）———CSS
青竹雾色间
176 0
青竹雾色间
|
移动开发 前端开发 搜索推荐
HTML+CSS+JS 学习笔记（一）———HTML(上)
HTML+CSS+JS 学习笔记（一）———HTML(上)
青竹雾色间
101 0
HTML+CSS+JS 学习笔记（一）———HTML(上)