用前端知识做一个小项目——购物车

最新推荐文章于 2023-07-25 21:49:58 发布

yeping_Jun

最新推荐文章于 2023-07-25 21:49:58 发布

阅读量1.9k

点赞数 3

文章标签：前端 css css3 javascript

本文链接：https://blog.csdn.net/yeping_Jun/article/details/120962592

版权

所用技术：html，css,javascript

实现效果：

基本思路：

1.将页面的每个部分都用div盒子装起来，整个页面用一个div盒子，里面再划分多个盒子。

2.添加css样式，使页面基本达到效果。

3.添加js代码，增加一些加减数量，全选，结算的功能。

效果实现：

一.将页面的每个部分都用div盒子装起来，整个页面用一个div盒子，里面再划分多个盒子，大概如此

画了其中一部分，每个方框都是一个div。

<body>
    <!--购物车-->
    <div class="shops">
        <!--店铺-->
        <div class="shop" id="s1">
            <!-- 头-->
            <div class="header">
                <input type="checkbox" class="shop_checkbox" value="2" onclick="midCheck(this)" id="head_check1">
                <input type="hidden" value="shop1_item1_checkbox shop1_item2_checkbox">
                <span class="shop_icon"><img src="img/biilbili.png" class="shop_icon"></span>
                <span class="shop_name">店铺：bilibili旗舰店</span>
                <span class="shop_wangwang_icon"><img src="img/旺旺.png" class="shop_wangwang_icon"></span>
            </div>
            <!--条目1-->
            <div class="item" id="i1">
                <!--复选框-->
                <div class="item_checkbox">
                    <input type="checkbox" onclick="check(this)" id="shop1_item1_checkbox">
                    <input type="hidden" value="shop1_item1_checkbox shop1_item2_checkbox head_check1">
                </div>

就这样一层一层的套盒子。

二.添加css样式，使页面基本达到效果。

没添加之前

会出现这种杂乱无章的排布。现在添加css样式

（一）所有div都是占一行的，所以我们要把在同一行的盒子设置成弹性布局，将display设置成flex，实现弹性布局

.item{
    display: flex;
    border: solid 1px #B7B3B3;
    padding: 20px;
    background-color: #FCF8F7;
}

还有将一起排列的图标设置成，display: inline-block，就可以实现对齐的块排列。

类似这样。

再在合适的地方打补丁padding 内补丁和 margin 外补丁

.item_checkbox,.item_img{
    margin-right: 10px;
}
.item{
    padding: 20px;
}

margin_right就是在这个div的右面留出空间。

再用height和width设置各个盒子高度和宽度

都实现后大概会有这种效果（最终效果，有一些在上面还没说到）。

（二）将最大和盒子居中

.shops{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    color: #1B1919;
}

这样左右会留下空隙。

（三）调整，两边对齐

左右对齐

上下对齐

像这些都是需要两边对齐的，

justify-content: space-between用于弹性布局

.promotion{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 220px;
    margin-right: 50px;
}

（四）鼠标悬停设置

.plus:hover,.minus:hover{
    color: #DD5617;
    cursor: pointer;
    border: solid #DD5617;
    height: 23px;
}

.plus:hover 表示光标在plus类元素时的样式，pointer是小手

no-drop表示禁止，在结算那里设置

三.使用js进行一些事件的控制。

（一）数量的加减，价格的变化。这里代码只显示了前部分。

function modifyCount(thisNode,id1,id2,id3){
    var num = thisNode.value;
    var regExp = /^[0-9][0-9]*$/
    var hNum = document.getElementById("h_" + thisNode.id);

    //正则判断
    var naoPrice = document.getElementById(id1);
    if (regExp.test(num)){
        if (num > 64){
            thisNode.value = 0;
            naoPrice.innerText = "￥" + 0
            hNum.value = num;
            return;
        }
……

先声明一个函数用来修改价格，其思路是，设置两个隐藏域，在这里隐藏域可以视为全局变量，分别藏数量和单价，然后经过计算显示在右边

然后这三处地方都可以调用这个函数进行修改，只要将文本框的value传进去就可以了。+ - 用onclick（），文本框用onkeyup（）

（二）复选框的全选

window.onload = function (){
            //点击
            var zong = document.getElementById("zong");
            var aihaoEles = document.getElementsByName("aihao");
            zong.onclick = function (){
                for (var i = 0; i < aihaoEles.length; i++){
                    aihaoEles[i].checked = zong.checked;
                }
            }
            //循环套点击
            for (var i = 0; i < aihaoEles.length; i++){
                aihaoEles[i].onclick = function (){
                    var count = 0;
                    for (var j = 0; j < aihaoEles.length; j++){

                        if (aihaoEles[j].checked == true){
                            count++;
                        }
                    }
                    zong.checked = (count == aihaoEles.length);
                }
            }
        }

基本思路是在点击大框时，将小框的checked属性设置为和大框一样，然后小框点击是要计数，如果勾选数目和总数目一致，就选上，否则，取消选中（对于大框）。

然后这里还要注意的就是，在复选框的checked改变后，有一些复选框是点击后会有事件发生的，这时候我们要手动调用函数。

就像这个，点击大框后，小框选上，结算页面发生改变，我们要手动去调相关函数。

（三）结算页

效果：在我们选中商品之后，结算页要改动价格和数量，结算样式也要改变。

//结算页
    var payNum = document.getElementById("totalNum");
    var pay = document.getElementById("pay");
    if (parseInt(payNum.value) > 0){
        pay.style.cursor = 'pointer';
        pay.style.backgroundColor = '#E04E19';

    }else {
        pay.style.cursor = 'no-drop';
        pay.style.backgroundColor = '#868080';
    }

如果商品数量大于0，光标变为小手，颜色变为橙色，否则，光标变为红色的禁止，颜色变为灰色。关于颜色，可以百度搜色彩拾取器，比较方便。

还有结算的点击函数

window.onload = function (){
    let pay = document.getElementById("pay");
    pay.onclick = function (){
        let totalNum = document.getElementById("totalNum");
        if (totalNum.value > 0){
            alert("好的");
        }
    }
}

如果商品数量大于0，则弹窗提示，否则，点击无反应。