JS制作简易计算器的实例代码


Posted in Javascript onJuly 04, 2020

做一个简易计算器,效果图片

JS制作简易计算器的实例代码

c表示清空,为一个空字符串

+/-表示该值为正还是负

%表示当前值/100

←表示退格,往前删除一个值

eval 函数是能够计算出字符串表达式或者语句的结果,把结果求出来。

代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #div1{
    margin:20px auto;
    width:420px;
    height:490px;
    background-color:#E8E8E8;
    border:1px solid #ccc;
    border-radius:5px;
    }
   .div2{
    width:410px;
    height:60px;
    border:1px solid #ccc;
    margin:5px auto;
    border-radius:5px;
    text-align:right;
    font-size:30px;
    background-color:white;
    padding-top:10px;
       } 
   
   .div3{
    width:410px;
    height:60px;
    margin:5px auto;
    float:left;
   }
   .div13{
    float:left;
    width:70px;
    height:60px;
    border:1px solid #ccc;
    background-color: ghostwhite;
    margin-left:8px;
    text-align:center;
    font-size:30px;
    color:deepskyblue;
    border-radius:5px;
    cursor:default;
    padding-top:10px;
    box-shadow:4px 3px 3px #CCCCCC;
    }
   .div133{width:160px;}
   .top{margin-top:10px;margin-left:10px;} 
   .color{color:black;}
   .top1{margin-top:20px;margin-left:10px;}
   .top2{margin-top:30px;margin-left:10px;}
   .top3{margin-top:40px ;margin-left:10px;}
   .div23{float:left;}
   .div33{float:left;}
  </style>
 </head>
 <body>
  <div id="div1">
   <div class="div2" id="input"><b>0</b></div>
   <div class="div3">
    <div class="div13" onclick="w(' ')"><b>C</b></div>
    <div class="div13"onclick="w('opposite')"><b>+/-</b></div>
    <div class="div13" onclick="w('percent')"><b>%</b></div>
    <div class="div13 div133" onclick="w('backspace')"><b>←</b></div>
   </div>
    <div class="div3">
     <div class="div13 top color" onclick="a('7')"><b>7</b></div>
     <div class="div13 top color" onclick="a('8')"><b>8</b></div>
     <div class="div13 top color" onclick="a('9')"><b>9</b></div>
     <div class="div13 top " onclick="a('+')"><b>+</b></div>
     <div class="div13 top " onclick="a('-')"><b>-</b></div>
     
    </div>
    <div class="div3">
     <div class="div13 top1 color" onclick="a('4')"><b>4</b></div>
     <div class="div13 top1 color"onclick="a('5')"><b>5</b></div>
     <div class="div13 top1 color" onclick="a('6')"><b>6</b></div>
     <div class="div13 top1" onclick="a('*')"><b>×</b></div>
     <div class="div13 top1" onclick="a('/')"><b>÷</b></div>
     </div>
     <div class="div3">
     <div class="div13 top2 color" onclick="a('1')"><b>1</b></div>
     <div class="div13 top2 color" onclick="a('2')"><b>2</b></div>
     <div class="div13 top2 color"onclick="a('3')"><b>3</b></div>
     <div class="div13 top2"onclick="w('pow')"><b>x<sup>2</sup></b></div>
     <div class="div13 top2" onclick="w('sqrt')"><b>√</b></div>
     </div>
     <div class="div3">
      <div class="div13 top3 color" onclick="a('0')"><b>0</b></div>
      <div class="div13 top3"onclick="a('.')"><b>.</b></div>
      <div class="div13 top3"onclick="e('=')"><b>=</b></div>
     </div>
     
     </div>
    <script>
     input=document.getElementById("input");
    s="";
     function a(v)
     {
     s=s+v;
     input.innerHTML=s; 
     }
    function e(v)
     {
     input.innerHTML=eval(s);
     }
    
    function w(type)
     { 
     switch(type)
     { case ' ':s='';break;
      case 'opposite':s=-s;break;
      case 'percent':s=s/100;break;
      case 'pow':s=Math.pow(s,2);break;
      case 'sqrt':s=Math.sqrt(s);break;
      case 'backspace':s=s.substr(s,s.length-1);// case  'backspace':s=s.substring(0,s.length-1);
      }
      input.innerHTML=s; 
      } 
      
     
     
   
     
     
     
    </script>
   
   
   
  
 </body>
</html>

这里我本来是采用的substring这个函数的,但是在计算的时候,当只留下一个值的时候,按←的时候就不起作用,但是把substring改成substr的时候就能清除的了,原因我觉得应该是这样:s=s.substring(s,s.length-1);当只剩下一个值的时候,假设s值为7,substring中的第一个参数为是,表示中国字符串的首地址,就是0,第二个参数为0,怎么取,但是换成这样是可以的s=s.substring(0,s.length-1);,但是用s=s.substr(s,s.length-1);当只剩下一个值的时候是可以清除掉的,我想应该是当第二个参数是取得个数为0的时候,就把空字符串赋给s了吧。

以上就是JS制作简易计算器的实例代码的详细内容,更多关于JS制作简易计算器的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 #Javascript
JavaScript DOM常用操作代码汇总
Jul 03 #Javascript
JavaScript缺少insertAfter解决方案
Jul 03 #Javascript
原生javascript如何实现共享onload事件
Jul 03 #Javascript
Vue如何实现监听组件原生事件
Jul 03 #Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 #Javascript
JavaScrip如果基于url实现图片下载
Jul 03 #Javascript
You might like
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php-msf源码详解
2017/12/25 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python字符类型的一些方法小结
2016/05/16 Python
对python3新增的byte类型详解
2018/12/04 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
保安员岗位职责
2013/11/17 职场文书
小学英语教学反思
2014/01/30 职场文书
幼儿园家长寄语
2014/04/02 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
asyncio异步编程之Task对象详解
2022/03/13 Python