Home > Article > Web Front-end > HTML discount calculation price principle and script code
HTML discount calculation price principle and script code
- 高洛峰Original
- 2017-02-28 13:27:201923browse
The general principle is to set the calculation price event function, take different drop-down discount numbers, and send the calculation results into the text box. Interested friends can refer to the
code as follows:
<!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>More For articles related to HTML discount calculation price principles and script code, please pay attention to the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The target link of the a tag points to the iframeNext article：The target link of the a tag points to the iframe