使用按钮实现加减和价格的变化 (有BUG 输入按钮框没有禁用)

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/zhanshi.css">
    <style>
        .page-heading{
            padding:2px 20px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-12" style="background-color: #213745 ;height:130px">
        <!-- <img src="image/timg.gif" width="100%" height="130px" />-->
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <form method="POST" class="form-horizontal">

                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">出游日期:</label>
                    <div class="col-sm-2">
                        <input type="date" name="rundate" id="rundate" class="form-control">
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">出行人数:</label>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div>
                        <label class="col-sm-2 control-label">成人:</label>
                        <ul class="btn-numbox">
                            <li><span class="number">数量:</span></li>
                            <li>
                                <ul class="count">
                                    <li><span id="num-jian1" class="num-jian" οnclick="crpj()">-</span></li>
                                    <li><input type="input" class="input-num" id="input-num1" name="cr" value="0" /></li>
                                    <li><span id="num-jia1" class="num-jia" οnclick="crp()">+</span></li>
                                </ul>
                            </li>
                            <li><span class="kucun"></span></li>
                        </ul>
                    </div>
                    <div>
                        <label class="col-sm-2 control-label">学生:</label>
                        <ul class="btn-numbox">
                            <li><span class="number">数量:</span></li>
                            <li>
                                <ul class="count">
                                    <li><span id="num-jian2" class="num-jian" οnclick="xspj()">-</span></li>
                                    <li><input type="input" class="input-num" id="input-num2" name="xs" value="0" /></li>
                                    <li><span id="num-jia2" class="num-jia" οnclick="xsp()">+</span></li>
                                </ul>
                            </li>
                            <li><span class="kucun"></span></li>
                        </ul>
                    </div>
                    <div>
                        <label class="col-sm-2 control-label">孩子:</label>
                        <ul class="btn-numbox">
                            <li><span class="number">数量:</span></li>
                            <li>
                                <ul class="count">
                                    <li><span id="num-jian3" class="num-jian" οnclick="hzpj()">-</span></li>
                                    <li><input type="input" class="input-num" id="input-num3" name="hz" value="0" /></li>
                                    <li><span id="num-jia3" class="num-jia" οnclick="hzp()">+</span></li>
                                </ul>
                            </li>
                            <li><span class="kucun"></span></li>
                        </ul>
                    </div>
                </div>

               <!-- <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">套餐详情:</label>
                    <div class="col-sm-2">
                        <select name="info" id="info"
                                class="form-control">
                            <option value="1000">==济南两日游==</option>
                        </select>
                    </div>
                </div>-->

                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">套餐:</label>
                    <div class="col-sm-2">
                        <input name="destination" id="destination" class="form-control">
                    </div>
                </div>

                <div style="hidden:true">
                    <input id="price" name="price" type="hidden">
                </div>

                <div style="hidden:true">
                    <input id="day" name="day" type="hidden">
                </div>

                <div class="form-group">
                    <label class="col-sm-6 control-label">注:成人票标准价,学生票七折,儿童票五折</label>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">小计:</label>
                    <div class="col-sm-10">
                        <input id="pics" name="pics"></input>
                    </div>
                </div>
                <!--<div class="hr-line-dashed"></div>
                <div class="form-group">
                    <input id="pics">

                    </input>
                </div>-->
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div class="col-sm-offset-5 col-sm-5">
                        <button type="button" οnclick="addToCar()" class="btn btn-danger">立即预定</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="js/ajaxfileupload.js"></script>
<script >

    let pm = parseInt($("#input-num1").val());
    let sm = parseInt($("#input-num2").val());
    let cm = parseInt($("#input-num3").val());
    let price = parseInt($("#price").val());
    let sum = parseInt($("pics").val());
    function addToCar() {
        $.post("orderss","method=add&rundate="+$("#rundate").val()+"&cr="+pm+"&xs="+sm+"&hz="+cm+"&day="+$("#day").val()+"&price="+sum+"&destination="+$("#destination").val(),msg=>{
            window.location.href="tralist.html";
        },"json")
    }
    /*$(function () {
        shiyishi();
    });
*/
    function count() {
        pm = parseInt($("#input-num1").val());
        sm = parseInt($("#input-num2").val());
        cm = parseInt($("#input-num3").val());
        price = parseInt($("#price").val());
        sum = parseInt($("pics").val());
        sum = pm*price+sm*0.7*price+cm*0.5*price;
        $("#pics").val(sum);
    }

    function crp() {
        let crp = parseInt($("#input-num1").val());
        let newcrp = crp + 1;
        $("#input-num1").val(newcrp);
        count();
    }

    function crpj() {
        let crp = parseInt($("#input-num1").val());
        if(crp <= 0){
            return crp = 0;
        }
        let newcrp = crp -1;
        $("#input-num1").val(newcrp);
        count();
    }

    function xsp() {
        let xsp = parseInt($("#input-num2").val());
        let newxsp = xsp + 1;
        $("#input-num2").val(newxsp);
        count();
    }

    function xspj() {
        let xsp = parseInt($("#input-num2").val());
        if(xsp <= 0){
            return xsp = 0;
        }
        let newxsp = xsp -1;
        $("#input-num2").val(newxsp);
        count();
    }

    function hzp() {
        let hzp = parseInt($("#input-num3").val());
        let newhzp = hzp + 1;
        $("#input-num3").val(newhzp);
        count();
    }

    function hzpj() {
        let hzp = parseInt($("#input-num3").val());
        if(hzp <= 0){
            return hzp = 0;
        }
        let newhzp = hzp -1;
        $("#input-num3").val(newhzp);
        count();
    }

    $(function(){
        let id = localStorage.getItem("id")
        $.post("travel","method=queryById&id="+id,row=>{
            id = row.id;
           /* $("#rundate").val(row.date1);*/
            $("#destination").val(row.destination);
            $("#price").val(row.price);
            $("#rundate").attr("min",row.mindate);
            $("#rundate").attr("max",row.maxdate);
            $("#day").val(row.day);
        },"json");
    })
    
   /* function shiyishi() {
        let v = window.localStorage.getItem("obj");
        console.log(JSON.parse(v));
    }*/


</script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值