同时用C++和HTML同时做一个饭店价格统计器

发布于:2024-07-07 ⋅ 阅读:(160) ⋅ 点赞:(0)

问题引入:

大家有没有想过在饭店的时候我们讲了很多的不同的大碗小碗的饭算价格要算很久但是利用这个程序就不需要算很久了完了

我们可以用c++和html实现这个计算

代码部分:

c++:

规定价格:

首先我们要在代码里面规定好大碗和小碗的价格

	int bigprice = 15;	//大碗价格
	int smallprice =20;	//小碗价格
	int bigamount=0;//大碗数量
	int smallamount =0;//小碗数量

规定计算公式:

根据我们需要的逻辑来规定计算公式就行

	int total = bigprice*bigamount+smallprice*smallamount;

完整代码:

#include<iostream>
using namespace std;
int main(){
	
	int bigprice = 15;	//大碗价格
	int smallprice =20;	//小碗价格
	int bigamount=0;//大碗数量
	int smallamount =0;//小碗数量
	
	cout<<"*********************"<<endl;
	cout<<"欢迎使用价格统计器"<<endl;
	cout<<"*********************"<<endl<<endl;
	cout<<"请输入大碗数量:"<<endl;
	cin>>bigamount;
	cout<<"请输入小碗数量:"<<endl;
	cin>>smallamount;
	int total = bigprice*bigamount+smallprice*smallamount;
	cout<<"总价格为:"<<total<<endl;
	
	
	return 0;
}

html:

完整代码:

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>价格统计器</title>
		 <style>
		        body {
		            font-family: Arial, sans-serif;
		            margin: 0;
		            padding: 20px;
		            background-color: #f0f0f0;
		        }
		
		        h1 {
		            text-align: center;
		            color: #333;
		        }
		
		        label, input[type="number"] {
		            display: block;
		            margin-bottom: 10px;
		        }
		
		        label {
		            font-weight: bold;
		        }
		
		        input[type="number"] {
		            width: 100px;
		            padding: 5px;
		            border: 1px solid #ccc;
		            border-radius: 4px;
		            text-align: center;
		        }
		
		        button {
		            display: block;
		            margin: 20px auto;
		            padding: 10px 20px;
		            background-color: #4CAF50;
		            color: white;
		            border: none;
		            border-radius: 4px;
		            cursor: pointer;
		        }
		
		        button:hover {
		            background-color: #45a049;
		        }
		
		        #totalPrice {
		            font-weight: bold;
		            font-size: 18px;
		            text-align: center;
		            margin-top: 20px;
		        }
		    </style>
	</head>
	<body>
		<h1>欢迎使用价格统计器</h1>

		<label for="bigamount">请输入大碗数量:</label>
		<input type="number" id="bigamount" name="bigamount" value="0">

		<label for="smallamount">请输入小碗数量:</label>
		<input type="number" id="smallamount" name="smallamount" value="0">

		<button onclick="calculateTotal()">计算总价</button>

		<p id="totalPrice">总价格为:0</p>

		<script>
			function calculateTotal() {
				// 获取输入值
				var bigPrice = 20; // 大碗价格
				var smallPrice = 15; // 小碗价格
				var bigAmount = parseInt(document.getElementById('bigamount').value, 10) || 0; // 大碗数量
				console.log(bigAmount);
				var smallAmount = parseInt(document.getElementById('smallamount').value, 10) || 0; // 小碗数量
				console.log(smallPrice);
				// 计算总价
				var total = bigPrice * bigAmount + smallPrice * smallAmount;
				console.log(total);
				// 显示总价
				document.getElementById('totalPrice').textContent = "总价格为:" + total;
			}
		</script>
	</body>
</html>

温情提示:

代码中控制台打印数据的部分可以根据需要删掉

CSS部分可以根据需要更改 


网站公告

今日签到

点亮在社区的每一天
去签到