一、定时器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1"> <input type="button" id="start" value="开始"> <input type="button" id="end" value="结束"> <script> /* 定时器 知识点:清除定时器后,定时器的值不会改变 */ var timeResh; function foo() { // 获取当前时间,并转换成字符串时间 var now = new Date(); nowStr = now.toLocaleString(); // 获取标签,并填入当前时间 var i1Ele = document.getElementById("i1"); i1Ele.value = nowStr; } // 获取star button 并设置监听 var starEle = document.getElementById("start"); starEle.onclick = function () { foo(); // timeResh定时器, 没赋值默认为undefined ,再次点击start 按钮时,因为 timeResh不等于undefined所以,不会生成新的定时器 if(timeResh===undefined){ // 每1000毫秒,刷新一次 timeResh = setInterval(foo, 1000); } } var endEle = document.getElementById("end"); endEle.onclick=function () { // 清除定时器后,值不会发送变化,把值重新设置成undefined clearInterval(timeResh); timeResh = undefined; } </script> </body> </html>
二、焦点
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1" value="俄罗斯套娃"> <input type="button" value="搜索"> <script> /* 获取焦点:onfocus 失去焦点:onblur */ var i1Ele = document.getElementById("i1"); // 有焦点时,设置值为空 i1Ele.onfocus = function () { i1Ele.value = "" } var i2Ele = document.getElementById("i2"); i1Ele.onblur = function () { // 当input的内容为空时 if(!i1Ele.value.trim()) { i1Ele.value = "俄罗斯套娃"; } } </script> </body> </html>
三、select联动
onchange 域的内容被改变
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="f1"> <option value="0">--请选择--</option> <option value="1">江苏</option> <option value="2">北京</option> </select> <select name="" id="f2"> </select> <script> /* 思路: 1、选择城市,获取数据 2、创建option标签 3、添加数据到option 4、将option标签加到select标签中 5、重新选择时,要清空之前添加的标签 */ var data = {1: ["徐州", "常州", "无锡"], 2: ["东城", "沙河"]} var f1Ele = document.getElementById("f1"); f1Ele.onchange = function () { var area = data[this.value]; var f2Ele = document.getElementById("f2"); // 清空标签 f2Ele.innerHTML=""; for (var i = 0; i < area.length; i++){ var optEle = document.createElement("option"); optEle.innerText = area[i]; f2Ele.appendChild(optEle); } } </script> </body> </html>