编程练习

最新推荐文章于 2017-05-18 14:55:00 发布

natalie86

最新推荐文章于 2017-05-18 14:55:00 发布

阅读量434

点赞数

分类专栏： javascipt 文章标签： javascript

本文链接：https://blog.csdn.net/natalie86/article/details/52225042

版权

javascipt 专栏收录该内容

126 篇文章 2 订阅

订阅专栏

要达到的结果：使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

提示：用JS取值的方法：var = document.getElementById(“id”）.value；

赋值的方法：document.getElementById(“id”）.value = 1；

思路：1.创建构建运算函数count();

2.用JS获取两个输入框及select下拉框的值

3.获取通过下拉框选择来的值来进行两个数加减乘除的运算（这里可以用switch来判断）

4.通过用onclick();函数来调用函数获取值

代码：

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
       
   var num1=document.getElementById('txt1').value;
  var num2=document.getElementById('txt2').value;
  var select=document.getElementById('select').value;
  var result='';
	switch(select){
     case '+':
         result=parseFloat(num1)+parseFloat(num2);
         break;
    case '-':
        result=parseFloat(num1)-parseFloat(num2);
        break;
    case '*':
        result=parseFloat(num1)*parseFloat(num2);
        break;
    default:
        result=parseFloat(num1)/parseFloat(num2);
             
	}
    

  document.getElementById('fruit').value=result;
    
   }
  </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=' = ' οnclick="count();"/> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>