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 >

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

原文链接：https://blog.csdn.net/m0_48355416/article/details/115277569

dy("nrwz");

查看更多关于JavaScript实现简易加法计算器的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did63671