zoukankan html css js c++ java

Js点餐加减数量

       <button class="add-on" onclick="chgNum(1,'del')" ><i class="icon-minus"></i></button>
                    
       <input class="span3 text-center" id="appendedPrependedInput1" disabled="disabled" type="text" value="0">
                    
       <button class="add-on" onclick="chgNum(1,'add')"><i class="icon-plus"></i></button>

<script>
        function chgNum(ndid, opr){                       /** 点餐加减数量，参照以前的**/
            var index= parseInt($('#appendedPrependedInput'+ndid).val());
            var price = $('.price').html().substring(1);
            if(opr=='del'){

                if(index == 0){
                    alert("不能减了！");
                    return ;
                }
                $("#appendedPrependedInput"+ndid).val(index - 1);
                index = index - 1;
            }else if(opr=='add'){
                if(index == 99){
                    alert('不能加了！');
                    return ;
                }
                $("#appendedPrependedInput"+ndid).val(index + 1);
                index = index + 1;
                
            }
            $('.nums').html(index);
            $('.total').html(index*price+'元')
        }
    </script>

第二种方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script> 

$(function(){ 
    $(".add").click(function(){ 
        var t=$(this).parent().find('input[class*=text_box]'); 
        t.val(parseInt(t.val())+1) 
        setTotal(); 
    }) 
    
    
    $(".min").click(function(){ 
        var t = $(this).parent().find('input[class*=text_box]'); 
            t.val(parseInt(t.val())-1) 
            if(parseInt(t.val())<0){ 
                t.val(0); 
            } 
        setTotal(); 
    }) 
    
    function setTotal(){
        var s=0; 
        $("#tab td").each(function(){ 
            s +=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); 
        }); 
        $("#total").html(s.toFixed(2)); 
    } 
    
    setTotal(); 

}) 


</script> 
</head> 
<body> 
<table id="tab"> 
    <tr> 
        <td> 
            <span>单价:</span><span class="price">1.50</span> 
            <input class="min" name="" type="button" value="-" /> 
            <input class="text_box" name="" type="text" value="1" /> 
            <input class="add" name="" type="button" value="+" /> 
        </td> 
    </tr> 
    <tr> 
        <td> 
            <span>单价:</span><span class="price">3.95</span> 
            <input class="min" name="" type="button" value="-" /> 
            <input class="text_box" name="" type="text" value="1" /> 
            <input class="add" name="" type="button" value="+" /> 
        </td> 
    </tr> 
</table> 

<p>总价：<label id="total"></label></p> 

</body> 
</html>

人如代码，规矩灵活；代码如诗，字句精伦。

查看全文

相关阅读:
使用cocoapods出现问题fetch of the ‘master’ 的解决方法
 说说ASP.NET的表单验证
 php分页类
 php校验
 mySQL时间
 asp .NET弹出窗口汇总（精华，麒麟创想）
(转)MVC 3 数据验证 Model Validation 详解
 (转)linux性能优化总结
 （转）ASP.NET缓存全解析6：数据库缓存依赖
 SQL Server是如何让定时作业

原文地址：https://www.cnblogs.com/xinlinux/p/4223217.html