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 Array对象基础知识小结
Nov 16 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JavaScript简介
Feb 15 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
基于原生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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python实现简易动态时钟
2018/11/19 Python
关于Python作用域自学总结
2019/06/10 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
小学生家长评语大全
2014/02/10 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
委托书如何写
2014/08/30 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2016公司新年问候语
2015/11/11 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
公历12个月名称的由来
2022/04/12 杂记
从原生JavaScript到React深入理解
2022/07/23 Javascript