js用到的一些工具方法

_小李哥發表於2016-06-30
JS

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="取消"/>








相關文章