js实现购物车

最新推荐文章于 2023-06-30 21:55:03 发布

BUG一个不留

最新推荐文章于 2023-06-30 21:55:03 发布

阅读量608

点赞数

本文链接：https://blog.csdn.net/weixin_45526979/article/details/119657899

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<script>
    function close_plan(){
        window.close();
    }
    function  collection(){
        confirm("移入收藏,后将不再显示在购物车里面,是否继续操作？")

    }
    /*这里获取了plus加号事件*/
    function plus(a){
        /* 就像java里面的有参构造一样进行判断是哪个再调用onclick事件*/
        if(a==1){
            /*获取需要购买的数量用num接收 */
            var num=text7.value;
            /*将num转换成整形调用这个事件数量就会加1然后再把值赋值给自己*/
            num=parseInt(num)+1;
            /* 再将触发后的值赋值给数量这样就实现了数量的增加*/
            text7.value=num;
            /* 获取这本书的价格*/
            var price=price0.value;
            /* 这个是这类型书本的总价格获取方式要innerHTML因为是双标签
            * 在将数量转换成整形去乘以书本的整形价格
            * toFixed(2)是保留小数点如果不保留的话会到在计算的过程中会出现bug
            * */
            price2.innerHTML=(parseFloat(num)*parseFloat(price)).toFixed(2);
    }
        if(a==2){
            var num=text8.value;
            num=parseInt(num)+1;
            text8.value=num;
            var price=price3.value;
            price1.innerHTML=(parseFloat(num)*parseFloat(price)).toFixed(2);
        }
    }
    function minus(a){
        if(a==1){
            /*获取需要购买的数量用num接收 */
            var nam=text7.value;
            /* 因为这个是减数量所以我们要判断数量到0的时候就不能减了*/
            if (nam>0){
                num=parseInt(nam)-1;
                text7.value=num;
            } else {
                alert("数量不能低于0");
            }
            var price=price0.value;
            price2.innerHTML=(parseFloat(num)*parseFloat(price)).toFixed(2);
        }
        if(a==2){
            var num=text8.value;
            if (num>0){
                num=parseInt(num)-1;
                text8.value=num;
            }else {
                alert("数量不能低于0");
            }
            var price=price3.value;
            price1.innerHTML=(parseFloat(num)*parseFloat(price)).toFixed(2);
        }
    }
    function accounts(){
           var nam=text7.value;
           var nam1=text8.value;
           var nam2=parseFloat(price1.innerHTML)+parseFloat(price2.innerHTML);
         if(parseInt(nam)>0 && parseInt(nam1)>0){
             confirm(
                     "您本次购买的商品如下:\n \n商品名称:白岩松白说"+nam+"本岛上书店"+nam1+"本\n" +
                     "商品数量:"+(parseInt(nam)+parseInt(nam1))+"本\n商品总计:"+nam2.toFixed(2)+
                     "\n运费:0元 \n\n确定以上信息是否有误!!!"
             )
         }
    }
</script>
<body>
<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="close_plan();" >关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" id="price0" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" id="text7" value="0" readonly><input type="button" name="plus" value="+" onclick="plus(1);"></li>
            <li id="price2">¥21.90</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price"  id="price3" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(2);"><input type="text" name="amount"  id="text8" value="0" readonly><input type="button" name="plus" value="+" onclick="plus(2);"></li>
            <li id="price1">¥24.00</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
</div>
<script type="text/javascript" src="js/shopping.js"></script>
</body>
</html>

BUG一个不留

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现购物车

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>完善当当购物车页面</title> <link type="text/css" rel="stylesheet" href="css/cartStyle.css" /></head><script> function clos.
复制链接

扫一扫