JavaScript实现计算器功能

傷城~ 2022-02-15 08:15 256阅读 0赞

代码实现：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>js从入门到放弃</title>
    </head>
    <body>
    <input type="text" id="txt" />
    <select id="fuhao">
    	<option>+</option>
    	<option>-</option>
    	<option>*</option>
    	<option>/</option>
    </select>
    <input type="text" id="txt1" />
    <input type="button" value="=" onclick="return jisuan()" />
    <input type='text' id='txt2' >
    <script type="text/javascript">
    function jisuan()
    {
    	var txt=document.getElementById('txt').value;
    	var txt1=document.getElementById('txt1').value;
    	var txt2=document.getElementById('txt2');
    	var fuhao=document.getElementById('fuhao').value;
    	if(fuhao=='+')
    	{
    		var sum=parseInt(txt)+parseInt(txt1);
    		txt2.value=sum;
    	}
    	else if(fuhao=='-')
    	{
    		var sum=parseInt(txt)-parseInt(txt1);
    		txt2.value=sum;
    	}
    	else if(fuhao=='*')
    	{
    		var sum=parseInt(txt)*parseInt(txt1);
    		txt2.value=sum;
    	}
    	else
    	{
    		var sum=parseInt(txt)/parseInt(txt1);
    		txt2.value=sum;
    	}
    }
    </script>
    </body>
    </html>

简单方法：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>a.html</title>
    </head>
    <body>
    <script>
    function fun(){
    	var one=document.getElementById('one').value;
    	var two=document.getElementById('two').value;
    	var fuhao=document.getElementById('fuhao').value;
    	var sum=eval(one+fuhao+two);
    	document.getElementById('sum').value=sum;
    }
    </script>
    <input type="text" id='one' />
    <select id='fuhao'>
    	<option value='+'>＋</option>
    	<option value='-'>-</option>
    	<option value='*'>*</option>
    	<option value='/'>/</option>
    </select>
    <input type='text' id='two' />
    <input type='button' value='=' onclick='return fun()' />
    <input type='text' id='sum' />
    </body>
    </html>

实现效果：

![在这里插入图片描述][20190424101518968.png]

原文：[https://blog.csdn.net/qq\_42249896/article/details/82227426][https_blog.csdn.net_qq_42249896_article_details_82227426]

[20190424101518968.png]: /images/20220215/959f35353ec04d96b9f739955612887e.png
[https_blog.csdn.net_qq_42249896_article_details_82227426]: https://blog.csdn.net/qq_42249896/article/details/82227426