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

本文通过案例展示了如何使用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>
    <
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值