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 相关文章推荐
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 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新手上路(九)
2006/10/09 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php随机抽奖实例分析
2015/03/04 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Git命令之分支详解
2021/03/02 PHP
js data日期初始化的5种方法
2013/12/29 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
简单实现js浮动框
2016/12/13 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python实现识别手写数字大纲
2018/01/29 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python实现网站微信登录的示例代码
2019/09/18 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
公司租房协议书范本
2014/10/08 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
驻村工作简报
2015/07/20 职场文书
iPhone13再次曝光
2021/04/15 数码科技