JavaScript实现简易加法计算器

这篇文章主要介绍了JavaScript实现简易加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

具体要求：

JavaScript实现简易加法计算器

1.页面布局:
2.还需要在点击计算按钮之后在页面上显示计算结果

具体实现：

				?

									<html>

									  <head>

									    <meta charset="utf-8">

									    <title>计算器</title>

									    <script>

									      function myck(type){

									        var num1 = document.getElementById("num1");

									        var num2 = document.getElementById("num2");

									        if(type==1){

									          // 计算操作

									          var result = parseInt(num1.value) + parseInt(num2.value);

									          alert(result);

									          document.getElementById("resultDiv").innerText ="最终计算结果："+

									            result;

									        }else if(type==2){

									          if(confirm("是否正确清空？")){

									            // 清空

									            num1.value = "";

									            num2.value = "";

									            document.getElementById("resultDiv").innerText="";

									          }

									        }

									      }

									    </script>

									  </head>

									  <body>

									    <div style="margin-top: 100px;margin-left: 500px;">

									      <span style="font-size: 60px;">加法计算器</span>   

									    </div>

									    <div>

									      <div class="innerDiv" style="margin-left: 550px;">

									        数字1：<input id="num1" type="number" placeholder="请输入数字1"> 

									      </div>

									    </div>

									    <div>

									      <div class="innerDiv" style="margin-left: 550px;">

									      数字2：<input id="num2" type="number" placeholder="请输入数字2">

									     </div> 

									    </div>

									    <div>

									      <div style="margin-left: 600px;" class="innerDiv">

									        <input type="button" onclick="myck(1)" value="计 算">

									        <input type="button" onclick="myck(2)" value="清 空">

									      </div> 

									    </div>

									    <div id="resultDiv">

									    </div>

									  </body>

									  <style>

									    .innerDiv{

									      margin-left: 420px;

									      margin-top: 20px;

									    }

									  </style>

									</html>