Maison > Article > interface Web > Principe de mise en œuvre et code de script du prix de calcul de la remise HTML
Principe de mise en œuvre et code de script du prix de calcul de la remise HTML
- 不言original
- 2018-06-11 17:41:142922parcourir
Le principe général est de configurer la fonction d'événement de calcul du prix, de prendre différents numéros de réduction déroulants et d'envoyer les résultats du calcul dans la zone de texte. Les amis intéressés peuvent s'y référer
<!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>Le. ci-dessus est l'intégralité du contenu de cet article. J'espère qu'il vous sera utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Comment supprimer l'espace vide de Inline-Block en HTML
À propos des conseils pour définir les bordures des tableaux HTML
Comment afficher les données JSON en HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!