js实现简单计算器
效果图:
刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js简单计算器</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
input{
margin-top:2px;
margin-left:2px;
width:230px;
height:30px;
text-align:right;
}
button{
margin-top:2px;
margin-left:2px;
width:50px;
height:50px;
}
#container{
margin-left:1px;
border:1px solid #E4E4E4;
background:#BBBBBB;
width:235px;
height:215px;
}
</style>
<script>
function onLoad(){
//加载完毕后光标自动对应到输入框
document.getElementById("input").focus();
}
//读取按钮的值,传给输入框
function inputEvent(e){
//把val的值改为每个事件的innerHTML值
var val=e.innerHTML;
//获取input标签
var xsval=document.getElementById("input");
//标签里的value连接每个事件的innerHTML值
xsval.value+=val;
}
//计算出结果
function inputOper(){
var xsval=document.getElementById("input");
xsval.value=eval(document.getElementById("input").value);
}
//清零
function clearNum(){
var xsval=document.getElementById("input");
xsval.value="";
document.getElementById("input").focus();
}
//退格
function backNum(){
var arr=document.getElementById("input");
arr.value=arr.value.substring(0,arr.value.length-1);
}
</script>
</head>
<body onload="onLoad()">
<input id="input" type="text">
<div id="container">
<div>
<button onclick="inputEvent(this)">1</button>
<button onclick="inputEvent(this)">2</button>
<button onclick="inputEvent(this)">3</button>
<button onclick="inputEvent(this)">+</button>
</div>
<div>
<button onclick="inputEvent(this)">4</button>
<button onclick="inputEvent(this)">5</button>
<button onclick="inputEvent(this)">6</button>
<button onclick="inputEvent(this)">-</button>
</div>
<div>
<button onclick="inputEvent(this)">7</button>
<button onclick="inputEvent(this)">8</button>
<button onclick="inputEvent(this)">9</button>
<button onclick="inputEvent(this)">*</button>
</div>
<div>
<button onclick="inputEvent(this)">0</button>
<button onclick="inputEvent(this)">.</button>
<button onclick="inputOper(this)">=</button>
<button onclick="inputEvent(this)">/</button>
</div>
</div>
<button onclick="clearNum()">清零</button>
<button onclick="backNum()">退格</button>
</body>
</html>
js实现简单计算器的更多相关文章
- Ext实现简单计算器
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...
- html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- 1.C#WinForm基础制作简单计算器
利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...
- 菜鸟学Android编程——简单计算器《一》
菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- PAT 06-1 简单计算器
想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...
- php大力力 [005节] php大力力简单计算器001
2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...
- PHP实现简单计算器
<!--简单的计算器--> <!DOCTYPE html> <html> <head> <title>PHP实现简单计算器</titl ...
随机推荐
- MyEclipe 配置 ivy 插件
在 MyEclipse 装插件绝对不是技术的问题.只要你有足够的耐心和时间. 经过两次试验,在 MyEclipse 配置插件大概流程如下. 配置ivy: 1.打开配置中心 2.选择[Sof ...
- [LeetCode] 76. Minimum Window Substring 解题思路
Given a string S and a string T, find the minimum window in S which will contain all the characters ...
- 【转】shell 教程——04 什么时候使用Shell
因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...
- 用chrome按F12抓包 页面跳转POST一瞬间就闪没了
- cdn加速对门户网站产生的影响
满意的用户体验是门户网站吸引和留住用户的必备条件.据统计,如果等待网页打开的时间超过8秒,将会有超过30%的用户放弃等待,造成严重的用户流失,降低了用户的体验度和忠诚度.门户网站内容涉及面多,涵盖文字 ...
- Yii2 ActiveForm表单自定义样式
实例: <?php $form = ActiveForm::begin([ 'fieldConfig' => [ 'template' => '<div class=" ...
- 【转载】NativeSQL实例
转自:http://blog.sina.com.cn/s/blog_3f2c03e301017fqz.html ---------------------------------------- ...
- Java为何大行其道
Java为何大行其道 --专訪传智播客冯威老师 冯威老师,多年来一直从事软件开发和教学工作.先后担任过项目经理.软件架构师.软件开发project师.系统架构师.讲师等.具备丰富的软件开发经验和教学经 ...
- [D3] 8. Margins
If you want ot add margins, should append graphics container in svg var svg = d3.select('#chartArea' ...
- UNIX环境高级编程---标准I/O库
前言:我想大家学习C语言接触过的第一个函数应该是printf,但是我们真正理解它了吗?最近看Linux以及网络编程这块,我觉得I/O这块很难理解.以前从来没认识到Unix I/O和C标准库I/O函数压 ...