Implementation principle and script code of HTML discount calculation price-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Implementation principle and script code of HTML discount calculation price

不言

Jun 11, 2018 pm 05:41 PM

html price Discount

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 following

<!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>

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone Learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to remove the blank space of Inline-Block in HTML

About Tips for setting HTML table borders

How to display JSON data in html

The above is the detailed content of Implementation principle and script code of HTML discount calculation price. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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