返回列表 發帖

Rank: 7Rank: 7Rank: 7
1# 跳轉到 » 倒序看帖
打印
tT
陳育霖發表於 2023-9-2 10:03 | 只看該作者

HTML+CSS+JavaScript練習

本帖最後由 陳育霖 於 2023-9-2 10:05 編輯

請使用HTML+CSS+JavaScript 完成以下內容
綠色為:#4caf50、邊框為:#ddd

本帖隱藏的內容需要回復才可以瀏覽
附件: 您需要登錄才可以下載或查看附件。沒有帳號？註冊
收藏 分享

Rank: 1
2#
蔡幸融發表於 2023-9-2 17:24 | 只看該作者
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <style>
  6.         body{
  7.             font-family: Arial, sans-serif;
  8.         }
  9.         header{
  10.             background-color: #ddd;
  11.             text-align: center;

  13.         }
  14.         input{
  15.             width: 30%;
  16.             padding: 8px;
  17.             margin-bottom: 10px;
  18.         }
  19.         button{
  20.             color: white;
  21.             background-color: #4caf50;
  22.             border: 0;
  23.             margin-top: 20px;
  24.             padding: 5px 10px;

  26.         }
  27.         select{
  28.             width: 30%;
  29.             padding: 8px;
  30.         }
  31.         table{
  32.             width: 100%;
  33.         }
  34.         table td{
  35.             border: 1px solid #555;
  36.             padding: 8px;
  37.             width: 100%;
  38.         }
  39.     </style>
  40. </head>

  42. <body>
  43.     <header><h1>學生名單</h1></header>
  44.     <form id="form">
  45.         <label>姓名:</label><br>
  46.         <input type="text" id="name"><br>
  47.         <label>年齡:</label><br>
  48.         <input type="number" id="age"><br>
  49.         <label>性別:</label><br>
  50.         <select id="gender">
  51.             <option value="male">男性</option>
  52.             <option value="female">女性</option>
  53.             <option value="none">無</option>
  54.         </select><br>
  55.     </form>
  56.     <button onclick="add()">新增學生</button><br>
  57.     <h2>學生列表</h2>
  58.     <table id="list"></table>
  59.     <script>
  60.         function person(name, age, gender) {
  61.             this.name = name;
  62.             this.age = age;
  63.             this.gender = gender;
  64.         }
  65.         var people = [];
  66.         function add() {
  67.             var name = document.getElementById("name").value;
  68.             var age = document.getElementById("age").value;
  69.             var gender = document.getElementById("gender").value;
  70.             people.push(new person(name, age, gender));
  71.             print();
  72.             document.getElementById("form").reset();
  73.         }
  74.         function print() {
  75.             var str = "";
  76.             for (i = 0; i < people.length; i++) {
  77.                 str += "<tr><td>姓名: " + people[i].name + " 年齡: " + people[i].age + " 性別: " + people[i].gender + "</td></th>"
  78.             }
  79.             document.getElementById("list").innerHTML = str;
  80.         }

  82.     </script>

  84. </body>

  86. </html>
複製代碼

TOP

返回列表