輸入單價和數量自動計算價格程式碼

admin發表於2017-03-09

在大多數商城都有這樣的功能，當輸入商品數量和商品的單價，就會自動計算出來商品的總價格，非常的人性化，省卻了使用者不少時間，下面是一段類似的程式碼例項，希望能夠給大家帶來一定的幫助。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
#txtTotal,#txtPrice{
  border-right-width:0px;
  margin-right:0px;
}
.money{
  border-left-width:0px;
  margin-left:-4px;
  width:18px;
}
</style>
<script type="text/javascript"> 
function checkInt(o){ 
  theV=isNaN(parseInt(o.value))?0:parseInt(o.value); 
  if(theV!=o.value){
 o.value=theV;
  } 
  txtTotal.value=txtAmount.value*txtPrice.value; 
} 
function checkP(o){ 
  theV=isNaN(parseFloat(o.value))?0:parseFloat(o.value); 
  theV=parseInt(theV*100)/100; 
  if(theV!=o.value){ 
    theV=(theV*100).toString(); 
    theV=theV.substring(0,theV.length-2)+"."+theV.substring(theV.length-2,theV.length) 
    o.value=theV; 
  } 
  txtTotal.value=txtAmount.value*txtPrice.value; 
} 
window.onload=function(){
  var txtAmount=document.getElementById("txtAmount");
  var txtPrice=document.getElementById("txtPrice");
  txtAmount.onkeyup=function(){
    checkInt(this)
  }
  txtAmount.onpaste=function(){
    checkInt(this);
  }
  txtAmount.oncut=function(){
    checkInt(this);
  }
  txtAmount.ondrop=function(){
    checkInt(this);
  }
  txtAmount.onchange=function(){
    checkInt(this);
  }
   
  txtPrice.onkeyup=function(){
    checkP(this)
  }
  txtPrice.onpaste=function(){
    checkP(this);
  }
  txtPrice.oncut=function(){
    checkP(this);
  }
  txtPrice.ondrop=function(){
    checkP(this);
  }
  txtPrice.onchange=function(){
    checkP(this);
  }
}
</script> 
</head> 
<body> 
數量: 
<input id="txtAmount" value="0" /> 
單價: 
<input id="txtPrice" value="0" /> 
<input class="money" value="￥" readonly> 
總價: 
<input id="txtTotal" value="0" readonly> 
<input class="money" value="￥" readonly>
</body> 
</html>

以上程式碼可以實現商品總價格自動計算功能。

相關文章