masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pembangunan JavaScript halaman paparan troli beli-belah

Bahagian ini mencipta halaman paparan troli beli-belah

Paparkan gambar produk, penerangan kandungan produk, pemilihan kuantiti produk, harga unit produk

Jumlah kecil harga produk, operasi pemadaman produk dan jumlah harga produk mengira.

                                                                                                                                                                                   halaman senarai
Header: Memaparkan pelbagai nama maklumat seperti: gambar, penerangan, harga unit, pilihan, dll.
                                   标题： 购物车
跳转列表页
 表头：显示各种信息名称 如：图片，描述，单价，选择等

内容： 选中的商品的信息和操作


显示总价

Kandungan: Maklumat dan operasi produk yang dipilih

< br/>

Paparkan jumlah harga

Gunakan <h2> untuk mentakrifkan tajuk troli beli-belah

<table>

<thead> memaparkan pengepala jadual, <tr> elemen mentakrifkan baris jadual, <th> elemen mentakrifkan pengepala jadual, yang termasuk gambar, penerangan, kuantiti, harga unit, operasi, dsb.

<tbody> memaparkan bahagian kandungan jadual dan elemen <tr><td>

<butang> untuk membuat butang "+" dan "-", dan gunakan <jenis input="teks"> <🎜><🎜>Jumlah harga dipaparkan di luar jadual di bahagian bawah. <🎜>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <!--购物车样式表-->
  <style>
    h2{
      text-align: center;
    }
    table{
      margin: auto;
      width: 90%;
      border-color: inherit;
    }
    th{
      color: white;
      font-weight: bold;
      font-family: 微软雅黑,宋体;
    }
    img{
      height: 60%;
      display: block;
      margin: auto;
    }
    input{
      text-align: center;
      font-weight: bold;
    }
    button{
      font-weight: bold;
      font-size: 13px;
    }
  </style>
</head>
<body>
<div class="container">
  <h2>购物车</h2>
  <h3><a href="list.php">返回商品列表页面</a></h3>
  <table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
    <thead>
    <tr style="background-color: #87adbf;">
      <th>
        <input type="checkbox" id="allCheck" class="ck" />全选
      </th>
      <th>图片</th>
      <th>描述</th>
      <th>数量</th>
      <th>单价</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    <!--
    <tr>
      <td><input type="checkbox" class="ck" /></td>
      <td>
       <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
      </td>
      <td>纯机械，超酷表带</td>
      <td>
       <button style="width:100%;"class="down">-</button>
       <input style="width:100%;" type="text" value="1" readonly="readonly" />
       <button class="up">+</button>
      </td>
      <td>￥<span>3567</span></td>
      <td>￥<span>3567</span></td>
      <td><button class="del">删除</button></td>
    </tr>
    -->
    </tbody>
  </table>
  <div class="box" id="box"></div>
  <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html>
<🎜>Dengan cara ini kami telah mencipta fail cart.php halaman troli beli-belah yang mudah. <🎜>
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <!--购物车样式表--> <style> h2{ text-align: center; } table{ margin: auto; width: 90%; border-color: inherit; } th{ color: white; font-weight: bold; font-family: 微软雅黑,宋体; } img{ height: 60%; display: block; margin: auto; } input{ text-align: center; font-weight: bold; } button{ font-weight: bold; font-size: 13px; } </style> </head> <body> <div class="container"> <h2>购物车</h2> <h3><a href="list.php">返回商品列表页面</a></h3> <table id="table" border="1" cellspacing="0" cellpadding="0" class="hide"> <thead> <tr style="background-color: #87adbf;"> <th> <input type="checkbox" id="allCheck" class="ck" />全选 </th> <th>图片</th> <th>描述</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr> <td><input type="checkbox" class="ck" /></td> <td> <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" /> </td> <td>纯机械，超酷表带</td> <td> <button style="width:100%;"class="down">-</button> <input style="width:100%;" type="text" value="1" readonly="readonly" /> ​<button class="up">+</button> </td> <td>￥<span>3567</span></td> <td>￥<span>3567</span></td> <td><button class="del">删除</button></td> </tr> </tbody> </table> <div class="box" id="box"></div> <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492839 permainan