HTML discount price calculation implementation principle and script code

Copy code

The code is 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>Price calculation after discount</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("Congratulations, the transaction is successful!");
}else
{
prices.focus();
prices.select();
alert("Please enter the correct price and quantity (cannot be empty)!");
}
}
</script>
</head>

<body>
<center>
<form name="discount" action="result.jsp" method="post">
Bidding price: <input type="text" id="price" style="width: 150px"/>

Purchase quantity: <input type="text" id="number" style="width: 150px"/>

Payment method: <select id="payfunction" style="width: 150px">
<option value="1">Online banking payment - 50% discount</option>
<option value="2">Alipay payment - 20% off</option>
<option value="3" selected="true">Q coin payment - 40% off</option>
</select>

Estimated total price: <input type="text" id="result" style="width: 150px">

<input type="button" id="allresult" value="Calculate total price" onclick="calculator()" />
</form>
</center>
</body>
</html>

<<: Detailed explanation of the JavaScript timer principle

>>: How to set up vscode remote connection to server docker container

Example code of how CSS matches multiple classes

HTML discount price calculation implementation principle and script code

Example code of how CSS matches multiple classes

Detailed explanation of WeChat Mini Program official face verification

js implements mouse in and out card switching content

A brief discussion on using virtual lists to optimize tables in el-table

A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing

Style trigger effect of web page input box

Vue implements simple production of counter

CSS style writing order and naming conventions and precautions

How to load third-party component libraries on demand in Vue3

Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

Recommend

Interactive experience trends that will become mainstream in 2015-2016

How to deploy hbase using docker

Summary of commonly used SQL statements for creating MySQL tables

Img semi-transparent processing Img plus semi-transparent background implementation ideas and code

htm beginner notes (must read for beginners)

Code for aligning form checkbox and radio text

CSS3 text animation effects

Linux method example to view all information of the process

JavaScript object-oriented class inheritance case explanation

Do you know how to use vue-cropper to crop pictures in vue?

Detailed installation and use of docker-compose

JavaScript implements countdown on front-end web page

17 excellent web designs carefully crafted by startups

Vue project packaging, merging and compression to optimize web page response speed

JS realizes the case of eliminating stars