1、订单页面用到的加减算出价格的方法:
/** * 用于计算订单的总费用 */
// 总金额 var totalFee = 0; function sum(type, flg){ var count = $("#"+type+" input#count").val(); var newcount = parseInt(count)+1; if('+'==flg){ $("#"+type+" input#count").attr("value",parseInt(count)+1); }else if(parseInt(count)>0){ $("#"+type+" input#count").attr("value",parseInt(count)-1); } totalMoney(type); }; function totalMoney(type){ //alert("计算:"+ count); var count = $("#jianzhi input#count").val(); var totalFee1 = 30 * parseInt(count); count = $("#quanzhi input#count").val(); var totalFee2 = 80 * parseInt(count); count = $("#duanqi input#count").val(); var totalFee3 = 50 * parseInt(count); totalFee = totalFee1+totalFee2+totalFee3; $("#totalSpan").html(totalFee); }
对应的HTML代码:
<div class="jiage"> <div class="xiangqing clearfix"> <div class="container" id="jianzhi"> <p class="zhiwei">XXXXXXX<span class="sl"><input type="button" value="-" class="jian" onclick="sum('jianzhi','-')"> <input type="text" value="0" class="shuliang" id="count" readonly="readonly"> <input type="button" value="+" class="jia" onclick="sum('jianzhi','+')"></span></p> <p class="price">¥<span id="fee">30</span></p> </div> </div> <div class="xiangqing clearfix"> <div class="container" id="quanzhi"> <p class="zhiwei">XXXXXXX<span class="sl"><input type="button" value="-" class="jian" onclick="sum('quanzhi','-')"> <input type="text" value="0" class="shuliang" id="count" readonly="readonly"> <input type="button" value="+" class="jia" onclick="sum('quanzhi','+')"></span></p> <p class="price">¥<span id="fee">80</span></p> </div> </div> <div class="xiangqing clearfix"> <div class="container" id="duanqi"> <p class="zhiwei">XXXXXXX<span class="sl"><input type="button" value="-" class="jian" onclick="sum('duanqi','-')"> <input type="text" value="0" class="shuliang" id="count" readonly="readonly"> <input type="button" value="+" class="jia" onclick="sum('duanqi','+')"></span></p> <p class="price">¥<span id="fee">50</span></p> </div> </div> </div>
2、动态改变表单的placeholder属性值:
/** * 取两个数较小 */ function numCompare(num1, num2) { if(parseInt(num1) > parseInt(num2)){ return num2; }else { return num1; } }
/** * 计算提现上限 */ $(function() { var inp = $('#money'); // 用户能提取的最大值 var num = 800; if(parseInt(num)>500){ num = 500; }else{ num = parseInt(num); } var text = '最高提现'+num+'元'; inp.focus(function() { $(this).attr('placeholder', text); }) });对应的HTML代码:
<div class="weui_cell"> <div class="weui_cell_hd"> <label class="weui_label">金额</label> </div> <div class="weui_cell_bd weui_cell_primary"> <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入提现金额" id="money" name="money" /> </div> </div>
3、js中数组中是否存在某个值:
var num1 = $('#money').val(); // 判断用户提现的金额是不是符合系统提现条件 var arr = [100,200,300,400,500]; if(arr.indexOf(num1) == -1){ alert("请输入符合上述说明的额度"); return; }
4、js验证邮箱、手机、QQ号码
<body> <input id="test" type="text" name="name" value="" /> <input id="test2" type="text2" name="name" value="" /> <input id="test3" type="text2" name="name" value="" /> <input type="checkbox" name="vehicle" value="Car" /> </body> <script type="text/javascript"> // QQ验证 $("#test3").blur(function() { var phone = document.getElementById('test3').value; if(!(/^\d{5,10}$/.test(phone))) { alert("QQ有误,请重填"); return false; } }); // 邮箱验证 $("#test2").blur(function() { var phone = document.getElementById('test2').value; if(!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(phone))) { alert("邮箱有误,请重填"); return false; } }); // 验证手机 $("#test").blur(function() { var phone = document.getElementById('test').value; if(!(/^1[3|4|5|7|8]\d{9}$/.test(phone))) { alert("手机号码有误,请重填"); // document.getElementById('test').focus(); $("#test").onfocus(); return false; } }); </script>// 网址验证
$("#test4").blur(function() {
var str = document.getElementById('test4').value;
alert(str);
var regUrl = /(http\:\/\/)?([\w.]+)(\/[\w- \.\/\?%&=]*)?/gi;
var result = str.match(regUrl);
if(result != null) {
alert("Yes ")
} else {
alert("No! ")
}
});
// 验证密码 $("#test5").blur(function() { var str = document.getElementById('test5').value; var patrn = /^(\w){6,20}$/; if(!patrn.exec(str)){ alert("no") }else{ alert("yes") } });
两个比引入js,css的方便方法:
1.在eclipse中直接把js文件拖到html里,之后去掉与本文件共同的路径名,上一级是../;可以这样尝试;还可以Ctrl之后放鼠标能跳过去,就是正确引入了。
select下拉框改变触发方法:
<select onchange="jumpNetData('webBlog', this.value)" class="xc-quanxian-text" style="width:160px;height:32px;font-size:14px;"> <option value="XXXXXX">XXXXXXXXX</option> </select>
返回到上一个页面
<input type="button" onclick="history.go(-1)" value="取消"/>