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

What is the difference between HTM and HTML? What is the difference between HTM and HTML?

In the process of learning web design, I did not ...

MySql uses skip-name-resolve to solve the problem of slow external network connection client

The MySQL built on Tencent Cloud is always very s...

Tutorial on binary compilation and installation of MySql centos7 under Linux

// It took me a whole afternoon to install this, ...

Example code for circular hover effect using CSS Transitions

This article introduces Online preview and downlo...

Detailed explanation of cocoscreater prefab

Table of contents Prefab How to create a prefab T...

Implement QR code scanning function through Vue

hint This plug-in can only be accessed under the ...

Example of setting up a whitelist in Nginx using the geo module

Original configuration: http { ...... limit_conn_...

What are the image file formats and how to choose

1. Which three formats? They are: gif, jpg, and pn...

Detailed explanation of three ways to cut catalina.out logs in tomcat

1. Log4j for log segmentation 1) Prepare three pa...

Detailed implementation plan of Vue front-end exporting Excel files

Table of contents 1. Technology Selection 2. Tech...

Complete steps for uninstalling MySQL database

The process of completely uninstalling the MySQL ...

How to quickly install RabbitMQ in Docker

1. Get the image #Specify the version that includ...

Implementation steps of vue-element-admin to build a backend management system

Recently, when I was working on a conference heal...

Native js implementation of magnifying glass component

This article example shares the specific code for...

Various methods to restart Mysql under CentOS (recommended)

1. MySQL installed via rpm package service mysqld...