运用JavaScript写的HTML计算器

最新推荐文章于 2022-02-14 21:16:10 发布

٩(⁎ ́ი ̀⁎)۶:.✧

最新推荐文章于 2022-02-14 21:16:10 发布

阅读量531

点赞数

分类专栏： JavaScript web HTML 文章标签： JavaScript 计算器键盘按键 HTML

本文链接：https://blog.csdn.net/qq_26069551/article/details/103039461

版权

JavaScript 同时被 3 个专栏收录

34 篇文章 1 订阅

订阅专栏

web

21 篇文章 7 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

HTML计算器

代码完整，运用 eval()函数进行计算

计算器的特色是可以使用小键盘输入数字，逻辑结构简单。

使用说明：

使用小键盘或者鼠标点击按钮进行输入，

按空格键计算结果并显示数学算式，

按回车只显示结果集，但是可以多次计算，

按键盘C键清空。

查看演示：http://39.105.0.128:45/chapter_3/text_3.2.html

使用效果图：

按下空格后：

按字母C键清零，按下回车键可以连续计算，如果需要连续计算，按回车键。

按空格只能进行一次计算。

按回车进行计算，可以进行连续计算。

代码部分：

<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<script type="text/javascript">
function sum(x){
try{
if (x == "=" || x == "↵") {
var str = document.getElementById('text').value;
var y=eval(str);
if(x == "↵"){
document.getElementById('text').value = y;
}else{
document.getElementById('text').value += "=";
document.getElementById('text').value += y;
}
}
else if (x == "C") {
document.getElementById('text').value = "";
}
else{
document.getElementById('text').value += x;
}
}catch(e){
alert("ERROR!");
}
}

