jQuery实现小米购物车功能案例

最新推荐文章于 2023-08-24 16:14:08 发布

风或许自媒体

最新推荐文章于 2023-08-24 16:14:08 发布

阅读量3.9k

点赞数 9

分类专栏：前端从入门到放弃文章标签： jQuery实现购物车

本文链接：https://blog.csdn.net/LY_code/article/details/80098197

版权

本文通过案例展示了如何使用jQuery实现小米购物车功能，重点在于调整购物车中商品数量的显示，通过添加新div和CSS样式，实现了输入框内文本的居中对齐。详细步骤包括为input添加特定类并在CSS中定义样式。

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

效果图：

修改：在购物车显示数量一栏没有文本居中（只需添加两步）：

step1：在新增的div中的input增加一个类

"<input type='text' size='3' readonly value='1' class='inputTextCenter'/> "+

step2：在CSS样式为类添加样式

.inputTextCenter{
    text-align: center;
}

即可input文本居中。

源码：（细节讲解都在里面）直接贴出html/css和JavaScript代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery实现小米购物车案例</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        h1{
            text-align: center;
            color: #FF6700;
        }
        table{
            margin: 0 auto;
            width: 80%;
            border: 2px solid whitesmoke;
            /*设置表格的合并为单线*/
            border-collapse: collapse;
        }
        table th, table td{
            border: 2px solid whitesmoke;
            padding: 5px;
            text-align: center;
        }
        table th{
            background-color: #FF6700;
            color: #FFFFFF;
        }
        /*总计的样式*/
        table tfoot tr td:first-child {
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="Img_MI/mi.png" alt="">
</div>
<h1>小米商城购物车</h1>>
<table>
    <!--用长表格实现布局-->
    <thead>
    <tr>
        <th>商品</th>
        <th>单价（元）</th>
        <th>数量</th>
        <th>金额（元）</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="goods">

    </tbody>
    <