码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript事件(含Demo)

时间:2018-10-10 12:11:53      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:rip   document   nbsp   运算   case   bre   demo   hang   聚集   

主要事件:

  onclick  鼠标单击事件

  onmouseover 鼠标经过事件

  onmouseout  鼠标移开事件

  onchange  文本框内容改变事件

  onselect  文本框内容被选中事件

  onfocus  光标聚集

  onblur  光标离开

  onload  网页导入

  onunload  关闭网页

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4      <meta charset="utf-8">
 5   <title> 事件</title>  
 6   <script type="text/javascript">
 7    function count(){
 8        
 9        var result="";
10        
11     //获取第一个输入框的值
12     var num1 = document.getElementById("txt1").value;
13     //获取第二个输入框的值
14     var num2 = document.getElementById("txt2").value;
15     //获取选择框的值
16     var op = document.getElementById("select").value;
17     //获取通过下拉框来选择的值来改变加减乘除的运算法则
18     switch(op){
19         case "+":
20             result = parseFloat(num1) +parseFloat(num2);
21             break;
22         case "-":
23             result =  parseFloat(num1) -parseFloat(num2);
24             break;
25         case "*":
26             result =  parseFloat(num1) *parseFloat(num2);
27             break;
28         case "/":
29             if(parseFloat(num2) === 0){
30                 var con = confirm("被除数不能为0!");
31                 break;
32             }
33             result =  paresFloat(num1) / paresFloat(num2);
34             break;
35     }
36     //设置结果输入框的值 
37         document.getElementById("fruit").value = result;
38    }
39   </script> 
40  </head> 
41  <body>
42    <input type=‘text‘ id=‘txt1‘ /> 
43    <select id=‘select‘>
44         <option value=‘+‘>+</option>
45         <option value="-">-</option>
46         <option value="*">*</option>
47         <option value="/">/</option>
48    </select>
49    <input type=‘text‘ id=‘txt2‘ /> 
50    <input type=‘button‘ value=‘ = ‘  onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果--> 
51    <input type=‘text‘ id=‘fruit‘ onfocus="count()"/>   
52  </body>
53 </html>

 

JavaScript事件(含Demo)

标签:rip   document   nbsp   运算   case   bre   demo   hang   聚集   

原文地址:https://www.cnblogs.com/deepSleeping/p/9765271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!