一个基于JavaScript的简单网页计算器

时间：2022-12-29 15:58:51

一个基于JavaScript的简单网页计算器，真的很简单。

效果如下：

一个基于JavaScript的简单网页计算器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>A simple Calculator</title>
    <style type="text/css">
        .number{
            margin-left: 30px;
            width:90px;
            height:50px;
            background-color:darkgrey;
            margin-top: 10px;
            padding-left: 5px;
        }
        .text{
            margin-left: 30px;
            width: 460px;
            height: 40px;
            float: none;
            margin-top: 20px;
        }
    </style>

    <script type="text/javascript">
        var num = 0;  // 定义第一个输入的数据
        function jsq(num) {
            //获取当前输入
            if(num=="%"){
                document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100;
            }else{
                document.getElementById('screenName').value += document.getElementById(num).value;
            }
        }
        function denghao() {
            //计算输入结果
            document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
        }
        function clearNum() {
            //清0
            document.getElementById("screenName").value = null;
            document.getElementById("screenName").focus();
        }
        function tuiGe() {
            //退格
            var arr = document.getElementById("screenName");
            arr.value = arr.value.substring(0, arr.value.length - 1);
        }

        function back() {
            //退格
            var arr = document.getElementById("screenName");
            arr.value = arr.value.substring(0, arr.value.length - 1);
        }

    </script>
</head>
<body>
    <input class="text" type="text" id="screenName" name="screenName" value="0" /><br/>一个基于JavaScript的简单网页计算器
    <input class="number" onclick="jsq(this.id)"  type="button" id="btn1" name="number" value="1" />    <input class="number" onclick="jsq(this.id)"   type="button" id="btn2" name="number" value="2" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn3" name="number" value="3" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn_jia" name="number" value="+" />    <br/>    <input class="number" onclick="jsq(this.id)"  type="button" id="btn4" name="number" value="4" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn5" name="number" value="5" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn6" name="number" value="6" />    <input class="number"  onclick="jsq(this.id)" type="button" id="btn_jian" name="number" value="-" />    <br/>    <input class="number" onclick="jsq(this.id)"  type="button" id="btn7" name="number" value="7" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn8" name="number" value="8" />    <input class="number"  onclick="jsq(this.id)" type="button" id="btn9" name="number" value="9" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn_cheng" name="number" value="*" />    <br/>    <input class="number" onclick="jsq(this.id)"  type="button" id="btn0" name="number" value="0" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn_xiaoshudian" name="number" value="." />    <input class="number" onclick="denghao()"  type="button" id="btn_denghao" name="number" value="=" />    <input class="number" onclick="jsq(this.id)"  type="button" id="btn_chu" name="number" value="/" />    <input class="number" onclick="back()"  type="button" id="back" name="number" value="Backspace" /></body></html>

标签：

相关文章