HTML discount price calculation implementation principle and script code

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>
<!-- Set the price calculation event function, take different drop-down discount amounts, and send the calculation results to the text box-->
<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>
<!-- Define the interface format, set the drop-down table, set the calculation price event-->
<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

Recommend

Interactive experience trends that will become mainstream in 2015-2016

The most important interactive design article in ...

How to deploy hbase using docker

Standalone hbase, let’s talk about it first. Inst...

Summary of commonly used SQL statements for creating MySQL tables

Recently, I have been working on a project and ne...

htm beginner notes (must read for beginners)

1. What is HTML HTML (HyperText Markup Language):...

Code for aligning form checkbox and radio text

Alignment issues like type="radio" and t...

CSS3 text animation effects

Effect html <div class="sp-container"...

Linux method example to view all information of the process

There is a task process on the server. When we us...

JavaScript object-oriented class inheritance case explanation

1. Object-oriented class inheritance In the above...

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

Table of contents 1. Installation: 2. Use: 3. Bui...

Detailed installation and use of docker-compose

Docker Compose is a Docker tool for defining and ...

JavaScript implements countdown on front-end web page

Use native JavaScript to simply implement the cou...

17 excellent web designs carefully crafted by startups

Startups often bring us surprises with their unco...

JS realizes the case of eliminating stars

This article example shares the specific code of ...