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. 贝叶斯网（1）尝试用Netica搭建简单的贝叶斯网并使用贝叶斯公式解释各个bar的结果

    近来对贝叶斯网十分感兴趣,按照博客<读懂概率图模型:你需要从基本概念和参数估计开始>给出的第一个例子,试着搭建了一个student网. (1)点击绿F,对条件概率表予以输入(包括两个祖先节 ...

  2. tensorflow学习笔记(2)-反向传播

    tensorflow学习笔记(2)-反向传播 反向传播是为了训练模型参数,在所有参数上使用梯度下降,让NN模型在的损失函数最小 损失函数:学过机器学习logistic回归都知道损失函数-就是预测值和真 ...

  3. Python攻击

    python   DOS攻击 2版本 #!/usr/bin/env python import socket import time import threading #Pressure Test,d ...

  4. HDU 4010 Query on The Trees（动态树LCT）

    Problem Description We have met so many problems on the tree, so today we will have a query problem ...

  5. C++结构体排序

    在C++中,对结构体的排序方式比C语言丰富的多.在C语言中,我们主要是通过qsort进行排序操作(抛开手写排序算法不说). 在C++<algorithm>中,有一个十分强大的排序函数sor ...

  6. 详解python 局部变量与全局变量

    本文将详细分析python的全局变量与局部变量,学过php的人都知道,php里面的全局变量是无法在function里面去使用的,只有超全局变量才可以,那么python会怎么处理全局变量与局部变量呢?下 ...

  7. Solr的搭建和部署

    1.概述 简介 Solr,全称Search On Lucene Replication.一个开源的搜索服务器,对外提供类似于WebService的API接口. 用户可以通过http请求,向搜索引擎服务 ...

  8. akka与slf4j导致jvm直接crash的诡异

    流程很简单,创建actorSystem,通过actorSystem获取AkkaQueryServiceRetriever,进而通过传递path获得的Gateway进行通信. 之前在主项目里跑的很稳定, ...

  9. [C/C++] “箭头（->）”和“点号（.）”的区别

    转自:http://blog.csdn.net/gyymen/article/details/4962873 首先介绍一下C++中的结构.对于一个结构: struct MyStruct { int m ...

  10. hdu 1856 More is better （并查集）

    More is better Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 327680/102400 K (Java/Others) ...