简易计算器实现-优快云博客

本文链接：https://blog.youkuaiyun.com/javatzl/article/details/78902560

本文介绍了一个简单的网页版计算器实现方法，通过HTML、JavaScript等技术让用户能够输入两个数值并选择运算符，然后点击按钮即可显示计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
    var x = document.getElementById("txt1").value;
    var y = document.getElementById("txt2").value;
    var count = document.getElementById("select").value;
    var z = 0;
    switch (count){
        case "+" :
            z = x + y;//document.getElementById().value得到的是字符串。因此，case"+"中得到的是两个字符串的拼接的结果，如“1”+“1”=“11”。此处需要进行类型转换，用parseInt()或者parseFloat()方法
            break;
        case "-" :
            z = x - y;
            break;
        case "*" :
            z = x * y;
            break;
        case "/" :
            z = x / y;
            break;
    }
    document.getElementById("fruit").value = z;
    //获取第一个输入框的值
	//获取第二个输入框的值
	//获取选择框的值
	//获取通过下拉框来选择的值来改变加减乘除的运算法则
    //设置结果输入框的值 
    
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
		<option value='+'>+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>