js 模拟简易计算器 html

Markingking

已于 2022-06-13 21:38:25 修改

阅读量285

点赞数 4

文章标签： javascript css css3

于 2022-06-13 21:30:56 首次发布

本文链接：https://blog.csdn.net/m0_69964155/article/details/125267828

版权

这篇博客介绍了如何使用HTML和CSS创建一个计算器的基础布局，接着通过JavaScript实现加减乘除的功能。博客提供了完整的HTML、CSS和JavaScript代码，适合初学者进行实践。

摘要由CSDN通过智能技术生成

前言：模拟计算器学会之后可以进阶学一些难的，先把加减乘除学会慢慢来。

1.首先我们先把计算器的html和css写好如下：(这都是简单的样式我就不多说了，往下看)

然后写好的HTML展示出来如下：

我们继续引入js：

完整代码如下:

前言：模拟计算器学会之后可以进阶学一些难的，先把加减乘除学会慢慢来。

1.首先我们先把计算器的html和css写好如下：(这都是简单的样式我就不多说了，往下看)

<style>
			* {
				padding: 0;
				margin: 0;
			}

			.wrapper {
				width: 400px;
				height: 450px;
				background-color: gray;
			}

			.wrapper>div {
				width: 360px;
				height: 310px;
				background-color: green;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				padding: 20px;

			}

			#res {
				width: 300px;
				height: 50px;
				margin: 5px 50px 20px;

				border: none;
				outline: none;
			}

			button {
				width: 100px;
				height: 30px;
			}
		</style>

<div class="wrapper">
			<input type="text" id="res" value="">
			<div ><button onclick="cal('1')">1</button>
				<button onclick="cal('2')">2</button>
				<button onclick="cal('3')">3</button>
				<button onclick="cal('4')">4</button>
				<button onclick="cal('5')">5</button>
				<button onclick="cal('6')">6</button>
				<button onclick="cal('7')">7</button>
				<button on

最低0.47元/天解锁文章