用js简单实现计算器功能

我用的是比较蠢的一种方式,基本用到的就是Math一些相关方法/属性 和简单的函数,完整代码如下:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>    
            function inputEvent(e){
               var val=e.innerHTML;
               var xsval=document.getElementById("i1");
               xsval.value+=val; }
+
            function inputresult(){
               var xsval=document.getElementById("i1");
               xsval.value=eval(document.getElementById("i1").value);}
                        
            function clearNum(){
               var xsval=document.getElementById("i1");
               xsval.value="";
               document.getElementById("i1").focus();}
            
            function sinEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.sin(document.getElementById("i1").value); }
            
            function cosEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.cos(document.getElementById("i1").value); }
            
            function asinEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.asin(document.getElementById("i1").value); }
            
            function acosEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.acos(document.getElementById("i1").value); }
            
            function tanEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.tan(document.getElementById("i1").value); }
            
            function atanEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.atan(document.getElementById("i1").value); }
            
            function logEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.log(document.getElementById("i1").value); }
            
            function expEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.exp(document.getElementById("i1").value); }
            
            function sprtEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.sprt(document.getElementById("i1").value); }
            
            function powEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.pow(document.getElementById("i1").value),-1;}
            
            function PIEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.PI;}
            
            function EEvent(){
            var xsval=document.getElementById("i1");
               xsval.value=Math.E;}
        </script>
    </head>
    <body>
        <table border="1px" >
            <tr>
                <td colspan="7"style="text-align: center;">javascript计算器</td>
            </tr>
            <tr>
                <td colspan="7"> <input id="i1" style="width: 250px;"; type="text" value=""/>  </td>
            </tr>
            <tr>
                <td><button οnclick="sinEvent()" >sin</button></td>
                <td><button οnclick="cosEvent()" >cos</button></td>
                <td><button οnclick="inputEvent(this)" >1</button></td>
                <td><button οnclick="inputEvent(this)" >2</button></td>
                <td><button οnclick="inputEvent(this)" >3</button></td>
                <td><button οnclick="inputEvent(this)" >+</button></td>
            </tr>
            <tr>
                <td><button οnclick="asinEvent()" >asin</button></td>
                <td><button οnclick="acosEvent()" >acos</button></td>
                <td><button οnclick="inputEvent(this)" >4</button></td>
                <td><button οnclick="inputEvent(this)" >5</button></td>
                <td><button οnclick="inputEvent(this)" >6</button></td>
                <td><button οnclick="inputEvent(this)" >-</button></td>
            </tr>
            <tr>
                <td><button οnclick="tanEvent()" >tan</button></td>
                <td><button οnclick="atanEvent()" >atan</button></td>
                <td><button οnclick="inputEvent(this)" >7</button></td>
                <td><button οnclick="inputEvent(this)" >8</button></td>
                <td><button οnclick="inputEvent(this)" >9</button></td>
                <td><button οnclick="inputEvent(this)" >*</button></td>
            </tr>
            <tr>
                <td><button οnclick="logEvent()" >log</button></td>
                <td><button οnclick="expEvent()" >exp</button></td>
                <td><button οnclick="inputEvent(this)" >0</button></td>
                <td><button οnclick="inputEvent(this)" >.</button></td>
                <td><button οnclick="inputresult(this)" >=</button></td>
                <td><button οnclick="inputEvent(this)" >/</button></td>
            </tr>
            <tr>
                <td><button οnclick="sprtEvent()" >sprt</button></td>
                <td><button οnclick="powEvent()" >1/x</button></td>
                <td><button οnclick="PIEvent()" >PI</button></td>
                <td><button οnclick="EEvent()" >E</button></td>
                <td colspan="2"><button  οnclick="clearNum()" >清除</button></td>
            </tr>
        </table>
    </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用 JavaScript 实现基本计算器功能的示例代码: ```html <!DOCTYPE html> <html> <head> <title>JavaScript Calculator</title> <style type="text/css"> body { font-family: Arial, sans-serif; font-size: 16px; background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; } #calculator { margin: 50px auto; width: 300px; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px #ccc; } input[type=text] { width: 100%; height: 40px; margin-bottom: 10px; padding: 10px; font-size: 18px; border: 1px solid #ccc; border-radius: 5px; box-shadow: none; outline: none; text-align: right; } input[type=button] { width: 25%; height: 40px; margin: 5px; font-size: 18px; border: none; border-radius: 5px; box-shadow: none; outline: none; cursor: pointer; background-color: #4CAF50; color: #fff; } input[type=button]:hover { background-color: #3e8e41; } input[type=button]:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <h1>JavaScript Calculator</h1> <div id="calculator"> <input type="text" id="result" value=""> <input type="button" value="1" onclick="addToResult('1')"> <input type="button" value="2" onclick="addToResult('2')"> <input type="button" value="3" onclick="addToResult('3')"> <input type="button" value="+" onclick="addToResult('+')"> <br> <input type="button" value="4" onclick="addToResult('4')"> <input type="button" value="5" onclick="addToResult('5')"> <input type="button" value="6" onclick="addToResult('6')"> <input type="button" value="-" onclick="addToResult('-')"> <br> <input type="button" value="7" onclick="addToResult('7')"> <input type="button" value="8" onclick="addToResult('8')"> <input type="button" value="9" onclick="addToResult('9')"> <input type="button" value="*" onclick="addToResult('*')"> <br> <input type="button" value="0" onclick="addToResult('0')"> <input type="button" value="." onclick="addToResult('.')"> <input type="button" value="C" onclick="clearResult()"> <input type="button" value="/" onclick="addToResult('/')"> <br> <input type="button" value="=" onclick="calculateResult()"> </div> <script type="text/javascript"> function addToResult(value) { document.getElementById('result').value += value; } function clearResult() { document.getElementById('result').value = ''; } function calculateResult() { var result = eval(document.getElementById('result').value); document.getElementById('result').value = result; } </script> </body> </html> ``` 以上代码实现了基本的加、减、乘、除四则运算,以及清空和计算结果的功能。你可以将代码保存为一个 HTML 文件并在浏览器中打开,即可看到一个简单计算器界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值