JavaScript购物车

最新推荐文章于 2024-09-15 08:25:52 发布

Surrender.Cheney!

最新推荐文章于 2024-09-15 08:25:52 发布

阅读量146

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_75007006/article/details/128353787

版权

这是一个使用JavaScript实现的购物车示例，包括商品的添加、删除、数量增减和总价计算等功能。购物车界面包含商品名、单价、数量、小计等列，以及全选、删除和提交订单等操作。示例中还定义了ShopCart、Cart和Item等构造函数，实现了购物车的逻辑操作。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>购物车</title>
       <style>
           .cart {
               width: 700px;
               padding: 0 10px 10px;
               border: 1px solid #D5E5F5;
           }

           .cart-title {
               margin-bottom: 10px;
               font-size: 14px;
               border-bottom: 1px solid #AED2FF;
               line-height: 30px;
               height: 30px;
               font-weight: 700;
               text-indent: 15px;
               color: #333;
               font-family: 'Microsoft YaHei';
           }

           .cart-table {
               width: 100%;
               margin: 0 auto;
               border-collapse: collapse;
               font-size: 12px;
               font-family: Verdana, "Microsoft YaHei";
               color: #333;
           }

           .cart-table th {
               border-bottom: 2px solid #B2D1FF;
               font-weight: normal;
               height: 35px;
               line-height: 23px;
           }

           .cart-item {
               background-color: #FAFCFF;
               border-bottom: 1px dotted #84B3FD;
           }

           .cart-item td {
               height: 55px;
               text-align: center;
           }

           .cart-item .cart-txt-left {
               text-align: left;
           }

           .cart-name {
               color: #3366D4;
               font-weight: bold;
           }

           .cart-subtotal {
               color: #FF3334;
               font-weight: bold;
           }

           .cart-reduce,
           .cart-add {
               display: inline-block;
               width: 16px;
               height: 16px;
               line-height: 16px;
               color: #FFF;
               background-color: #BDBDBD;
               border: 0;
               cursor: pointer;
               border-radius: 2px;
               font-family: 'Arial';
               font-size: 13.3333px;
           }

           .cart-reduce:hover,
           .cart-add:hover {
               background-color: #FF9900;