美肤堂计算器

码农（消灭bug）

已于 2023-10-04 22:28:13 修改

阅读量75

点赞数 3

分类专栏： JavaScript 文章标签：前端

于 2023-10-04 22:26:47 首次发布

本文链接：https://blog.csdn.net/qq_55641896/article/details/133255844

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js代码：

function compute(op){
	// 定义两个变量
	var num1,num2;
	// 获取输入的商品单价
	num1=parseFloat(document.myform.txtNum1.value);
	num2=parseInt(document.myform.txtNum2.value);
	if(op=="9折")
		document.myform.txtResult.value=(num1*num2*0.9).toFixed(2);
	if(op=="8折")
		document.myform.txtResult.value=(num1*num2*0.8).toFixed(2);
	if(op=="7折")
		document.myform.txtResult.value=(num1*num2*0.7).toFixed(2);
    if(op=="6折")
		document.myform.txtResult.value=(num1*num2*0.6).toFixed(2);
	
}

css代码：

table{
    width: 280px;
    margin: 0 auto;
    padding: 5px;
    border-width: 0;
    border: 1px solid balck;
    background-color: #c9e495;
    text-align: center;
}

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美肤堂商品促销计算器</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js"></script>
	</head>
	<body>
		
		<form method="post" id="myform" name="myform">
			<table>
				<tr>
					<td colspan="4">美肤堂商品促销计算器</td>
				</tr>
				<tr>
					<td>商品单价</td>
					<td colspan="3"><input name="txtNum1" type="text" id="txtNum1"/></td>
				</tr>
				<tr>
					<td>数量</td>
					<td colspan="3"><input name="txtNum2" type="text" id="txtNum2"/></td>
				</tr>
				
				<tr>
					<td><input name="Btn1" type="button" id="Btn1" value="9折" onClick="compute('9折')"/></td>
					<td><input name="Btn2" type="button" id="Btn2" value="8折" onClick="compute('8折')"/></td>
					<td><input name="Btn3" type="button" id="Btn3" value="7折" onClick="compute('7折')"/></td>
					<td><input name="Btn4" type="button" id="Btn4" value="6折" onClick="compute('6折')"/></td>
				</tr>
				
				<tr>
					<td>计算结果</td>
					<td colspan="3"><input name="txtResult" type="text" id="txtResult"></td>
				</tr>
			</table>
		</form>
		
	</body>
</html>

运行效果：

美肤堂计算器