用javascript制作二位数的网页计算器

script部分

		function add(clickNum){
            document.getElementById("screen").value += clickNum.value;
        }/*向屏幕增加数据*/

        function getResult(){
            var str = document.getElementById("screen").value;
            var ope,num1,num2;
            if((ope = str.indexOf("+"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 + num2;
            }else if((ope = str.indexOf("-"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 - num2;
            }else if((ope = str.indexOf("*"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 * num2;
            }else if((ope = str.indexOf("/"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 / num2;
            }
        }/*根据符号进行判断计算*/
        function clears(){
            document.getElementById("screen").value = "";
        }/*清除函数*/

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页计算器</title>
    <style type="text/css">
        table input{
            width:50px;
            height:50px;
        }/*设置按钮格式*/
        #screen{
            width:150px;
            height:45px;
        }/*设置屏幕格式*/
        table {
            border:1px solid #d0d0d0;
        }
    </style>
    <script type="text/javascript">
        function add(clickNum){
            document.getElementById("screen").value += clickNum.value;
        }/*向屏幕增加数据*/

        function getResult(){
            var str = document.getElementById("screen").value;
            var ope,num1,num2;
            if((ope = str.indexOf("+"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 + num2;
            }else if((ope = str.indexOf("-"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 - num2;
            }else if((ope = str.indexOf("*"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 * num2;
            }else if((ope = str.indexOf("/"))!=-1){
                num1 = parseFloat(str.substring(0,ope));
                num2 = parseFloat(str.substring(ope+1));
                document.getElementById("screen").value = num1 / num2;
            }
        }/*根据符号进行判断计算*/
        function clears(){
            document.getElementById("screen").value = "";
        }/*清除函数*/
    </script>
</head>
<body>
<table>
    <tr>
        <th colspan="3"><input type="text" id="screen"/></th>
        <th><input type="button" value="C" onclick="clears()"/></th>
    </tr>
    <tr>
        <th><input type="button" value="7" onclick="add(this)"/></th>
        <th><input type="button" value="8" onclick="add(this)"/></th>
        <th><input type="button" value="9" onclick="add(this)"/></th>
        <th><input type="button" value="/" onclick="add(this)"/></th>
    </tr>
    <tr>
        <th><input type="button" value="4" onclick="add(this)"/></th>
        <th><input type="button" value="5" onclick="add(this)"/></th>
        <th><input type="button" value="6" onclick="add(this)"/></th>
        <th><input type="button" value="*" onclick="add(this)"/></th>
    </tr>
    <tr>
        <th><input type="button" value="1" onclick="add(this)"/></th>
        <th><input type="button" value="2" onclick="add(this)"/></th>
        <th><input type="button" value="3" onclick="add(this)"/></th>
        <th><input type="button" value="-" onclick="add(this)"/></th>
    </tr>
    <tr>
        <th><input type="button" value="0" onclick="add(this)"/></th>
        <th><input type="button" value="." onclick="add(this)"/></th>
        <th><input type="button" value="=" onclick="getResult()"/></th>
        <th><input type="button" value="+" onclick="add(this)"/></th>
    </tr>
</table>
</body>
</html>

效果
在这里插入图片描述

除了JS计算器，在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，点击此处免费获取，小白勿进哦

用javascript制作二位数的网页计算器

猜你喜欢