JavaScript商品價格打折計算器

admin發表於2017-03-28
JavaScript

在實際生活中，可能有些商品可能會在節假日等場合中進行打折促銷，也就是在原有價格基礎上進行一定的折扣，下面就通過程式碼例項介紹一下如何利用javascript實現自動計算折扣的功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function calculator(){ 
  var prices=document.getElementById("price"); 
  var discounts=document.getElementById("number"); 
  var pay; 
  var select=document.getElementById("payfunction"); 
  if((prices.value>=0&&!isNaN(prices.value))&&  (discounts.value>=0&&!isNaN(discounts.value))&&
  prices.value!=""&&discounts.value!=""){ 
    pay=prices.value*discounts.value; 
    switch(parseInt(select.value)){ 
      case 1:
        pay=pay*0.5; 
        break; 
      case 2:
        pay=pay*0.8; 
        break; 
      case 3:
        pay=pay*0.6; 
        break; 
    } 
    document.getElementById("result").value=pay; 
    alert("恭喜你，交易成功！"); 
  }
  else{ 
    prices.focus(); 
    prices.select(); 
    alert("請輸入正確的價格和數量(也不能為空)！"); 
  } 
} 
window.onload=function(){
  var allresult=document.getElementById("allresult");
  allresult.onclick=function(){
    calculator();
  }
}
</script> 
</head> 
<body> 
<center> 
競拍價格:<input type="text" id="price"/>
購買數量:<input type="text" id="number"/>
支付方式:
<select id="payfunction" style="width: 150px"> 
  <option value="1">網銀支付-打5折</option> 
  <option value="2">支付寶支付-打8折</option> 
  <option value="3" selected="true">Q幣支付-打6折</option> 
</select>
預計總價:<input type="text" id="result"/>
<input type="button" id="allresult" value="計算總價"/> 
</center> 
</body> 
</html>

相關文章