javascript DOM练习
一、定时器
<!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>
