首页 > Web开发 > 详细

JS学习-事件响应小结-简单的计算器

时间:2017-10-14 23:13:28      阅读:342      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
       var fnum=document.getElementById("txt1").value;//获取第一个输入框的值
        var snum=document.getElementById("txt2").value;//获取第二个输入框的值
        var sel=document.getElementById("select").value//获取选择框的值
        var sum=0;
        switch(sel){//获取通过下拉框来选择的值来改变加减乘除的运算法则
            case "+":
                sum=parseFloat(fnum)+parseFloat(snum);//通过getElementById方式获取的value值默认为字符串类型
                break;
            case "-":
                sum=fnum-snum;
                break;
            case "*":
                sum=fnum*snum;
                break;
            default:
                sum=fnum/snum;
                break;
            
        }
    //设置结果输入框的值 
    document.getElementById("fruit").value=sum;
   }
  </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>

效果图:

技术分享

能够实现基本的算数运算,一个选择框,两个文本框,一个按钮

 

主要的事件响应:

  1. onclick 鼠标单击事件(通常与按钮一起使用)
  2. onmouseover 鼠标经过事件(一般用于提示)
  3. onmouseout 鼠标移开事件
  4. onchange 文本框内容改变事件
  5. onselect 文本框内容被选中事件
  6. onfocus 光标聚焦事件
  7. onblur 光标离开事件
  8. onload 加载事件(加载页面时,触发onload事件,事件写在<body>标签。写哪监听哪。)
  9. onunload 卸载事件(当用户退出页面时,如页面关闭“这里的关闭指的是页面的跳转”、刷新时触发)

onload事件的作用:

加载事件可以在页面加载前通过JS代码对页面样式做出调整,比如检测浏览器宽度屏幕分辨率之后,调整页面的相应尺寸

JS学习-事件响应小结-简单的计算器

原文:http://www.cnblogs.com/zmx-xiao-xiao/p/7668862.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!