JavaScript学习笔记(一)

需求

最近公司给的JavaScript任务,有如下要求：

①点击"+","-"号,改变客户价格的值，售价对应改变(售价=实际价格+客户加价)

②用户输入加价,有同样的效果

③点击"保存",更新数据库信息

实现思路

第一个比较比较好弄,给对应的按钮Onclick()事件,然后在事件里面写相应的逻辑就可以了。因为id是动态的,可以利用map_index巧妙得解决这个问题

第一个利用onblur()事件,当触发事件时首先调用ischeckNum()方法检查是否是数字,然后通过jquery、parseFloat()等方法进行计算、写入值

第三个用hibernate很轻松就完成了,这里就不写了

相关代码

HTML代码

<td>
	<div id="div1" name="div1" class="purchase_quantity">
		<input type="text" name="${map_index}" id="${map_index}" value="${(map['addPrice'])!''}" class="goods_nums_text w30" 
		 onblur="onblurInput(${map_index})">
		<span class="add_j">
			<button class="decrease" type="button" onclick="increasePrice(${map_index})" >+</button>
			<button class="decrease" type="button" onclick="decreasePrice(${map_index});" >-</button>
		</span>
	</div>
</td>

onblur事件监听方法

 

function onblurInput(id){	     
		    if(ischeckNum(id)){
		        //实际价格
		        var actualPrice = ${actualPrice};
		        
		        var addPrice = $("#"+id).attr("value");
		        var a = parseFloat(addPrice);
		        //判断加价
		        if(a>=0){
		           var a1=toDecimal2(a);
		           var adPrice=$("#"+id).val(a1);
		        }else{
	               alert("加价不可为负噢!");
	               return;
		        }
		        //再次获得加价
		        var adPrice = $("#"+id).attr("value");
		        //售价
		    	//var salePrice = $("."+id).text();		
		    	
		    	var s = parseFloat(adPrice)+parseFloat(actualPrice);
		    	var salePrice = toDecimal2(s);
		    	//alert("salePrice"+salePrice);
		    	$("."+id).html(salePrice);		    
			}
		}		

由于js是弱数据语言,进行运算时会出现很离奇的事情,比如"0.1+0.1=0.200000001"(例子),所以写了个方法每次都强制转换为两位小数

强制保留两位小数,没有就补0

function toDecimal2(x) {    
	        var f = parseFloat(x);    
	        if (isNaN(f)) {    
	            return false;    
	        }    
	        var f = Math.round(x*100)/100;    
	        var s = f.toString();    
	        var rs = s.indexOf('.');    
	        if (rs < 0) {    
	            rs = s.length;    
	            s += '.';    
	        }    
	        while (s.length <= rs + 2) {    
	            s += '0';    
	        }    
	        return s;    
      }				

判断是否为数字的方法

//判断是否为数字
      function ischeckNum(id)
		 {
		  var num = document.getElementById(id).value;
		  if(num)
		  {
		   if( !isNaN( num ) )
		   {
		    //alert('是数字');
		    return true;
		   }
		   else
		   {
		    alert('您输入的数据不是数字!');	
		    div1.id.select();	   
		    return false;
		   }
		  }
		  else
		  {
		   alert('需输入内容!');
		   div1.id.focus();
		   return false;		   
		  }
		 }

点击"+"号时调用的方法

function increasePrice(id){
		     var addPrice = $("#"+id).attr("value");
		     var a = parseFloat(addPrice)+0.2;
		     var adPrice=toDecimal2(a);
	    	 $("#"+id).val(adPrice)
	    	 //售价
	    	 var salePrice = $("."+id).text();
	    	 var s= parseFloat(salePrice)+0.2;
	    	 var sPrice= toDecimal2(s);
	    	 $("."+id).html(sPrice);
	    }

 

点击"-"号调用的方法

  function decreasePrice(id){
	    	 var addPrice = $("#"+id).attr("value");
		     var a = parseFloat(addPrice)-0.2;
		     var adPrice=toDecimal2(a);
		     
	    	 //售价
	    	 var salePrice = $("."+id).text();
	    	 var s= parseFloat(salePrice)-0.2;
	    	 var sPrice= toDecimal2(s);
		    	 
		     if((adPrice>=0)&&(sPrice>=0)){
		    	 $("#"+id).val(adPrice);
		    	 $("."+id).html(sPrice);	
		    }else{
		    	alert("好像不能再低了!");
		    }	 
	    }function decreasePrice(id){
	    	 var addPrice = $("#"+id).attr("value");
		     var a = parseFloat(addPrice)-0.2;
		     var adPrice=toDecimal2(a);
		     
	    	 //售价
	    	 var salePrice = $("."+id).text();
	    	 var s= parseFloat(salePrice)-0.2;
	    	 var sPrice= toDecimal2(s);
		    	 
		     if((adPrice>=0)&&(sPrice>=0)){
		    	 $("#"+id).val(adPrice);
		    	 $("."+id).html(sPrice);	
		    }else{
		    	alert("好像不能再低了!");
		    }	 
	    }

 

最终效果

 

  总结

作为一个走java路线的菜鸟来说,能完成这个需求很不容易了,以前写的java已有几万行,但js却没多少,回头一看,确实没认真写过js。通过这个需求,不那么惧怕js,以后自己也可以尝试写了

 

参考资料: js判断输入是否为数字

                限制文本框只能输入数字(这个方法我好像没用)