[jQuery笔记] 简单商品计算统计

行者

发布于 2019-12-10 10:22:46

3890

发布于 2019-12-10 10:22:46

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>商品统计</title>
        <!--jquery版本差异会导致IE浏览器兼容问题,如果对兼容性要求高的话，最好使用原生JS写。-->
        <script src="js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        商品名称:<input type="text" id="spNanme" name="spName"></br>
        商品单价:<input type="text" id="spPrice"></br>
        购买数量:<input type="number" id="spNum"></br>
        共计:<input type="text" id="total" readonly="readonly"></br>
        <button type="button" id="btn">结账</button>
        
        <script>
            //对id选择器btn,使用click事件
            $("#btn").click(function(){
                //console.log($("#spPrice").val());
                 //console.log($("#spNum").val());
                //var定义一个变量spPrice,变量的值是id选择器#spPrice的值
                var spPrice=$("#spPrice").val();
                //var定义一个变量spNum,变量的值是id选择器#spNum的值
                var spNum=$("#spNum").val();
                //var定义一个变量total,变量的值是spPrice*spNum乘积
                var total=spPrice*spNum;
                //console.log(total)
                //找到id选择器的#total,将值定义成变量total的值
                $("#total").val(total);
            });
        </script>
            
    </body>
</html>