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基础知识filter()和find()实例说明
Jul 06 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 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面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
图片按比例缩放函数
2006/06/26 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
简单了解什么是神经网络
2017/12/23 Python
Python聊天室程序(基础版)
2018/04/01 Python
对python 调用类属性的方法详解
2019/07/02 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
学术诚信承诺书
2014/05/26 职场文书
新文化运动的基本口号
2014/06/21 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
二年级学生期末评语
2014/12/26 职场文书
房产公证书格式
2015/01/26 职场文书
班主任自我评价范文
2015/03/11 职场文书
初中数学教学反思范文
2016/02/17 职场文书