JavaScript实现网页计算器功能-偶像资源网

本文实例为大家分享了JavaScript实现网页计算器的具体代码，供大家参考，具体内容如下

要求：在网页上实现简单的计算器功能和界面

CSS样式代码：

<style>
 * {
 margin: 0;
 padding: 0;
 }
 #panel {
 width: 202px;
 height: 252px;
 margin: 30px auto;
 border: 3px solid #ccc;
 }
 #screen {
 width: 134px;
 height: 40px;
 margin: 5px;
 display: inline-block;
 border: 1px solid #ddd;
 line-height: 40px;
 padding-left: 3px;
 padding-right: 3px;
 text-align: right;
 }
 input[type=\"button\"] {
 width: 40px;
 height: 40px;
 border: 1px solid #ddd;
 margin: 5px;
 font-family: \"微软雅黑\";
 font-size: 18px;
 font-weight: bold;
 }
 #panel div, p, input {
 float: left;
 }
</style>

JavaScript代码：

<script>
 window.onload = function(){
  //获取计算器面板
  var panel = document.getElementById(\"panel\");
  //为计算面板动态添加单击事件
  panel.onclick = function(e) {
   //参数e用来接收event对象
   //获取所有input元素
   var inputs = e.toElement;
   //获取P元素
   var screen = document.getElementById(\"screen\");
   if(inputs.type == \"button\") {
    //如果获取到的是input元素，则开始执行运算逻辑
    if (inputs.value == \"C\") {
     screen.innerHTML = \"\";
    } else if (inputs.value == \"=\") {
     try {
      screen.innerHTML = eval(screen.innerHTML);
     } catch (ex) {
      screen.innerHTML = \"Error\";
     }
    } else {
     screen.innerHTML += inputs.value;
    }
   } else {
    //如果单击的地方不是input元素，则程序不回应
    return;
   }
  }
 }
</script>

HTML代码：

<body>
 <div id=\"panel\">
  <div>
   <p id=\"screen\"></p>
   <input type=\"button\" value=\"C\" />
  </div>
  <div>
   <input type=\"button\" value=\"7\" />
   <input type=\"button\" value=\"8\" />
   <input type=\"button\" value=\"9\" />
   <input type=\"button\" value=\"/\" />
   <input type=\"button\" value=\"4\" />
   <input type=\"button\" value=\"5\" />
   <input type=\"button\" value=\"6\" />
   <input type=\"button\" value=\"*\" />
   <input type=\"button\" value=\"1\" />
   <input type=\"button\" value=\"2\" />
   <input type=\"button\" value=\"3\" />
   <input type=\"button\" value=\"+\" />
   <input type=\"button\" value=\".\" />
   <input type=\"button\" value=\"0\" />
   <input type=\"button\" value=\"-\" />
   <input type=\"button\" value=\"=\" />
  </div>
 </div>
</body>

效果图：

更多计算器功能实现，请点击专题：计算器功能汇总进行学习

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JavaScript实现网页计算器功能

请登录后发表评论