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 检测浏览器和操作系统的脚本
Dec 26 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
js常用正则表达式集锦
May 17 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 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网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP count()函数讲解
2019/02/03 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python文件和流(实例讲解)
2017/09/12 Python
简述Python2与Python3的不同点
2018/01/21 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python中请不要再用re.compile了
2019/06/30 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python过滤序列元素的方法
2020/07/31 Python
python如何对链表操作
2020/10/10 Python
python爬虫基础之urllib的使用
2020/12/31 Python
python 装饰器重要在哪
2021/02/14 Python
电信营业员自我评价分享
2014/01/17 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
英语教研活动总结
2014/07/02 职场文书
Python+Appium新手教程
2021/04/17 Python