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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
Angular2安装angular-cli
May 21 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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的静态成员函数效率更高的原因
2014/06/13 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
在pytorch中查看可训练参数的例子
2019/08/18 Python
flask 实现token机制的示例代码
2019/11/07 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python 实现单例模式的5种方法
2020/09/23 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
个人实用简单的自我评价
2013/10/19 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
促销活动总结模板
2014/07/01 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
辞职离别感言
2015/08/04 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server