HTML 简易计算器(界面类似手机上的计算器),能实现简单的加减乘除运算和退格清除功能(不看小心后悔!)

拿走请三连,并注明出处

新手上路,看到的大佬请多指教!

代码介绍:能实现简单的加减乘除运算和清除退格功能,界面友好,类似手机上的计算器界面

 

    

        

        简易计算器

        

            *{

                margin: auto;

                padding: 0px;

                text-align: center;

                font-family: "微软雅黑";

            }

            .content{

                border-radius: 10%;

                width: 400px;

                height: 550px;

                background-color: rgb(133, 180, 252);          /*背景设置*/

            }

            .clear{

                border-radius: 50%;

                width: 20%;

                height: 72px;

                background-color: #ece0f5;

            }

            .back{

                border-radius: 50%;

                width: 20%;

                height: 72px;

                background-color: #f3e7f7;

            }

            #result{

                margin-top: 24px;

                font-size: 16px;

                width: 40%;

                height: 72px;

                text-align: left;

                border-radius: 20px;

                background-color: #FFE4C4;

            }

            .symbol{

                margin-top: 36px;

                font-size: xx-large;

                border-radius: 50%;

                width: 20%;

                height: 72px;

                background-color:rgb(170, 225, 247);

            }

            .number{

                margin-top: 36px;

                font-size: xx-large;

                border-radius: 50%;

                width: 20%;

                height: 72px;

                background-color:rgb(162, 238, 252);

            }

            .calculate{

                margin-top: 36px;

                font-size: xx-large;

                border-radius: 50%;

                width: 20%;

                height: 72px;

                background-color: #ffe09d;

            }

            .content input:hover{

                box-shadow: 5px 5px 5px #888888;

            }

            .content input:active{

                background-color: #fde783;

            }

        

        

            function clearValue(){

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

            }

            function get(value){

                document.getElementById("result").value+=value;

            }

           

            function calculate(){

                var result=0;

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

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

                document.getElementById("result").value=eval(result);

            };

 

            var flag=true; 

            function func(str){

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

            if(flag){

            //清除没有输入时的0

            result.value=""; 

            }

            //改变状态,不再清空内容

            flag=false; 

            //将之前的内容和输入的内容相加,重新显示

            result.value=result.value+str;

 

            }

            //回退一个数,相当于撤销

            function backspace(){

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

            result.value=result.value.substr(0,result.value.length-1);

            }

        

    

    

        

            

                简 易 计 算 器

            

        

            

        

            

            

            

            

 

                

            

            

            

            

                

            

            

            

            

                

            

            

            

            

                

            

            

            

            

        

            

    

HTML 简易计算器(界面类似手机上的计算器),能实现简单的加减乘除运算和退格清除功能(不看小心后悔!)_第1张图片

 

 

你可能感兴趣的:(前端源代码,css,html)