Heim  >  Artikel  >  Web-Frontend  >  Implementierungsprinzip und Skriptcode des HTML-Rabattberechnungspreises

Implementierungsprinzip und Skriptcode des HTML-Rabattberechnungspreises

不言
不言Original
2018-06-11 17:41:142966Durchsuche

Das allgemeine Prinzip besteht darin, die Preisberechnungsereignisfunktion festzulegen, verschiedene Dropdown-Rabattnummern zu verwenden und die Berechnungsergebnisse in das Textfeld zu senden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<head> 
<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("请输入正确的价格和数量(也不能为空)!"); 
} 
} 
</script> 
</head> 
<!-- 定义界面格式,设置下拉表,设置计算价格事件--> 
<body> 
<center> 
<form name="discount" action="result.jsp" method="post"> 
竞拍价格:<input type="text" id="price" style="width: 150px"/>
购买数量:<input type="text" id="number" style="width: 150px"/>
支付方式:<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" style="width: 150px">
<input type="button" id="allresult" value="计算总价" onclick="calculator()" /> 
</form> 
</center> 
</body> 
</html>

Das Obige ist das Der gesamte Inhalt dieses Artikels ist für alle hilfreich. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So entfernen Sie das Leerzeichen von Inline-Block in HTML

Über Tipps zum Festlegen von HTML-Tabellenrändern

So zeigen Sie JSON-Daten in HTML an

Das obige ist der detaillierte Inhalt vonImplementierungsprinzip und Skriptcode des HTML-Rabattberechnungspreises. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn