JavaScript购物车的价格计算

最新推荐文章于 2022-09-15 14:46:21 发布

＆＆320

最新推荐文章于 2022-09-15 14:46:21 发布

阅读量1k

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_56734546/article/details/122143520

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" href="css/common.css" />
       <style type="text/css">
           #Upload{
               width:90px;
               height:40px;
               font-size: 20px;
               border-radius:5px ;
               background-color: red;
               color: white;
               border:0px solid olive;
           }
       </style>
       <script src="js/jquery-3.3.1.min.js"></script>
       <script>
           //页面加载事件
           $(function(){
               //根据删除的数据行变动,更新价格
               $(".btnDel span").click(function(){
                   $(this).parent().parent().parent().remove();
                   Suan();

               });

});
           //删除数据行
           function delShop(del){

               $(del).parents("ul").remove();
           }

           function Suan(){
               //定义总金额变量
               var sum=0;
               //每遍历一次，拿到ul的子节点,去掉标题
               $(".shop .rs").each(function(index,obj){
                   var price=$(obj).text();
                   //累加计算
                   sum+=parseFloat(price.substr(1));
               });
               //把计算的结构显示到span中
               $("#price").text("总金额："+sum);

           }
           //页面加载事件
           window.οnlοad=function(){
               Suan();

           }

       </script>

   </head>
   <body>
       <div id="yin" style="display:none">
       <img id="imgs"/>
   </div>

最低0.47元/天解锁文章

＆＆320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript购物车的价格计算

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/common.css" /> <style type="text/css"> #Upload{ ...
复制链接

扫一扫