Maison >interface Web >tutoriel HTML >Principe du prix de calcul de la remise HTML et code de script
Principe du prix de calcul de la remise HTML et code de script
- 高洛峰original
- 2017-02-28 13:27:202010parcourir
Le principe général est de définir 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 se référer au code
comme suit :
<!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>Pour plus d'articles liés aux principes de calcul des prix de remise HTML et au code de script, veuillez faire attention au site Web PHP chinois !
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le lien cible de la balise a pointe vers l'iframeArticle suivant：Le lien cible de la balise a pointe vers l'iframe