开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

html+css+JavaScript例题

简介:
+关注继续查看

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{
    margin0px;
}
#back_div{
    positionabsolute;
    z-index997;
    width100%;
    height100%;
    background-color: rgba(0,0,0,0.3);
    displaynone;
}
#addOperation,#editOperation{
    positionabsolute;
    z-index998;
    width506px;
    height333px;
    top25%;
    left35%;
    background-color: cornflowerblue;
    border-radius: 10px;
}
#tableData{
    width100%;
    text-aligncenter;
}
#tableData thead tr th{
    margin0px;
    font-size:20px ;
    box-shadow: 0px 10px 10px darkgray;
    background-color: rgba(230,230,230,0.5);
}
#tableBody td{
    margin-top0px;
    margin-bottom0px;
    box-shadow: 0px 0px 3px darkgray;
    background-color: rgba(255,255,255,0.0);
}
#tableBody tr:hover{
    height65px;
    background-color: rgba(230,230,230,0.3);
}
#tableData tr td,th{
    padding20px;
}
 a{
    text-decorationnone;
     
    color#6495ED;
}
#delete{
    colorred;
}
 a:hover{
    text-decorationunderline;
    color: chocolate;
}
.label{
    colorred;
    margin-left:5px;
}
ul{
    list-stylenone;
}
#main_div button,#editMain_div button{
    positionabsolute;
    text-alignleft;
}
#main_div button:hover{
    background-color: dimgray;
    color#D2691E;
    border1px solid dimgray;
}
#editMain_div button:hover{
    background-color#6495ED;
    colorwhite;
    border1px solid dimgray;
}
ul li{
    margin20px;
}
#main_div,#editMain_div{
    width380px;
    text-alignright;
}
#main_div h2,#editMain_div h2{
    font-weight500;
    text-alignleft;
    margin-left15px;
}
#add_button,#edit_button{
    left175px;
}
#close_button,#editClose_button{
    left305px;
}





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,如需转载请自行联系原作者

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

相关文章
js和css基础知识总结
ajax里面在数据请求之前加layui.load()时,请求状态必须是异步的才行( async: true)
0 0
页面加载时会被 JS 和 CSS 阻塞吗?
之前写了两篇文章,涉及到了页面访问整个过程的一些分析,比如页面生命周期的介绍,页面访问时渲染过程中 HTML、JS 的关系,前面两篇只是抓住了 JS,没有囊括 CSS,并且在复现上没
0 0
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
0 0
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
0 0
HTML+CSS+JAVASCRIPT实现——球球坠落小游戏
本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分
0 0
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单
本篇文章,主要讲解一下如何创建一个响应式登录注册表单
0 0
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
0 0
思维-网页技术设计大作业前端HTML+CSS+JS(精美完整)
思维-网页技术设计大作业前端HTML+CSS+JS(精美完整)
0 0
旅游展示网站-前端网页设计技术完整精美源码HTML+CSS+JS
旅游展示网站-前端网页设计技术完整精美源码HTML+CSS+JS
0 0
服装商城电商-前端网页技术精美完整源码HTML+CSS+JS
服装商城电商-前端网页技术精美完整源码HTML+CSS+JS
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载