jquery实现点击数量增加总价跟着增加且数量有上限下限

最新推荐文章于 2023-03-23 17:57:14 发布

小小舍

最新推荐文章于 2023-03-23 17:57:14 发布

阅读量1.6k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_43560721/article/details/85338985

版权

jquery 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

效果图：

整体代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>count</title>
       <style>
           .show{
               display: none;
               width: 250px;
               height: 50px;
               background-color: #009688;
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               margin: auto;
               text-align: center;
               line-height: 15px;
           }
       </style>
   </head>
   <body>
       <div class="show">

       </div>
       <ul>
           <li>单价:<span class="s_price">10.1</span></li>
           <li>总价:<span class="t_price"></span></li>
           <li>数量:<span class="sub">-</span><input id="count" type="text" value="0" /><span class="add">+</span></li>
       </ul>

       <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
       <script>
           $(function(){
               //获取数量
               var num = $('#count').val();
               //获取单价
               var unitPrice = $('.s_price').text();
               //计算总价
               function count(){
                   $('.t_price').text((num*unitPrice).toFixed(2));
               }
               //点击加或者减的时候，实现加减的操作
               //点击减
               $('.sub').click(function(){
                   num--;
                   if(num<1){
                       $(".show").show().html("数量不能小于1").delay(600).hide(500);
                   }
                   $('#count').val(num);
                   count();
               })
               //点击加
               $('.add').click(function(){
                   num++;
                   if(num>5){
                       $(".show").show().html("数量不能大于5").delay(600).hide(500);
                   }
                   $('#count').val(num);
                   count();
               })

//键盘事件
               $('#count').keyup(function(){
                   num = $(this).val();
                   var res = /^[1-9]\d*$/
                   if(res.test(num)){
                       count();
                   } else{
                       $(this).val(1);
                       $(".show").show().html("输入不合法").delay(1000).hide(500);
                       count();
                   }

               })
           })
       </script>
   </body>
</html>

小小舍

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现点击数量增加总价跟着增加且数量有上限下限

效果图：整体代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>count</title> <style> .show{ ...
复制链接

扫一扫

专栏目录