Javascript 实现简单计算器实例代码


Posted in Javascript onOctober 23, 2016

效果图:

Javascript 实现简单计算器实例代码

刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵。

代码:

<!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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
JS动画效果代码3
Apr 03 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 #Javascript
jquery 实现回车登录详解及实例代码
Oct 23 #Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 #Javascript
web前端开发upload上传头像js示例代码
Oct 22 #Javascript
jQuery中$.ajax()方法参数解析
Oct 22 #Javascript
详解Javascript函数声明与递归调用
Oct 22 #Javascript
js中利用cookie实现记住密码功能
Aug 20 #Javascript
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
Java中实现多态的机制
2015/08/09 面试题
化学相关工作求职信
2013/10/02 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
2014年冬季防火方案
2014/05/21 职场文书
幸福家庭标语
2014/06/27 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书