html5中写一个计算器用html写一个计算器网页

转载

小咪咪 2023-07-26 11:44:43

文章标签 html5中写一个计算器 css javascript 字符串 文章分类 HTML5 移动开发

使用HTML+CSS+javascript实现简易计算器

奉上在javascript学习期间写的小程序（简易计算机）

一、先上图：

html5中写一个计算器用html写一个计算器网页_css

二、实现过程：

1.页面结构如下：

<body>
        <div id="sDiv">
            <div id="show"><div id="showme"></div></div>
            <input type="text" id="result" readOnly="true" value="0"><br>

            <input type="button" onclick="s('0')" id="res"  class="btncss" value="C">
            <input type="button" onclick="operator('backspace')" id="del" class="btncss" value="<-">
            <input type="button" onclick="operator('pow')" class="btncss" value="x^2">
            <input type="button" onclick="a('*')" class="btncss" value="*"><br>

            <input type="button" onclick="a('7')"class="btncss" value="7">
            <input type="button" onclick="a('8')"class="btncss" value="8">
            <input type="button" onclick="a('9')"class="btncss" value="9">
            <input type="button" onclick="a('/')"class="btncss" value="/"><br>

            <input type="button" onclick="a('4')"class="btncss" value="4">
            <input type="button" onclick="a('5')"class="btncss" value="5">
            <input type="button" onclick="a('6')"class="btncss" value="6">
            <input type="button" onclick="a('+')"class="btncss" value="+"><br>

            <input type="button" onclick="a('1')"class="btncss" value="1">   
            <input type="button" onclick="a('2')"class="btncss" value="2">
            <input type="button" onclick="a('3')"class="btncss" value="3">
            <input type="button" onclick="a('-')"class="btncss" value="-"><br>

            <input type="button" onclick="operator('percent')"class="btncss" value="%">
            <input type="button" onclick="a('0')"class="btncss" value="0">
            <input type="button" onclick="a('.')"class="btncss" value=".">
            <input type="button" onclick="e()"class="btncss" value="="><br>  

        </div>
       
    </body>

2.结合css代码：

<style type="text/css">   
        #sDiv{
            height: 500px;       /*计算机面板长宽*/
            width: 400px;		
            background: #f7f6f6;	/*计算机面板背景颜色*/
            margin:20px auto;		/*计算机位置*/
            padding: 10px;		
            text-align: center;			
            align-content: center;
            border: 1px solid #c6c4c4;
            border-radius: 6px;		/*计算机面板设置圆角*/
        }
        #show{
            margin: 0 auto;
            height: 100px;
            width: 342px;
            padding: 6px;
            overflow:hidden;
            background: #FFFFFF;
            border: 1px solid #c6c4c4;
            /* border-bottom: 1px solid #000000; */
            border-bottom: 0;
            border-radius: 6px 6px 0 0;
            color: #000000;
            text-align: right;
        }
        /* 计算结果框 */
        #result{
            height: 40px;
            width: 350px;
            text-align: right;
            margin-top: 1px;
            font-size: 24px;
            font-weight: bold;
            color: #000000;
            font-family:"微软雅黑";
            border: 1px solid #c6c4c4;
            border-radius: 0 0 6px 6px;
        }
        /* 按钮通用样式 */
        .btncss{
            height: 50px;
            width: 70px;
            margin-top: 15px;
            margin-left: 5px;
            margin-right: 5px;
            background: #e7e7e7;
            border: 1px solid #cbc9c9;
            font-size: 24px;
            border-radius: 6px;
        }
        
     </style>

3.js代码：

<script type="text/javascript" defer="defer"> 
       window.onload=function(){		
           input = document.getElementById("result");	//获取计算机结果输出框的元素
           show = document.getElementById("showme");
           var isres = 0; //标志，用户判断是否已经进行过计算       
       }       

        function s(v){          //该函数主要用于清零键，或者输出特定内容
            input.value = v;
        }

        function a(v){		//该函数主要用于输入各种数字时，显示在结果框上
            var patrn  = /^[0-9]*$/;    //正则表达式，用于匹配纯数字
            
            if(!patrn.test(v)){        
                isres=0;
            }
            if(isres == 1 && patrn.test(v)){ //如果已经进行过计算，并且又重新输入了数字，则自动清零结果框，方便再次输入。
                input.value = v;
                isres = 0;
            }else if(input.value == "0" && patrn.test(v)){ //如果结果框为0，并且输入的值不是数字（输入的值是运算符），则直接表示（比如 0+运算符+数字）
                input.value = v;
            }else{
                input.value += v;
            }

        }

        function e(){		//该函数主要由“=”按钮调用，实现结果的计算，以及控制历史记录只显示4条。
            var t;
            isres =1;
             try{	
                if(show.offsetHeight>80){
                    t = show.innerHTML.indexOf('=<br>'); //查找该字符串第一次出现的位置   
                    var str = show.innerHTML;
                    str = str.substr(t+5,str.length); //保留该字符串之后的内容
                    show.innerHTML = str;
                }
                    show.innerHTML += input.value+'=<br>';
                    s(eval（input.value))
             }catch(e){
                    s('Error')
             }
        }

        function operator(type){ //该函数主要有操作符按钮调用（回退操作、平方操作、%操作）
            switch(type){
                case "backspace":
                    var str = input.value;
                    str = (str !="0") ? str : "";
                    str = str.substr(0,str.length-1);
                    str = (str != "") ? str :"0";
                    input.value = str;
                    break;
                case "pow":                 
                    input.value=Math.pow(input.value,2);
                    break;
                case "percent":           
                    input.value = input.value/100;
                    break;
            }
        }

      </script>