JavaScript事件(含Demo)
主要事件:
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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~