JavaScript制作计算器

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>计算器</title>

	<style>

		table{

			width: 450px;

			height: 450px;

			margin:100px auto;

			border:2px solid #333;

			box-sizing:border-box;

			background:#ECF3FB;

		}

		button{

			box-sizing:border-box;

			width: 80px;

			height: 80px;

			font-size:48px;

			line-height:80px;

			text-align:center;

			padding: 10px;

			border:1px solid #333;

			background:#D5E0ED;

		}

		#box{

			width:350px;

			height:100px;

			padding: 10px;

			font-size:36px;

			border:1px solid #333;

			margin:30px;

			background:#D5E0ED;

		}

		#clear{

			width:350px;

			height:50px;

			padding: 10px;

			font-size:24px;

			line-height:50px;

			border:1px solid #333;

			margin: 10px 30px;

			background:#D5E0ED;

		}

	</style>

</head>

<body>

	<table >

		<tr>

			<td colspan="4"><div id="box"></div></td>

		</tr>

		<tr>

			<td colspan="4"><button onclick="cancel()" id="clear">清除</button></td>

		</tr>

		<tr>

			<td><button onclick="check(this)">7</button></td>

			<td><button onclick="check(this)">8</button></td>

			<td><button onclick="check(this)">9</button></td>

			<td><button onclick="check(this)">+</button></td>

		</tr>

		<tr>

			<td><button onclick="check(this)">4</button></td>

			<td><button onclick="check(this)">5</button></td>

			<td><button onclick="check(this)">6</button></td>

			<td><button onclick="check(this)">-</button></td>

		</tr>

		<tr>

			<td><button onclick="check(this)">1</button></td>

			<td><button onclick="check(this)">2</button></td>

			<td><button onclick="check(this)">3</button></td>

			<td><button onclick="check(this)">*</button></td>

		</tr>

		<tr>

			<td><button onclick="check(this)">0</button></td>

			<td><button onclick="check(this)">.</button></td>

			<td><button onclick="equ()">=</button></td>

			<td><button onclick="check(this)">/</button></td>

		</tr>

	</table>

	<script>

		function check(ele){

			box.innerHTML+=ele.innerHTML;//box.innerHTML=box.innerHTML+ele.innerHTML

		}

		function equ(){

			box.innerHTML=eval(box.innerHTML);

			console.log(eval(box.innerHTML))

		}

		function cancel(){

			box.innerHTML="";

		}

	</script>

</body>

</html>

JS作计算器的更多相关文章

  1. 使用html+css+js实现计算器

    使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...

  2. js练习计算器

    js练习计算器,支持鼠标点击.键盘操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. JS中 计算器的简单制作

    今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字& ...

  4. 纯js房贷计算器开源

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS简易计算器的实现，以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. JS实现计算器，带三角函数，根号

    极简主义网页计算器. 实现了按键特效,可响应键盘按键,实时显示计算结果. 可切换模式,拓展高级功能,包括根号.三角函数.括号等. 效果如下: 代码如下: html: <!DOCTYPE html ...

  7. js做计算器

    js文档: function count(){ var a var txt1=document.getElementById("txt1").value;//获取第一个输入框的值 ...

  8. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  9. Node.js作web服务器总结

    1.为什么Node.js用JS开发    Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运行. 首先,我们都清楚的是,同时接收数 ...

随机推荐

  1. 排查实时tail功能cpu占用过高问题

    “你的python应用cpu占用快90%了!!!”,良哥朝我眨了眨布满血丝的眼睛“不会吧”,我心想:我这是好的啊 没接触过kafka的同学可以先了解下:([http://www.jasongj.com ...

  2. z 变换

    1. z 变换 单位脉冲响应为 \(h[n]\) 的离散时间线性时不变系统对复指数输入 \(z^n\) 的响应 \(y[n]\) 为 \[ \tag{1} y[n] = H(z) z^{n}\] 式中 ...

  3. Java开发环境配置时的dt.jar与tools.jar是什么（转载）

    你了解dt.jar吗 很多人在初学Java的时候,都要配置环境变量.在配置CLASSPATH的时候,都会加上一个当前目录.,还有两个jar:dt.jar和tools.jar.其实好多人都不了解这两个j ...

  4. 【Linux】使用 PXE+Kickstart 无人值守批量安装系统

    一.PXE背景知识 通过 PXE+DHCP+TFTP+VSftpd+Kickstart 服务程序搭建出无人值守安装系统,从而批量部署客户机系统. PXE(Preboot eXecute Environ ...

  5. 解决Linux下启动Tomcat遇到Neither the JAVA_HOME ...报错

    解决Linux下启动Tomcat遇到Neither the JAVA_HOME ...报错 Neither the JAVA_HOME nor the JRE_HOME environment var ...

  6. javasisst & JAVA8

    今天在服务器上启动tomcat7的时候,提示如下异常: java.io.IOException: invalid constant type: 15 具体看是javasisst抛出来的. 系统运行环境 ...

  7. IE6,7,8支持css圆角

    我们知道Webkit内核的浏览器支持-webkit-border-radius: 10px;属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持-moz-border-radius ...

  8. 【电影影评】梦之安魂曲-败给了BGM和豆瓣影评

    首先,这部电影豆瓣8.7分,一般来说,豆瓣的打分是比较准确的.能反映一个片子的质量,而较少受到环境的影响.但是这种关系当然也不全对,比如某些片子可能特别让某一种人喜欢(如退役军人和军旅题材),而在某些 ...

  9. [洛谷P1401]城市

    题目大意:有$n(2\leqslant n\leqslant200)$个城市,$m(1\leqslant m\leqslant40000)$条无向边,你要找$T(1\leqslant T\leqsla ...

  10. Contest Hunter 模拟赛09 A [线段树维护斜率]

    题面 传送门 思路 首先看看我们到底要干什么:有$1e6$次询问,遍历$i$,每次要求一个形如$b_i \ast a_j - a_i \ast b_j$的东西的最大值 考虑如果一个$j$的决策在当前的 ...