JavaScript代码实现简单计算器


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了JavaScript代码实现简单计算器的具体代码,供大家参考,具体内容如下

一、实现功能

(1)利用css样式、javascript语言和html语言实现计算器的算法 (2)对计算器的页面进行规划以及对界面进行颜色的填涂 (3)对界面各个边框边距进行适当的调整

二、展示

1.代码展示

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>计算器</title>

 <style>
 body{
 padding:0;margin:0;
 background-color:bisque;
 }
 #calculator{
 position:absolute;
 width:1200px;height:620px;
 left:50%;top:50%;
 margin-left:-600px;
 margin-top:-310px;
 }
 #calculator #c_title{
 margin:auto;
 width:800px;
 height:80px;
 margin-left: 150px;
 }
 #calculator #c_title h2{
 text-align:center;
 font-size:33px;font-family:微软雅黑;color:#666666;
 box-shadow: 1px 1px 1px 1px rgba(0, 0, 255, .2);
 }
 #calculator #c_text input{
 padding-right:20px;
 margin-left: 50px;
 width:970px;
 height:50px;
 font-size:25px;font-family:微软雅黑;color:#666666;
 text-align:right;
 border:double 1px;
 border:1px solid black;
 }
 #calculator #c_value{
 widows: 1080px;
 height:408px;
 margin:20px auto;
 }
 #calculator #c_value ul{
 margin:0px;
 }
 #calculator #c_value ul li{
 margin:10px;
 list-style:none;
 float:left;
 width:180px;
 height:80px;
 line-height:80px;
 text-align:center;
 background-color:coral;
 border:0px solid black;
 font-size:30px;
 font-family:微软雅黑;
 color:#666;
 box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
 }
 #calculator #c_value ul li button{
 width: 160px;
 height:40px;
 font-size: 20px;
 }
 </style>

 <script>
 function onLoad(){
 //加载完毕后光标自动对应到输入框
 document.getElementById("input").focus();
 }
 //读取按钮的值,传给输入框
 function inputEvent(e){
 //把val的值改为每个事件的innerHTML值 innerHTML 属性
 var val=e.innerHTML;
 //获取input标签
 var xsval=document.getElementById("input");
 //标签里的value连接每个事件的innerHTML值
 xsval.value+=val; 
 }
 //计算出结果
 function inputOper(){
 var xsval=document.getElementById("input");//获取input标签
 xsval.value=eval(document.getElementById("input").value); //eval()方法计算
 }
 //清零
 function clearNum(){
 var xsval=document.getElementById("input");//获取input标签
 xsval.value="";
 document.getElementById("input").focus();
 }
 //退格
 function backNum(){
 var arr=document.getElementById("input");//获取input标签
 arr.value=arr.value.substring(0,arr.value.length-1); //substring()提取第一个至倒数第二个字符串
 } 
 </script>

</head>

<body>
 <div id="calculator">
 <!--标题-->
 <div id="c_title">
 <h2>计算器</h2>
 </div>
 <!--输入框-->
 <div id="c_text">
 <input type="text" id="input" value="0" readonly="readonly"> <!-- input (id)-->
 </div>
 <!--计算器按钮元件-->
 <div id="c_value">
 <ul>
 <li><button onclick="inputEvent(this)">7</button></li> <!--onlick 鼠标点击函数 this -->
 <li><button onclick="inputEvent(this)">8</button></li>
 <li><button onclick="inputEvent(this)">9</button></li>
 <li style="background: yellow"><button onclick="clearNum()">清零</button></li>
 <li style="background: burlywood"><button onclick="backNum()">退格</button></li>
 <li><button onclick="inputEvent(this)">4</button></li>
 <li><button onclick="inputEvent(this)">5</button></li>
 <li><button onclick="inputEvent(this)">6</button></li>
 <li><button onclick="inputEvent(this)">*</button></li>
 <li><button onclick="inputEvent(this)">/</button></li>
 <li><button onclick="inputEvent(this)">1</button></li>
 <li><button onclick="inputEvent(this)">2</button></li>
 <li><button onclick="inputEvent(this)">3</button></li>
 <li><button onclick="inputEvent(this)">+</button></li>
 <li><button onclick="inputEvent(this)">-</button></li>
 <li><button onclick="inputEvent(this)">0</button></li>
 <li><button onclick="inputEvent(this)">00</button></li>
 <li ><button onclick="inputEvent(this)">.</button></li>
 <li><button onclick="inputEvent(this)">%</button></li>
 <li style="background: red"><button onclick="inputOper(this)">=</button></li>
 </ul>
 </div>
 
 </div>
 
</body>
</html>

2.效果展示

效果如下:

JavaScript代码实现简单计算器

3.总结

由于第一次书写博客,页面过于丑陋,见谅。改demo学会了如何用js实现html计算器,熟悉了js的基础语法及基本使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
JavaScript数组去重实现方法小结
Jan 17 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
JavaScript实现雪花飘落效果
Dec 27 #Javascript
微信小程序自定义胶囊样式
Dec 27 #Javascript
JS实现鼠标移动拖尾
Dec 27 #Javascript
JavaScript实现滚动加载更多
Dec 27 #Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
JavaScript实现瀑布流布局的3种方式
Dec 27 #Javascript
Vue实现省市区三级联动
Dec 27 #Vue.js
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jquery移动节点实例
2015/01/14 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
浅谈js闭包理解
2019/04/01 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python3 log10()函数简单用法
2019/02/19 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
物理教育专业毕业生推荐信
2013/11/03 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
欢迎新生标语2015
2015/07/16 职场文书
团结友爱主题班会
2015/08/13 职场文书
解除租赁合同协议书
2016/03/21 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python