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. Unity UGUI 图片 轴对称效果 减少资源

    制作UI的过程中,为了节省资源,对称的图一般美术切一半给我们 手动拼图 有时会出现拼接处出现裂缝或重叠 调整大小时也不方便 得一块一块调整 所以就用BaseMeshEffect 的ModifyMesh ...

  2. unity 归纳

    1.获取控件四个角在屏幕上的坐标 Vector3[] corners = new Vector3[]; gameObject.GetComponent<RectTransform>().G ...

  3. lintcode-63-搜索旋转排序数组 II

    63-搜索旋转排序数组 II 跟进"搜索旋转排序数组",假如有重复元素又将如何? 是否会影响运行时间复杂度? 如何影响? 为何会影响? 写出一个函数判断给定的目标值是否出现在数组中 ...

  4. PokeCats开发者日志（二）

      现在是PokeCats游戏开发的第四天的上午,来记录一下昨天做的事情吧. day3   day3主要是添加音效和优化界面,本以为添加个音效1~2个小时就够了吧,没想到贼不顺,弄了一个下午才搞好. ...

  5. 页面加载时给的子元素的第一个元素加class

    HTML代码: <div id="xiao"> <ul> <li></li> </ul> </div> js ...

  6. [剑指Offer] 37.数字在排序数组中出现的次数

    题目描述 统计一个数字在排序数组中出现的次数. [思路]因为是排序数组,所以可以用二分法搜索到要查找的值在数组中的一个位置,接着向两侧扫描,遇到不等的就停止. class Solution { pub ...

  7. Beats数据采集

    Beats数据采集 Beats是elastic公司的一款轻量级数据采集产品,它包含了几个子产品: packetbeat(用于监控网络流量). filebeat(用于监听日志数据,可以替代logstas ...

  8. ES索引

    Elasticsearch索引别名.Filtered索引别名.Template 在使用elasticsearch的时候,经常会遇到需要淘汰掉历史数据的场景. 为了方便数据淘汰,并使得数据管理更加灵活, ...

  9. BZOJ 3876：支线剧情（有下界最小费用最大流）

    3876: [Ahoi2014]支线剧情 Description [故事背景]宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩怨情仇的剧 ...

  10. [洛谷P4208][JSOI2008]最小生成树计数

    题目大意:有$n$个点和$m$条边(最多有$10$条边边权相同),求最小生成树个数 题解:对于所有最小生成树,每种边权的边数是一样的.于是就可以求出每种边权在最小生成树中的个数,枚举这种边的边集,求出 ...