js之实现一个简易的计算器

编程知识 更新时间:2023-04-07 01:00:45

通过js实现一个可以完成加减乘除的简易计算器。代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
    var first= document.getElementById("txt1").value;
    var  second=document.getElementById("txt2").value;
    var  selection=document.getElementById("select").value;
    var outcome=0;
    //获取第一个输入框的值
	//获取第二个输入框的值
	//获取选择框的值
	//获取通过下拉框来选择的值来改变加减乘除的运算法则
    //设置结果输入框的值  
    
    if(selection=="+"){
       outcome=parseInt(first)+parseInt(second);
    }
    else if(selection=="-"){
         outcome=parseInt(first)-parseInt(second);
    }
    else if(selection=="*"){
         outcome=parseInt(first)*parseInt(second);
    }
    else if(selection=="/"){
         outcome=parseInt(first)/parseInt(second);
    }
 
    document.getElementById("fruit").value=outcome;
   }
  </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>

代码解释:

 var first= document.getElementById("txt1").value 是对id为“txt1”的文本框赋值,当往文本框里输入值时就赋给first变量,后面同理;

if  else 语句就是判断选择的是什么种类的运算符号,从而进行对应的运 算, outcome=parseInt(first)/parseInt(second); 其中的parseInt的作用是解析一个字符串,并返回一个整数,再将outcome赋值给结果文本框。

最后通过设置一个value为“=”的按钮绑定count函数即可,请看结果:

加法:

减法:

乘法:

除法: 

更多推荐

js之实现一个简易的计算器

本文发布于:2023-04-07 01:00:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/8d18435c9ea431d8c9862b25831a7cd1.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:计算器   简易   js

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 51491文章数
  • 14阅读数
  • 0评论数