标签:页面 inpu 添加行 min 点击文本 运行 UI rip btn
DOM事件:对事件做出反应
当事件发生时,可以执行 JavaScript,比如:点击时 onClick=""
例:当用户点击时,会改变 <h1> 元素的内容:
<h1 onclick="this.innerHTML=文本更换!‘">点击文本!</h1>
HTML 事件的例子:
onclick=""//点击时 onload=""//页面加载完成时 onchage=""//改变时 onmouseover=""//鼠标移入时 onmouseout=""//鼠标移出时 onmousedown=""//鼠标点下去时 onmouseup=""//鼠标松开时
例题事件:
1、页面打开五个窗口,点击按钮,关闭所有窗口
<button onclick="closeAll()">关闭</button>//html页面,点击按钮关闭所有页面 <script> var arr = []; for (var i = 4; i >= 0; i--) { window.open();//打开新页面 } function closeAll(){ for (var i =4; i >= 0; i--) { arr[i].close();//关闭页面 } } </script>
2、登陆验证
账号:<input type="text"><br> 密码:<input type="password"><br> <button onclick="denglu()">登录</button> <script> function denglu(){ //获取内容 //找到元素 var input = document.getElementsByTagName("input");//找到input元素,为数组 var uid = input[0]; var pwd = input[1]; //获取元素内容 var uidval = uid.value; var pwdval = pwd.value; if(uidval == "" || pwdval == ""){ console.log("账号或密码不能为空!"); return; } //验证内容 if(uidval == "admin"){ console.log("登录成功!"); } } </script>
3、表格添加行
<button id = "add">添加一行</button>//添加一行按钮 <table id="tab" border="1"> <tr> <td> 123 </td> </tr> </table> <script> var addbtn = document.getElementById(‘add‘);//找到添加按钮 var tab = document.getElementById(‘tab‘);//找到表格 addbtn.onclick = function(){ //点击时,运行方法 var tr = document.createElement(‘tr‘);//添加标签,新建一行 for (var i = 3; i >= 0; i--) { var td = document.createElement(‘td‘);//新建一个单元格 td.innerHTML = 123; tr.appendChild(td);//将新建的td添加到tr中 } tab.appendChild(tr);//将新建的tr添加到table中 } </script>
标签:页面 inpu 添加行 min 点击文本 运行 UI rip btn
原文地址:https://www.cnblogs.com/dk2557/p/9216954.html