首页 > 代码库 > 周末作业：图书管理系统（前端）
周末作业：图书管理系统（前端）
1、完成书籍的添加、编辑、删除功能。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>图书管理系统</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 /*font-size: 12px;*/ 13 } 14 15 a { 16 text-decoration: none; 17 color: darkgray; 18 } 19 20 .head { 21 position: relative; 22 width: 100%; 23 height: 45px; 24 line-height: 45px; 25 background: rgba(0, 0, 0, 0.79); 26 z-index: 1000; 27 } 28 29 .title { 30 color: white; 31 float: left; 32 font-size: 20px; 33 font-weight: 600; 34 letter-spacing: 3px; 35 margin-left: 100px; 36 } 37 38 .head > a { 39 margin-left: 100px; 40 } 41 42 .login { 43 display: block; 44 float: right; 45 margin-right: 100px; 46 } 47 48 .login span { 49 color: white; 50 } 51 52 .login a { 53 margin: 0 16px; 54 } 55 56 .middle { 57 position: relative; 58 } 59 60 .left { 61 display: inline-block; 62 width: 15%; 63 height: 500px; 64 border-right: 1px black solid; 65 margin: 0 auto; 66 text-align: center; 67 } 68 69 .left > div { 70 margin-top: 20px; 71 background: #396bb3; 72 color: white; 73 height: 35px; 74 line-height: 35px; 75 } 76 77 .left a { 78 display: block; 79 width: 200px; 80 text-align: left; 81 margin: 5px 0 0 23px; 82 color: #396bb3; 83 } 84 85 .right { 86 display: inline-block; 87 position: absolute; 88 width: 84.9%; 89 90 } 91 92 .find { 93 position: relative; 94 margin: 15px 6%; 95 text-align: right; 96 } 97 98 .find span { 99 display: inline-block; 100 background: gray; 101 padding-left: 25px; 102 background: #f4f4f4; 103 border: solid 1px #c9c9c9;; 104 border-radius: 5px; 105 } 106 107 .find input { 108 display: inline; 109 width: 150px; 110 height: 30px; 111 border: none; 112 border-left: 1px solid #c9c9c9; 113 border-bottom-right-radius: 5px; 114 border-top-right-radius: 5px; 115 } 116 117 button, .find button { 118 width: 50px; 119 height: 30px; 120 background-color: #396bb3; 121 color: white; 122 border: solid 1px; 123 border-radius: 4px; 124 } 125 126 .tb { 127 width: 90%; 128 margin: 0 auto; 129 130 border-collapse: collapse; 131 } 132 133 .col_1 { 134 width: 10%; 135 } 136 137 .col_6 { 138 width: 15%; 139 } 140 141 .col_7 { 142 width: 25% 143 } 144 145 .col_7 .view { 146 background-color: #339900; 147 } 148 149 .col_7 .edit { 150 background-color: orange; 151 } 152 153 .col_7 .del { 154 background-color: firebrick; 155 } 156 157 tr { 158 text-align: center; 159 border-top: 1px solid #c9c9c9; 160 } 161 162 td, th { 163 padding: 10px 0; 164 } 165 166 .page { 167 margin: 20px auto; 168 height: 34px; 169 } 170 171 .page ul { 172 height: 34px; 173 width: 50%; 174 position: relative; 175 left: 37%; 176 } 177 178 .page li { 179 float: left; 180 display: inline; 181 height: 34px; 182 line-height: 32px; 183 text-align: center; 184 font-size: 12px; 185 } 186 187 .page1 { 188 width: 34px; 189 line-height: 36px; 190 color: white; 191 background-color: #396bb3; 192 } 193 194 .page a { 195 196 float: left; 197 color: #396bb3; 198 width: 34px; 199 border: 1px solid #e1e1e1; 200 } 201 202 .page a:hover { 203 color: #fff; 204 background-color: #396bb3; 205 border: 1px solid #396bb3; 206 } 207 208 .page .page_edge { 209 width: 50px; 210 } 211 212 .bottom { 213 margin-top: 20px; 214 text-align: center; 215 font-size: 14px; 216 } 217 218 .pb { 219 font-weight: 600; 220 } 221 222 .pb span { 223 color: #396bb3; 224 } 225 226 .hide { 227 display: none; 228 } 229 230 .bg { 231 position: fixed; 232 width: 100%; 233 height: 100%; 234 background-color: gray; 235 opacity: 0.3; 236 z-index: 1; 237 238 } 239 240 .add_text { 241 background: white; 242 position: fixed; 243 left: 50%; 244 top: 50%; 245 margin-top: -150px; 246 margin-left: -150px; 247 width: 350px; 248 height: 300px; 249 padding-top: 15px; 250 z-index: 1; 251 252 } 253 254 .add_text input { 255 width: 180px; 256 height: 25px; 257 font-size: 14px; 258 margin: 10px; 259 border: 1px solid gray; 260 border-radius: 2px; 261 } 262 263 .add_text p { 264 text-align: center; 265 margin: 10px 0; 266 line-height: 44px; 267 } 268 269 .add_text button { 270 width: 60px; 271 height: 30px; 272 margin: 5px; 273 } 274 275 select { 276 width: 25%; 277 } 278 279 </style> 280 </head> 281 <body> 282 <div class="bg hide handel"></div> 283 <div class="add_text hide handel"> 284 <p>书名:<input name="book" placeholder=""></p> 285 <p>作者:<input name="author" placeholder=""></p> 286 <p>价格:<input name="price" placeholder=""></p> 287 <p>分类: 288 <select name="classify"> 289 <option id="计算机" value="计算机">计算机</option> 290 <option id="文学" value="文学">文学</option> 291 </select></p> 292 <p id="butt"> 293 <button class="confirm">确定</button> 294 <button class="cancel">取消</button> 295 </p> 296 </div> 297 <div class="all"> 298 <div class="head"> 299 <span class="title">图书管理系统</span> 300 <a href="#1">首页</a> 301 <span class="login"> 302 <a href="#2">欢迎你</a><span>Shaw</span> 303 <a href="#3">注销</a> 304 <a href="#4">修改密码</a> 305 </span> 306 </div> 307 <div class="middle"> 308 <div class="left"> 309 <div>操作</div> 310 <a id="add_book" href="#"> 311 <div> >>>添加书籍</div> 312 </a> 313 <a href="#"> 314 <div> >>>草稿箱</div> 315 </a> 316 <a href="#"> 317 <div> >>>设置默认编辑器</div> 318 </a> 319 <a href="#"> 320 <div> >>>备份书籍</div> 321 </a> 322 323 </div> 324 <div class="right"> 325 <div class="find"> 326 <span><input id="find_text" type="text" placeholder=" Title" value=""></span> 327 <button id="find_btn">查找</button> 328 </div> 329 <div class="content"> 330 <table class="tb"> 331 <tr class="row_t"> 332 <th class="col_1">图书编号</th> 333 <th class="col_2">书名</th> 334 <th class="col_3">作者</th> 335 <th class="col_4">价格</th> 336 <th class="col_5">分类</th> 337 <th class="col_6">上架时间</th> 338 <th class="col_7">操作</th> 339 </tr> 340 <tr class="row hide"> 341 <td class="col_1">15662</td> 342 <td class="col_2">金瓶</td> 343 <td class="col_3">egon</td> 344 <td class="col_4">12.00</td> 345 <td class="col_5">计算机</td> 346 <td class="col_6">2017-08-03</td> 347 <td class="col_7"> 348 <button class="view">查看</button> 349 <button class="edit" onclick="redact(this)">编辑</button> 350 <button class="del" onclick="dell(this)">删除</button> 351 </td> 352 </tr> 353 <tr id="row_0"> 354 <td class="col_1">15663</td> 355 <td class="col_2">金瓶</td> 356 <td class="col_3">egon</td> 357 <td class="col_4">12.00</td> 358 <td class="col_5">计算机</td> 359 <td class="col_6">2017-08-03</td> 360 <td class="col_7"> 361 <button class="view">查看</button> 362 <button class="edit" onclick="redact(this)">编辑</button> 363 <button class="del" onclick="dell(this)">删除</button> 364 </td> 365 </tr> 366 <tr id="row_1"> 367 <td class="col_1">15664</td> 368 <td class="col_2">水浒传</td> 369 <td class="col_3">alex</td> 370 <td class="col_4">45.00</td> 371 <td class="col_5">文学</td> 372 <td class="col_6">2017-08-03</td> 373 <td class="col_7"> 374 <button class="view">查看</button> 375 <button class="edit" onclick="redact(this)">编辑</button> 376 <button class="del" onclick="dell(this)">删除</button> 377 </td> 378 </tr> 379 </table> 380 </div> 381 <div class="page"> 382 <ul> 383 <li><a href="" class="page_edge">上一页</a></li> 384 <li class="page1"><span>1</span></li> 385 <li><a href="" class="pagepa hide">2</a></li> 386 <li><a href="" class="page_edge">下一页</a></li> 387 </ul> 388 </div> 389 </div> 390 </div> 391 <div class="bottom"> 392 <p>?All rights reserved</p> 393 <p class="pb">Powered by <span>Shaw</span></p> 394 </div> 395 </div> 396 397 <script> 398 var add_book = document.getElementById("add_book"); 399 var handel = document.getElementsByClassName("handel"); 400 var confirm = document.getElementsByClassName("confirm")[0]; 401 var cancel = document.getElementsByClassName("cancel")[0]; 402 var user = document.getElementsByName("book")[0]; 403 var author = document.getElementsByName("author")[0]; 404 var price = document.getElementsByName("price")[0]; 405 var input = document.getElementsByTagName("input"); 406 var select = document.getElementsByName("classify")[0]; 407 408 var tag = 0; 409 var row_list = {}; 410 var row_all = document.getElementsByTagName("tr"); 411 412 for (var i = 2; i < row_all.length; i++) { 413 row_list[row_all[i].id] = row_all[i] 414 } 415 416 function list_lengh(list) { 417 var i = 0; 418 for (var j in list) { 419 i++; 420 } 421 return i; 422 } 423 424 console.log(row_list); 425 426 function dell(self) { 427 self.parentNode.parentNode.parentNode.removeChild(self.parentNode.parentNode) 428 } 429 430 function changeNum(num) { 431 if (num < 10) { 432 return "0" + num; 433 } else { 434 return num; 435 } 436 } 437 438 function getToday() { 439 var data = new Date(); 440 var year = data.getFullYear(); 441 var mon = data.getMonth() + 1; 442 var day = data.getDate(); 443 return year + "-" + changeNum(mon) + "-" + day; 444 445 } 446 447 function redact(self) { 448 console.log(select) 449 edit_row = self.parentElement.parentElement; 450 451 for (var i = 0; i < handel.length; i++) { 452 handel[i].classList.remove("hide"); 453 } 454 455 for (i = 0; i < input.length - 1; i++) { 456 input[i].value = edit_row.children[i + 1].innerText; 457 } 458 459 for (i = 0; i < select.options.length; i++) { 460 select.options[i].removeAttribute("selected"); 461 } 462 463 var de_select = document.getElementById(edit_row.children[4].innerText) 464 de_select.setAttribute("selected", "") 465 tag = 1; 466 } 467 468 add_book.onclick = function () { 469 for (i = 0; i < handel.length; i++) { 470 handel[i].classList.remove("hide") 471 } 472 }; 473 474 confirm.onclick = function () { 475 var message = []; 476 var row = document.getElementsByTagName("tr")[document.getElementsByTagName("tr").length - 1]; 477 var new_row = row.cloneNode(true); 478 var today = getToday(); 479 var flag = 1; 480 481 for (var i = 0; i < handel.length; i++) { 482 handel[i].classList.add("hide"); 483 } 484 485 if (!tag) { 486 new_row.classList.remove("hide"); 487 488 message[0] = Number(new_row.children[0].innerText) + 1; 489 for (i = 0; i < input.length - 1; i++) { 490 message.push(input[i].value); 491 input[i].value = ""; 492 } 493 message[message.length - 1] = Number(message[message.length - 1]).toFixed(2) 494 message.push(select.options[select.options.selectedIndex].innerText); 495 message.push(today); 496 console.log(message); 497 498 for (var j = 0; j < message.length; j++) { 499 console.log(new_row.children[j].innerText); 500 new_row.children[j].innerText = message[j] 501 } 502 for (var me in message) { 503 if (message[me].length == 0) { 504 flag = 0; 505 break; 506 } 507 } 508 509 if (flag) { 510 new_row.id = "row_" + list_lengh(row_list); 511 row_list[new_row.id] = new_row; 512 513 row.parentElement.appendChild(new_row); 514 } 515 else { 516 row.parentElement.removeChild(new_row); 517 alert("请填写完整的信息") 518 } 519 } 520 else { 521 message = []; 522 for (i = 0; i < input.length - 1; i++) { 523 message.push(input[i].value); 524 input[i].value = ""; 525 } 526 message[message.length - 1] = Number(message[message.length - 1]).toFixed(2) 527 message.push(select.options[select.options.selectedIndex].innerText); 528 529 console.log(message); 530 531 for (var m in message) { 532 if (message[m].length == 0) { 533 flag = 0; 534 break; 535 } 536 } 537 tag = 0; 538 539 if (flag) { 540 for (j = 0; j < message.length; j++) { 541 edit_row.children[j + 1].innerText = message[j] 542 } 543 console.log(row_list) 544 } 545 else { 546 alert("请填写完整的信息") 547 } 548 } 549 }; 550 551 cancel.onclick = function () { 552 for (var i = 0; i < input.length - 1; i++) { 553 input[i].value = ""; 554 } 555 for ( i = 0; i < handel.length; i++) { 556 handel[i].classList.add("hide"); 557 } 558 }; 559 560 var error = document.createElement("p"); 561 error.innerText = "2-10个字符，可使用字母、汉字、数字、不能是纯数字"; 562 error.style.color = "red"; 563 error.style.fontSize = "12px"; 564 error.style.lineHeight = "12px"; 565 error.style.float = "none"; 566 error.style.margin = "0"; 567 error.style.textAlign = "center"; 568 var error1 = error.cloneNode(true); 569 error1.innerText = "请输入正确的作者名"; 570 var error2 = error.cloneNode(true); 571 error2.innerText = "请输入正确的价格"; 572 573 user.onblur = function () { 574 575 if (!isNaN(user.value) || user.value.length > 10 || user.value.length < 2) { 576 577 if (!this.nextElementSibling) { 578 this.parentNode.appendChild(error) 579 } 580 } 581 else { 582 if (this.nextElementSibling) { 583 this.parentNode.removeChild(this.nextElementSibling) 584 } 585 } 586 587 }; 588 589 author.onblur = function () { 590 591 if (!isNaN(author.value) || author.value.length > 10 || author.value.length < 2) { 592 if (!this.nextElementSibling) { 593 this.parentNode.appendChild(error1) 594 } 595 } 596 else { 597 if (this.nextElementSibling) { 598 this.parentNode.removeChild(this.nextElementSibling) 599 } 600 } 601 }; 602 603 price.onblur = function () { 604 if (isNaN(price.value) || price.value.length == 0) { 605 606 if (!this.nextElementSibling) { 607 this.parentNode.appendChild(error2) 608 } 609 } 610 else { 611 if (this.nextElementSibling) { 612 this.parentNode.removeChild(this.nextElementSibling) 613 } 614 } 615 }; 616 </script> 617 </body> 618 </html>
周末作业：图书管理系统（前端）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。