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

How to deeply understand React's ref attribute

Table of contents Overview 1. Creation of Refs ob...

Detailed explanation of Vue-router nested routing

Table of contents step 1. Configure routing rules...

Examples of using MySQL covering indexes

What is a covering index? Creating an index that ...

Docker-compose one-click deployment of gitlab Chinese version method steps

1. Introduction to gitlab Gitlab official address...

Vue calculated property implementation transcript

This article shares the Vue calculation property ...

Summary of common commands for building ZooKeeper3.4 middleware under centos7

1. Download and decompress 1. Introduction to Zoo...

Detailed explanation of Javascript closures and applications

Table of contents Preface 1. What is a closure? 1...

MySQL process control IF(), IFNULL(), NULLIF(), ISNULL() functions

In MySQL, you can use IF(), IFNULL(), NULLIF(), a...

How to solve the front-end cross-domain problem using Nginx proxy

Preface Nginx (pronounced "engine X") i...

Don’t bother with JavaScript if you can do it with CSS

Preface Any application that can be written in Ja...

Nginx installation detailed tutorial

1. Brief Introduction of Nginx Nginx is a free, o...

How to keep running after exiting Docker container

Phenomenon: Run an image, for example, ubuntu14.0...

Self-study of MySql built-in functions knowledge points summary

String functions Check the ascii code value of th...

HTML mouse css control

Generally speaking, the mouse is displayed as an u...