JS作计算器
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作计算器的更多相关文章
- 使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- js练习计算器
js练习计算器,支持鼠标点击.键盘操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- JS中 计算器的简单制作
今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字& ...
- 纯js房贷计算器开源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS简易计算器的实现,以及代码的优化
用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- JS实现计算器,带三角函数,根号
极简主义网页计算器. 实现了按键特效,可响应键盘按键,实时显示计算结果. 可切换模式,拓展高级功能,包括根号.三角函数.括号等. 效果如下: 代码如下: html: <!DOCTYPE html ...
- js做计算器
js文档: function count(){ var a var txt1=document.getElementById("txt1").value;//获取第一个输入框的值 ...
- js存款计算器原生小demo
大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...
- Node.js作web服务器总结
1.为什么Node.js用JS开发 Node.js 含有一系列内置模块,使得程序可以脱离 Apache HTTP Server 或 IIS,作为独立服务器运行. 首先,我们都清楚的是,同时接收数 ...
随机推荐
- Unity UGUI 图片 轴对称效果 减少资源
制作UI的过程中,为了节省资源,对称的图一般美术切一半给我们 手动拼图 有时会出现拼接处出现裂缝或重叠 调整大小时也不方便 得一块一块调整 所以就用BaseMeshEffect 的ModifyMesh ...
- unity 归纳
1.获取控件四个角在屏幕上的坐标 Vector3[] corners = new Vector3[]; gameObject.GetComponent<RectTransform>().G ...
- lintcode-63-搜索旋转排序数组 II
63-搜索旋转排序数组 II 跟进"搜索旋转排序数组",假如有重复元素又将如何? 是否会影响运行时间复杂度? 如何影响? 为何会影响? 写出一个函数判断给定的目标值是否出现在数组中 ...
- PokeCats开发者日志(二)
现在是PokeCats游戏开发的第四天的上午,来记录一下昨天做的事情吧. day3 day3主要是添加音效和优化界面,本以为添加个音效1~2个小时就够了吧,没想到贼不顺,弄了一个下午才搞好. ...
- 页面加载时给的子元素的第一个元素加class
HTML代码: <div id="xiao"> <ul> <li></li> </ul> </div> js ...
- [剑指Offer] 37.数字在排序数组中出现的次数
题目描述 统计一个数字在排序数组中出现的次数. [思路]因为是排序数组,所以可以用二分法搜索到要查找的值在数组中的一个位置,接着向两侧扫描,遇到不等的就停止. class Solution { pub ...
- Beats数据采集
Beats数据采集 Beats是elastic公司的一款轻量级数据采集产品,它包含了几个子产品: packetbeat(用于监控网络流量). filebeat(用于监听日志数据,可以替代logstas ...
- ES索引
Elasticsearch索引别名.Filtered索引别名.Template 在使用elasticsearch的时候,经常会遇到需要淘汰掉历史数据的场景. 为了方便数据淘汰,并使得数据管理更加灵活, ...
- BZOJ 3876:支线剧情(有下界最小费用最大流)
3876: [Ahoi2014]支线剧情 Description [故事背景]宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩怨情仇的剧 ...
- [洛谷P4208][JSOI2008]最小生成树计数
题目大意:有$n$个点和$m$条边(最多有$10$条边边权相同),求最小生成树个数 题解:对于所有最小生成树,每种边权的边数是一样的.于是就可以求出每种边权在最小生成树中的个数,枚举这种边的边集,求出 ...