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. LeetCode 410——分割数组的最大值

    1. 题目 2. 解答 此题目为 今日头条 2018 AI Camp 5 月 26 日在线笔试编程题第二道--最小分割分数. class Solution { public: // 若分割数组的最大值 ...

  2. java中使用POI+excel 实现数据的批量导入和导出

    java web中使用POI实现excel文件的导入和导出 文件导出 //导入excle表 public String exportXls() throws IOException{ //1.查询所有 ...

  3. Linux杂技

    挂载光盘 mkdir /mnt/cdrom #建立挂载点 mount /dev/cdrom /mnt/cdrom/ #挂载光盘 更换YUM源: cd /etc/yum.repos.d/ 使网络yum源 ...

  4. 【历史】- Unix时代的开创者Ken Thompson

    自图灵奖诞生以来,其获得者一直都是计算机领域的科学家与学者,而在所有这些界的图灵奖中只有唯一的一届有个例外,那就是Ken Thompson与Dennis M. Ritchie,他们都是计算机软件工程师 ...

  5. Action中使用Json

    1.前台页面中的ajax: //根据部门查询该部门下的用户列表 function doSelectDept(){ //1.获取部门 var dept = $("#toCompDept opt ...

  6. 2017 Multi-University Training Contest - Team 3 Kanade's trio（字典树+组合数学）

    题解: 官方题解太简略了orz 具体实现的方式其实有很多 问题就在于确定A[j]以后,如何找符合条件的A[i] 这里其实就是要提前预处理好 我是倒序插入点的,所以要沿着A[k]爬树,找符合的A[i] ...

  7. CodeIgniter自带的数据库类使用介绍

    在 CodeIgniter 中,使用数据库是非常频繁的事情.你可以使用框架自带的数据库类,就能便捷地进行数据库操作. 初始化数据库类 依据你的数据库配置载入并初始化数据库类: view source ...

  8. git使用笔记（二）分支与合并

    By francis_hao    Nov 18,2016 查看分支,* 表示当前所在分支 $ git branch 查看分支和最后一次提交记录 $ git branch -v 新建分支 $ git ...

  9. spring事务不回滚 自己抛的异常

    在service代码中   throw new Excepion("自定义异常“) 发现没有回滚, 然后百度了下, 改为抛出运行时异常  throw new RuntimeException ...

  10. Membership Service Providers (MSP)

    https://blog.csdn.net/baidu_39649815/article/details/76468249 Membership service provider (MSP)是一个提供 ...