window.document.onkeydown = disableRefresh;
function disableRefresh(evt){
evt = (evt) ? evt : window.event

if(evt.keyCode==96){
// console.log("你按了0键");
document.getElementById('text').value += 0;
}

if(evt.keyCode==97){
// console.log("你按了1键");
document.getElementById('text').value += 1;
}

if(evt.keyCode==98){
// console.log("你按了2键");
document.getElementById('text').value += 2;
}

if(evt.keyCode==99){
// console.log("你按了3键");
document.getElementById('text').value += 3;
}

if(evt.keyCode==100){
// console.log("你按了4键");
document.getElementById('text').value += 4;
}

if(evt.keyCode==101){
// console.log("你按了5键");
document.getElementById('text').value += 5;
}

if(evt.keyCode==102){
// console.log("你按了6键");
document.getElementById('text').value += 6;
}

if(evt.keyCode==103){
// console.log("你按了7键");
document.getElementById('text').value += 7;
}

if(evt.keyCode==104){
// console.log("你按了8键");
document.getElementById('text').value += 8;
}

if(evt.keyCode==105){
// console.log("你按了9键");
document.getElementById('text').value += 9;
}

if(evt.keyCode==106){
// console.log("你按了乘号");
document.getElementById('text').value += "*";
}

if(evt.keyCode==107){
// console.log("你按了加号");
document.getElementById('text').value += "+";
}

if(evt.keyCode==109){
// console.log("你按了减号");
document.getElementById('text').value += "-";
}

if(evt.keyCode==111){
// console.log("你按了除号");
document.getElementById('text').value += "/";
}

if(evt.keyCode==110){
// console.log("你按了点号");
document.getElementById('text').value += ".";
}

if(evt.keyCode==67){
// console.log("你按了C键");
document.getElementById('text').value = "";
}

if(evt.keyCode==32){
// console.log("你按了空格键");

try{
var str = document.getElementById('text').value;
var y=eval(str);
document.getElementById('text').value += "=";
document.getElementById('text').value += y;
}catch(e){
alert("ERROR!");
}

}

if(evt.keyCode==13){ // enter 键
//要做的事情
// console.log("你按了enter键");

try{
var str = document.getElementById('text').value;
var y=eval(str);
document.getElementById('text').value = y;
}catch(e){
alert("ERROR!");
}

}

</script>
</head>
<body>
<center>
<h3>计算器</h3>

代码片段：

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <script type="text/javascript">
    function sum(x){
        try{
            if (x == "=" || x == "↵") {
                var str = document.getElementById('text').value;
                var y=eval(str);
                    if(x == "↵"){
                        document.getElementById('text').value = y;
                    }else{
                        document.getElementById('text').value += "=";
                        document.getElementById('text').value += y;
                    }
            }
            else if (x == "C") {
                document.getElementById('text').value = "";
            }
            else{
                document.getElementById('text').value += x;
            }
        }catch(e){
           alert("ERROR!"); 
        }
    }





    window.document.onkeydown = disableRefresh;
        function disableRefresh(evt){
        evt = (evt) ? evt : window.event
            
             if(evt.keyCode==96){ 
                // console.log("你按了0键");
                document.getElementById('text').value += 0;
               }

              if(evt.keyCode==97){ 
                // console.log("你按了1键");
                document.getElementById('text').value += 1;
               }

              if(evt.keyCode==98){ 
                // console.log("你按了2键");
                document.getElementById('text').value += 2;
               }

              if(evt.keyCode==99){ 
                // console.log("你按了3键");
                document.getElementById('text').value += 3;
               }

              if(evt.keyCode==100){ 
                // console.log("你按了4键");
                document.getElementById('text').value += 4;
               }

              if(evt.keyCode==101){ 
                // console.log("你按了5键");
                document.getElementById('text').value += 5;
               }

              if(evt.keyCode==102){ 
                // console.log("你按了6键");
                document.getElementById('text').value += 6;
               }

              if(evt.keyCode==103){ 
                // console.log("你按了7键");
                document.getElementById('text').value += 7;
               }

              if(evt.keyCode==104){ 
                // console.log("你按了8键");
                document.getElementById('text').value += 8;
               }

              if(evt.keyCode==105){ 
                // console.log("你按了9键");
                document.getElementById('text').value += 9;
               }

              if(evt.keyCode==106){ 
                // console.log("你按了乘号");
                document.getElementById('text').value += "*";
               }

              if(evt.keyCode==107){ 
                // console.log("你按了加号");
                document.getElementById('text').value += "+";
               }

              if(evt.keyCode==109){ 
                // console.log("你按了减号");
                document.getElementById('text').value += "-";
               }

              if(evt.keyCode==111){ 
                // console.log("你按了除号");
                document.getElementById('text').value += "/";
              }

              if(evt.keyCode==110){ 
                // console.log("你按了点号");
                document.getElementById('text').value += ".";
               }

              if(evt.keyCode==67){ 
                // console.log("你按了C键");
                document.getElementById('text').value = "";
               }

              if(evt.keyCode==32){ 
                // console.log("你按了空格键");

                try{
                    var str = document.getElementById('text').value;
                    var y=eval(str);
                    document.getElementById('text').value += "=";
                    document.getElementById('text').value += y;
                }catch(e){
                    alert("ERROR!");
                }

               }

               if(evt.keyCode==13){ // enter 键
                 //要做的事情
                 // console.log("你按了enter键");

                 try{
                    var str = document.getElementById('text').value;
                    var y=eval(str);
                    document.getElementById('text').value = y;
                }catch(e){
                    alert("ERROR!");
                }

              }

    }





    </script>
</head>
<body>
    <center>
        <h3>计算器</h3>

        <input type="text" id="text"/><br><br>

        <input type="button" value="1" onClick="sum(this.value)"/> 
        <input type="button" value="2" onClick="sum(this.value)"/> 
        <input type="button" value="3" onClick="sum(this.value)"/>
        <input type="button" value="+" onClick="sum(this.value)"/><br>

        <input type="button" value="4" onClick="sum(this.value)"/> 
        <input type="button" value="5" onClick="sum(this.value)"/> 
        <input type="button" value="6" onClick="sum(this.value)"/>
        <input type="button" value="-" onClick="sum(this.value)"/><br>

        <input type="button" value="7" onClick="sum(this.value)"/> 
        <input type="button" value="8" onClick="sum(this.value)"/> 
        <input type="button" value="9" onClick="sum(this.value)"/>
        <input type="button" value="*" onClick="sum(this.value)"/><br>

        <input type="button" value="C" onClick="sum(this.value)"/> 
        <input type="button" value="0" onClick="sum(this.value)"/> 
        <input type="button" value="." onClick="sum(this.value)"/>
        <input type="button" value="/" onClick="sum(this.value)"/><br>

        <input type="button" value="(" onClick="sum(this.value)"/>  
        <input type="button" value=")" onClick="sum(this.value)"/> 
        <input type="button" value="=" onClick="sum(this.value)"/> 
        <input type="button" value="&crarr;" onClick="sum(this.value)"/> 
    </center>
</body>
</html>