用JavaScript实现简易购物车

2020-04-05 17:02:09 阅读：244 来源： 互联网

标签：jian jia JavaScript value 购物车简易 let txt click

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        .inputs{
            width:50px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    你已购买的商品:女士衣服
</div>
<div>
    单价：<span id="jiage">100.00</span>
</div>
<div>
    数量为：
    <input type="button" id="jian" value="-">
    <input type="text" value="1" id="txt" class="inputs">
    <input type="button" value="+" id="jia">
</div>
<div>
    总价为：
    <span id="total">100.00</span>
</div>
<script src="js/js.js"></script>
</body>
</html>

JS:

{
    //找标签
    let jia = document.getElementById("jia");
    let jian=document.getElementById("jian");
    let txt = document.getElementById("txt");
    let total = document.getElementById("total");
    //事件处理
    let addFun = function(event){
        // 取出当前的值
        let v = txt.value ;   // 获取当前值，字符串
        let res = Number(v) + 1;
        txt.value = res ;
        console.info( res );
    };
    let jianFun=function (event) {
        let w = txt.value ;   // 获取当前值，字符串
        let rest = Number(w) - 1;
        txt.value = rest ;
        console.info( rest );
    };
    let totalFun=function(event){
        let x=jiage.innerText;
        let dx=txt.value;
        let add=x*dx;
        total.innerText=add;
        console.log(add);
};
    //  添加事件监听
    jia.addEventListener("click", addFun );
    jian.addEventListener("click", jianFun );
    jia.addEventListener("click", totalFun);
    jian.addEventListener("click", totalFun );
}

实现效果：
在这里插入图片描述

标签：jian,jia,JavaScript,value,购物车,简易,let,txt,click
来源： https://blog.csdn.net/weixin_46430385/article/details/105309361

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用JavaScript实现简易购物车