网络编程

简单快速的实现js计算器功能
网络编程 2025/1/14 佚名
3 2

在js的全局方法中有一个eval()方法，由于平时不怎么用，所以到关键时候就没想起来它

想写一个简易的计算器，本来以为要不了多久就能写出来的，谁知道愣是花费了我近两个小时的时间来写，但结果还是不能令我满意。想找一个更好的方法来写，不想写的那么麻烦，用什么方法呢？想了一个遍，后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了，对啊，我浪费了这么长时间写出来的东西还不能令我满意，一个eval()不就搞定了么，下面就给大家看一下我写的代码，写的很粗糙，还请大家多多指正。

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style type="text/css"> 
  .box{ 
  width: 400px; 
  height: 450px; 
  margin: 0 auto; 
  background: pink; 
  } 
  .show{ 
  width:100%; 
  height: 100px; 
  line-height: 100px; 
  text-align: right; 
  background: #FFFFFF; 
  border:1px solid #000; 
  } 
  .operate{ 
  width: 100%; 
  height: 250px; 
  margin-top: 50px; 
  } 
  p{ 
  margin-top: 20px; 
  text-align: center; 
  } 
  input{ 
  width: 80px; 
  height: 40px; 
  /*margin-left: 50px;*/ 
  text-align: center; 
  } 
  input:nth-child(5n),input:first-child{ 
  margin-left: 0; 
  } 
 </style> 
 </head> 
 <body> 
 <div class="box"> 
  <div class="show" id="show"></div> 
  <div class="operate"> 
  <p> 
   <input type="button" name="one" id="one" value="1" onclick="num(1)"/> 
   <input type="button" name="two" id="two" value="2" onclick="num(2)"/> 
   <input type="button" name="three" id="three" value="3" onclick="num(3)"/> 
   <input type="button" name="plus" id="plus" value="+" onclick="num('+')"/> 
  </p> 
  <p> 
   <input type="button" name="four" id="four" value="4" onclick="num(4)"/> 
   <input type="button" name="five" id="five" value="5" onclick="num(5)"/> 
   <input type="button" name="six" id="six" value="6" onclick="num(6)"/> 
   <input type="button" name="reduce" id="reduce" value="-" onclick="num('-')"/> 
  </p> 
  <p> 
   <input type="button" name="seven" id="seven" value="7" onclick="num(7)"/> 
   <input type="button" name="eight" id="eight" value="8" onclick="num(8)"/> 
   <input type="button" name="nine" id="nine" value="9" onclick="num(9)"/> 
   <input type="button" name="times" id="times" value="x" onclick="num('*')"/> 
  </p> 
  <p> 
   <input type="button" name="divide" id="divide" value="/" onclick="num(/)"/> 
   <input type="button" name="zero" id="zero" value="0" onclick="num(0)"/> 
   <input type="button" name="equal" id="equal" value="=" onclick="equal()"/> 
   <input type="button" name="mod" id="mod" value="%" onclick="num('%')"/> 
  </p> 
  </div> 
   
 </div> 
 </body> 
 <script type="text/javascript"> 
 function num(figure){ 
//  var figure = figure.toString(); 
  var show = document.getElementById("show"); 
  showNum = show.innerHTML+figure; 
  show.innerHTML = showNum; 
 } 
 function equal(){ 
  document.getElementById("show").innerHTML = eval(document.getElementById("show").innerHTML); 
  /*var lal = document.getElementById("show").innerHTML; 
  alert(lal);*/ 
 } 
 </script> 
</html>

关于计算器的精彩文章请查看《计算器专题》 ，更多精彩等你来发现！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
js,计算器
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“简单快速的实现js计算器功能”

暂无“简单快速的实现js计算器功能”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/1/14

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com