communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Développement JavaScript de la page d'affichage du panier

Cette section crée une page d'affichage du panier

Afficher les images du produit, la description du contenu du produit, la sélection de la quantité du produit, le prix unitaire du produit

Sous-total du prix du produit, opération de suppression du produit et prix total du produit calculer.

                                                                                                                                                                ="3">Page de liste de raccourcis
En-tête : affiche divers noms d'informations tels que : des images, des descriptions, des prix unitaires, des sélections, etc.
                                   标题： 购物车
跳转列表页
 表头：显示各种信息名称 如：图片，描述，单价，选择等

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


显示总价

Contenu : Informations et fonctionnement du produit sélectionné

< br/>

Afficher le prix total

Utilisez <h2> pour définir le titre du panier

<table>

<thead> affiche l'en-tête du tableau, les éléments <tr> définissent les lignes du tableau, les éléments <th> définissent les en-têtes du tableau, qui incluent des images, des descriptions, des quantités, des prix unitaires, des sous-totaux, des opérations, etc.

<tbody> affiche la partie du contenu du tableau, et l'élément <tr><td> définit l'unité du tableau pour afficher le contenu du produit.

<button> pour créer des boutons "+" et "-", et utilisez <input type="text"> au milieu pour afficher la quantité. <🎜><🎜>Le prix total est affiché en dehors du tableau en bas. <🎜>
<!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>
<🎜>De cette façon, nous avons créé un simple fichier cart.php de page de panier. <🎜>
Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492411 joue