js 模拟简易计算器 html

原创已于 2022-06-13 21:38:25 修改 · 349 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3

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

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

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

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 onclick="cal('8')">8</button>
				<button onclick="cal('9')">9</button>
				<button onclick="cal('+')">+</button>
				<button onclick="cal('-')">-</button>
				<button onclick="cal('*')">*</button>
				<button onclick="cal('*')">/</button>
				<button onclick="dy1()">ACE</button>
				<button onclick="dy()">=</button>
			</div>
		</div>

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

我们继续引入js：

<script>
			var _res = document.getElementById("res");
			function cal(param){
			_res.value=_res.value+param;
			}
			function dy(){
			_res.value=eval(_res.value);
			}
			function dy1(){
			_res.value=null;
			}
		</script>

完整代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <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>
   </head>
   <body>
       <div class="wrapper">
           <input type="text" id="res" value="">
           <div ><button οnclick="cal('1')">1</button>
               <button οnclick="cal('2')">2</button>
               <button οnclick="cal('3')">3</button>
               <button οnclick="cal('4')">4</button>
               <button οnclick="cal('5')">5</button>
               <button οnclick="cal('6')">6</button>
               <button οnclick="cal('7')">7</button>
               <button οnclick="cal('8')">8</button>
               <button οnclick="cal('9')">9</button>
               <button οnclick="cal('+')">+</button>
               <button οnclick="cal('-')">-</button>
               <button οnclick="cal('*')">*</button>
               <button οnclick="cal('*')">/</button>
               <button οnclick="dy1()">ACE</button>
               <button οnclick="dy()">=</button>
           </div>
       </div>
       <script>
           var _res = document.getElementById("res");
           function cal(param){
           _res.value=_res.value+param;
           }
           function dy(){
           _res.value=eval(_res.value);
           }
           function dy1(){
           _res.value=null;
           }
       </script>
   </body>
</html>