一、购物车实战

构成购物车表格的9个元素

<table></table>表格，数据化格式的工具
<caption></caption>表格标题
<colgroup></colgroup>对表格中的列进行组合
<thead></thead>表格头
<tbody></tbody>表格主体
<tfoot></tfoot>表格尾部
<tr></tr>行
<th></th>定义表格头的单元格
<td></td>标准单元格

实战代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      html {
        font-size: 16px;
      }
      table {
        /* 将单元格之间的间隙去掉 */
        border-collapse: collapse;
        width: 90%;
        margin: auto;
        color: black;
        font-weight: lighter;
        text-align: center;
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; */
      }
      /* 标题样式 */
      table caption {
        font-size: 1.5rem;
        font-weight: bolder;
        margin-bottom: 15px;
        color: red;
        text-align: left;
      }
      span {
        float: right;
      }
      input:focus {
        background-color: cornsilk;
      }
      /* 表格线直接添加到单元格上面 */
      table thead th,
      table td {
        border-bottom: 1px solid #ccc;
        padding: 10px;
      }
      table tbody {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
      }
      table th {
        font-weight: lighter;
      }
      table thead tr:first-of-type {
        background-color: black;
        color: whitesmoke;
        font-size: larger;
        font-style: initial;
        font-weight: bold;
      }
      /* 隔行变色 */
      table tbody tr:nth-of-type(even) {
        background-color: lightgray;
      }
      /* 鼠标悬停效果 */
      table tbody tr:hover {
        background-color: lightblue;
      }
      /* 底部样式 */
      .col {
        text-align: left;
        padding-left: 6%;
      }
      table tfoot td {
        border-bottom: none;
        color: coral;
        font-size: 1.2rem;
        font-weight: bolder;
        text-align: center;
      }
      /* 结算按钮 */
      body div:last-of-type {
        width: 90%;
      }
      body div:first-of-type button {
        /* 靠右 */
        float: right;
        width: 100px;
        height: 50px;
        background-color: rgb(168, 8, 8);
        font-size: 22px;
        color: white;
        border-radius: 10%;
        /* 设置鼠标样式 */
        cursor: pointer;
      }
      body div:first-of-type button:hover {
        background-color: limegreen;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <!-- 表格 -->
    <table>
      <!-- 标题 -->
      <caption>
        购物车
        <span class="serach"
          ><input type="search" placeholder="商品" /><button>搜索</button></span
        >
      </caption>
      <!-- 头部 -->
      <thead>
        <tr>
          <th>序号</th>
          <th>商品</th>
          <th>价格</th>
          <th>单位</th>
          <th>数量</th>
          <th>金额</th>
        </tr>
      </thead>
      <!-- 主体 -->
      <tbody>
        <tr>
          <td>1</td>
          <td>绿茶</td>
          <td>100</td>
          <td>罐</td>
          <td>1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>白茶</td>
          <td>100</td>
          <td>罐</td>
          <td>1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>3</td>
          <td>黄茶</td>
          <td>100</td>
          <td>罐</td>
          <td>1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>4</td>
          <td>青茶</td>
          <td>100</td>
          <td>罐</td>
          <td>1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>5</td>
          <td>红茶</td>
          <td>100</td>
          <td>罐</td>
          <td>1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>6</td>
          <td>黑茶</td>
          <td>100</td>
          <td>罐</td>
          <td>1</td>
          <td>100</td>
        </tr>
      </tbody>
      <!-- 底部 -->
      <tfoot>
        <tr>
          <td class="col" colspan="4">总计:</td>
          <td id="sum"></td>
          <td id="sumtotal"></td>
        </tr>
      </tfoot>
    </table>
    <div>
      <button>结算</button>
    </div>
  </body>
  <script>
  //获取数量表格进行总计
    const num = document.querySelectorAll("tbody > tr > td:nth-child(5)");
    //获取金额表格进行总计
    const numtotal = document.querySelectorAll("tbody > tr > td:nth-child(6)");
    //定义数组
    var numarrA = new Array();
    var numarrB = new Array();
    //获取每行商品数量
    num.forEach(function (n, index) {
      var numtext = n.innerHTML;
      numarrA[index] = numtext;
    });
    //将字符串转为数字
    numarrB = numarrA.map(Number);
    //累加
    var sum = 0;
    for (var i = 0; i < numarrB.length; i++) {
      sum += numarrB[i];
    }
    var numarrC = new Array();
    var numarrD = new Array();
    numtotal.forEach(function (n, index) {
      var numtext = n.innerHTML;
      numarrC[index] = numtext;
    });
    numarrD = numarrC.map(Number);
    var sumtotal = 0;
    for (var i = 0; i < numarrB.length; i++) {
      sumtotal += numarrD[i];
    }
    //给“总计”所在表格添加监听
    const click1 = document.querySelector("tfoot > tr > td:first-child ");
    //点击后显示总的“数量”“金额”
    click1.addEventListener("click", function (ev) {
      document.getElementById("sum").innerHTML = sum;
      document.getElementById("sumtotal").innerHTML = sumtotal;
    });
  </script>
</html>

运行图：

初始运行

点击“总计”

二、用户注册页面

3.form标签（表单）
<form action="" method=""></from>

4.filedset、legend标签（控件组）

    <fieldset>
        <legend>...</legend>
    .....
    </fieldset>

实战代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面</title>
    <style>
      body {
        color: #555;
        background-color: lightgoldenrodyellow;
      }
      h3 {
        text-align: center;
      }
      form {
        width: 450px;
        margin: 30px auto;
        border-top: 1px solid #aaa;
        border-radius: 5%;
        background-color: ghostwhite;
      }
      form fieldset {
        border: 1px solid lightgray;
        background-color: lightgrey;
        box-shadow: 2px 2px 4px #bbb;
        border-radius: 10px;
        margin: 20px;
      }
      form fieldset legend {
        background-color: gray;
        border-radius: 10px;
        color: wheat;
        padding: 5px 20px;
        text-align: center;
        font-size: 20px;
      }
      form div {
        margin: 10px;
        padding-left: 15%;
        font-weight: bold;
      }
      form p {
        text-align: center;
      }
      form .btn {
        width: 80px;
        height: 30px;
        border: none;
        background-color: lightskyblue;
        color: darkslategrey;
        border-radius: 5%;
      }
      form .btn:hover {
        background-color: red;
        color: white;
        cursor: pointer;
        border-radius: 5%;
      }
      input {
        border: 1px solid whitesmoke;
        border-radius: 20px;
        font-style: initial;
      }
      input:focus {
        background-color: rgb(226, 226, 175);
      }
      .cha {
        display: none;
      }
      .ch {
        display: block;
      }
      .btn {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h3>用户注册</h3>
    <!-- form+input.... -->
    <form action="" method="POST">
      <!-- 控件组 -->
      <fieldset>
        <legend>基本信息(必填)</legend>
        <div>
          <label for="my-username">账号:</label>
          <input
            type="text"
            id="my-username"
            name="username"
            placeholder="不少于6位字符"
            autofocus
          />
        </div>
        <div>
          <label for="email-id">邮箱:</label>
          <input
            type="email"
            name="email"
            id="email-id"
            placeholder="12345678@qq.com"
          />
        </div>
        <!-- 密码 -->
        <div>
          <label for="pwd-2">密码:</label>
          <input
            type="password"
            name="password1"
            id="pwd-2"
            placeholder="********"
          />
        </div>
        <div>
          <label for="pwd-1">确认:</label>
          <input
            type="password"
            name="password2"
            id="pwd-1"
            placeholder="********"
          />
        </div>
        <div>
          <label class="change2" style="float: right; color: lightslategray;"
            >扩展信息</label
          >
        </div>
      </fieldset>
      <!-- 扩展信息(选填) -->
      <fieldset class="cha">
        <legend>扩展信息(选填)</legend>
        <div>
          <label
            >生日:
            <input type="date" name="birthday" style="width: 166px;" />
          </label>
        </div>
        <div>
          <!-- 单选按钮 -->
          <label for="female">性别:</label>
          <!-- 单选按钮中的name属性名必须相同 -->
          <input
            type="radio"
            name="gender"
            value="male"
            id="male"
            checked
          /><label for="male">男</label>
          <input type="radio" name="gender" value="female" id="female" /><label
            for="female"
            >女</label
          >
        </div>
        <div>
          <!-- 复选框 -->
          <label for="programme">爱好</label>
          <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
          <input
            type="checkbox"
            name="hobby[]"
            id="game"
            value="game"
            checked
          /><label for="game">打游戏</label>
          <input
            type="checkbox"
            name="hobby[]"
            value="shoot"
            id="shoot"
          /><label for="shoot">摄影</label>
          <input
            type="checkbox"
            name="hobby[]"
            value="programme"
            id="programme"
          /><label for="programme">编程</label>
        </div>
        <div>
          <!-- 选项列表 -->
          <label for="brand">手机:</label>
          <input type="search" list="phone" name="brand" id="brand" />
          <datalist id="phone">
            <option value="苹果" label="11"> </option>
            <option value="华为" label="mate30"></option>
            <option value="小米" label="10"> </option>
          </datalist>
        </div>
        <div>
          <label for="uploads">上传头像:</label>
          <input
            type="file"
            name="user_pic"
            id="uploads"
            accept="image/png, image/jpeg, image/gif"
          />
        </div>
        <!--文本域-->
        <div>
          <label for="resume">简历:</label>
          <!--注意文本域没有value属性-->
          <textarea
            name="resume"
            id="resume"
            cols="30"
            rows="5"
            placeholder="不超过100字"
          ></textarea>
        </div>
      </fieldset>
      <!-- 隐藏用户的Id等一些不用显示的数据 -->
      <input type="hidden" name="user_id" value="123" />
      <p>
        <button class="btn">注册</button>
      </p>
    </form>
  </body>
  <script>
  //获取需显示表单所在标签
    const change1 = document.querySelectorAll(".cha");
  //获取扩展信息所在标签
    const change2 = document.querySelector(".change2");
    //添加点击事件
    change2.addEventListener("click", function (ev) {
    //改变扩展信息表单的属性名
      change1[0].className = "ch";
    });
  </script>
</html>

结果图

初始结果图：

点击“扩展信息”后

购物车与注册页面实战

一、购物车实战

构成购物车表格的9个元素

二、用户注册页面

相关文章