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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
js实现下一页页码效果
Mar 07 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
一篇不错的PHP基础学习笔记
2007/03/18 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
各种快递查询--Api接口
2016/04/26 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
分析python请求数据
2018/08/19 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS