您的位置：首页 > Web前端 > JavaScript

js用到的一些工具方法

2016-06-30 16:07 429 查看
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="取消"/>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                验证
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航