Html+css+javaScript写一个手机模型版的简易计算器,求大家指导

       我只是一个计算机专业的大一小白,大家路过求不要喷呀,不过写的不好的地方欢迎大家指导。

首先是Html部分

 简易计算器

 

 

     

         

         

     

     

         

简易计算器

     

     

         


         

             

输入第一个数:

                 

             

         

         


         

             

输入第二个数:

                 

             

         

         


         

             

选择运算符号:

                 

                 

                 

                 

             

         

         


         

             

最终运算结果:

                 

             

         

         


     

     

         

         

             

         

         

     

 

 

然后是javaScript部分

function mycount(arise){

 var n1=Number(document.getElementById("number1").value);

    

 var n2=Number(document.getElementById("number2").value);

 

 var answer="";

 

 switch(arise){

    case"+":

    answer=n1+n2;break;

    case"-":

    answer=n1-n2;break;

    case"*":

    answer=n1*n2;break;

    case"/":

    answer=n1/n2;break;

    }

 

 document.getElementById("answer").value=answer;

        

}

最后是css代码修饰一下

.jisuan-box{

 width: 290px;

 height: 631px;

 border: 6px solid black;

 border-radius: 50px;

 margin:0px auto;

}

.head-box{

 width: 100px;

 height: 30px;

 margin-left: 90px;

 margin-top: 10px;

}

.head-circle1{

 width: 20px;

 height: 20px;

 background-color: black;

 border: 1px solid black;

 border-radius: 50%;

 float: left;

}

.head-length{

 width: 100px;

 height: 20px;

 background-color: black;

 border: 1px solid black;

 border-radius: 50px;

 margin-left: 30px;

}

.Title{

 text-align: center;

}

.count-box{

 width: 280px;

 height: 298px;

 border: 5px solid white;

}

.inPut{

 width:30px;

 height:30px;

 border-radius: 50%;

 margin: 1px;

}

.enter{

    width:130px;

    height:35px;

    border-radius:50px;

    font-size:25px;

    text-align:center;

}

hr{

 width: 100%;

}

.bottom-box{

 width: 260px;

 height: 30px;

}

.bottom-circle{

 width: 55px;

 height: 55px;

 border: 1px solid black;

 border-radius: 50%;

 margin-left:115px;

 margin-top: 136px;

}

最后的结果就是下图这样

Html+css+javaScript写一个手机模型版的简易计算器,求大家指导_第1张图片

        输入第一个数和第二个数后,再选择运算符,即可在最终运算结果中显示答案。

       底部的home键单纯是做一个摆设,如果有大家可以添加功能,比如清空输入的数字及答案这种,还请大家教教我怎么实现,头都想秃了已经。

你可能感兴趣的:(html,css,javascript)