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. 结对作业 -GUI四则运算

    目录: 一.前言(及项目地址) 二.PSP(planning) 三.结对编程中对接口的设计 四.计算模块接口的设计与实现过程 五.计算模块接口部分的性能改进 六.计算模块部分单元测试展示 七.计算模块 ...

  2. 个人作业Week3-案例分析（201521123103 吴雅娟）

    根据博客要求,写一篇个人随笔 参考来自: http://www.cnblogs.com/xinz/archive/2012/03/26/2417699.html: http://www.cnblogs ...

  3. Linux中安装apache

    一.前言 安装的背景就是公司项目要用,自己在linux安装软件不多,过程比较曲折,需要记录一下(最近几篇博客好像都会有这种高大上的背景)~先说下笔者安装环境以及相关软件版本: 操作系统:RedHat ...

  4. CSS3基础选择器

    /*选择器分组:多个选择器使用同一个样式*/ h1,h2,a{ color: blue; } strong{ color: aquamarine; } /*选择器继承:body中未设置样式的会使用继承 ...

  5. BZOJ4345 POI2016Korale（构造+堆+线段树）

    注意到k与n同阶,考虑构造一种枚举子集的方式,使得尽量先枚举较小的子集.首先sort一下,用堆维护待选子集.每次取出最小子集,并加入:1.将子集中最大数ai替换为ai+1 2.直接向子集中添加ai+1 ...

  6. BZOJ4318 OSU!（动态规划+概率期望）

    设f[i][0/1]为考虑前i位,第i位为0/1时的期望得分(乘以是0/1的概率).暴力转移显然.前缀和优化即可. 但是这个前缀和精度无法承受,动不动就nan. 考虑增加一位的贡献.若之前后缀1的个数 ...

  7. HihoCoder 1480:矩阵填数 (杨氏矩阵 || 钩子公式 + 筛逆元)

    描述 小Hi在玩一个游戏,他需要把1, 2, 3, ... NM填入一个N行M列的矩阵中,使得矩阵每一行从左到右.每一列从上到下都是递增的. 例如如下是3x3的一种填法: 136 247 589 给定 ...

  8. 【题解】HAOI2007分割矩阵

    水题盛宴啦啦啦……做起来真的极其舒服,比某些毒瘤题好太多了…… 数据范围极小 --> 状压 / 搜索 / 高维度dp:观察要求的均方差,开始考虑是不是能够换一下式子.我们用\(a_{x}\)来表 ...

  9. [Leetcode] add binary 二进制加法

    Given two binary strings, return their sum (also a binary string). For example,a ="11"b =& ...

  10. How to turn off the binary log for mysqld_multi instances?

    Q: MySQL supports running multiple mysqld on the same server. One of the ways is to use mysqld_multi ...