【13.0】前端基础JavaScript之JS事件案例
【13.0】前端基础JavaScript之JS事件案例
【一】开关灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bd_green {
background-color: green;
}
.bd_red {
background-color: red;
}
</style>
</head>
<body>
<div id="d1" class="c1 bd_green bd_red">
</div>
<button id="d2">变色</button>
<script>
// 找到 按钮标签
let btnEle = document.getElementById("d2")
// 找到需要变色的标签
let divEle = document.getElementById("d1")
// 绑定点击事件
btnEle.onclick = function () {
// 动态的修改 div 标签的类属性
divEle.classList.toggle("bd_red")
}
</script>
</body>
</html>
【二】input框获取/失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="去吗?" id="d1">
<script>
let inputEle = document.getElementById("d1");
// 获取焦点事件
inputEle.onfocus = function (){
// 将input框内部的值去除
inputEle.value = '';
// .value : 获取框内的值
// = ：赋值
}
// 失去焦点事件
inputEle.onblur = function (){
// 给input框内的标签重写赋值
inputEle.value = "再说"
}
</script>
</body>
</html>
【三】实时展示当前时间
【1.0】基础版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<script>
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// （1） 访问页面之后，将访问的时间显示到input框当中
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
// （2）加载完页面触发事件：打印当前时间
showTime()
</script>
</body>
</html>
【2.0】升级版
设置触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<script>
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// （1） 访问页面之后，将访问的时间显示到input框当中
// （2） 动态展示时间
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
// 触发事件：打印当前时间
setInterval(showTime, 100)
</script>
</body>
</html>
【3.0】BUG版
开启多个定时器时，无法终结每个定时器，只能终结最后定的那个
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--<input type="text" id="d1">-->
<!--<script>-->
<!-- // 拿到 input 框所在的位置-->
<!-- let inputEle = document.getElementById("d1");-->
<!-- // （1） 访问页面之后，将访问的时间显示到input框当中-->
<!-- function showTime() {-->
<!-- // 声明当前时间对象-->
<!-- let currentTime = new Date();-->
<!-- // 将时间添加到input框内-->
<!-- inputEle.value = currentTime.toLocaleString();-->
<!-- }-->
<!-- // 触发事件：打印当前时间-->
<!-- showTime()-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>
<script>
// 定义一个全局标量存储定时器
let t = null;
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// 拿到两个按钮所在的标签
let startEle = document.getElementById("b1");
let endEle = document.getElementById("b2");
// （1） 访问页面之后，将访问的时间显示到input框当中
// （2） 动态展示时间
// （3） 页面上加两个控制按钮。开始和结束
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
startEle.onclick = function () {
// 触发事件：打印当前时间
t = setInterval(showTime, 100)
}
endEle.onclick = function () {
clearInterval(t);
}
</script>
</body>
</html>
结局上述问题
新问题：结束定时器，无法开始
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--<input type="text" id="d1">-->
<!--<script>-->
<!-- // 拿到 input 框所在的位置-->
<!-- let inputEle = document.getElementById("d1");-->
<!-- // （1） 访问页面之后，将访问的时间显示到input框当中-->
<!-- function showTime() {-->
<!-- // 声明当前时间对象-->
<!-- let currentTime = new Date();-->
<!-- // 将时间添加到input框内-->
<!-- inputEle.value = currentTime.toLocaleString();-->
<!-- }-->
<!-- // 触发事件：打印当前时间-->
<!-- showTime()-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>
<script>
// 定义一个全局标量存储定时器
let t = null;
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// 拿到两个按钮所在的标签
let startEle = document.getElementById("b1");
let endEle = document.getElementById("b2");
// （1） 访问页面之后，将访问的时间显示到input框当中
// （2） 动态展示时间
// （3） 页面上加两个控制按钮。开始和结束
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
startEle.onclick = function () {
if (!t) {
// 触发事件：打印当前时间
t = setInterval(showTime, 100);// 每点击一次生成一个定时器，但是t值复制给最后一个定时器
}
}
endEle.onclick = function () {
clearInterval(t);
}
</script>
</body>
</html>
【4.0】改善版
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--<input type="text" id="d1">-->
<!--<script>-->
<!-- // 拿到 input 框所在的位置-->
<!-- let inputEle = document.getElementById("d1");-->
<!-- // （1） 访问页面之后，将访问的时间显示到input框当中-->
<!-- function showTime() {-->
<!-- // 声明当前时间对象-->
<!-- let currentTime = new Date();-->
<!-- // 将时间添加到input框内-->
<!-- inputEle.value = currentTime.toLocaleString();-->
<!-- }-->
<!-- // 触发事件：打印当前时间-->
<!-- showTime()-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>
<script>
// 定义一个全局标量存储定时器
let t = null;
// 拿到 input 框所在的位置
let inputEle = document.getElementById("d1");
// 拿到两个按钮所在的标签
let startEle = document.getElementById("b1");
let endEle = document.getElementById("b2");
// （1） 访问页面之后，将访问的时间显示到input框当中
// （2） 动态展示时间
// （3） 页面上加两个控制按钮。开始和结束
function showTime() {
// 声明当前时间对象
let currentTime = new Date();
// 将时间添加到input框内
inputEle.value = currentTime.toLocaleString();
}
startEle.onclick = function () {
if (!t) {
// 触发事件：打印当前时间
t = setInterval(showTime, 100);// 每点击一次生成一个定时器，但是t值复制给最后一个定时器
}
}
endEle.onclick = function () {
clearInterval(t);
// 重置为空
t = null;
}
</script>
</body>
</html>
【四】省市联动
后者会根据前者展示对应的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="s1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="s2"></select>
<script>
// 模拟数据
data = {
"河北省": ["廊坊", "邯郸", "保定"],
"北京": ["朝阳区", "海淀区", "遵化市"],
"山东": ["威海市", "烟台市"],
"台湾": ["台北市", "高雄市"],
"香港": ["中西区", "东区"],
"江西": ["南昌市", "九江市"],
"黑龙江": ["哈尔滨市", "齐齐哈尔市"]
};
// 拿到两个select对象
let proEle = document.getElementById("s1");
let cityEle = document.getElementById("s2");
// for 循环 取键
for (let key in data) {
// 将省做成一个个标签，添加到第一个select中
// (1) 创建option标签
let opEle = document.createElement("option");
// (2) 设置属性
opEle.innerText = key
// (3) 设置值
opEle.value = key
// -----> <option value="省">省</option>
// (4) 将创建好的标签添加到第一个选项框中
proEle.appendChild(opEle)
}
// 文本域变化事件 --- change 事件
proEle.onchange = function () {
// （1） 先获取到用户选择的省份
let currentPro = proEle.value;
// (2) 获取对应的市
let currentCityList = data[currentPro];
// 清空市中全部的信息
cityEle.innerHTML = '';
// 加一个请选择框
let oppEle = '<option selected disabled>--请选择--</option>'
cityEle.innerHTML = oppEle
// (3) for 循环 将所有的市渲染到第二个标签
for (let i = 0; i < currentCityList.length; i++) {
let currentCity = currentCityList[i];
// (1) 创建option标签
let proEle = document.createElement("option");
// (2) 设置属性
proEle.innerText = currentCity
// (3) 设置值
proEle.value = currentCity
// -----> <option value="省">省</option>
// (4) 将创建好的标签添加到第一个选项框中
cityEle.appendChild(proEle)
}
}
</script>
</body>
</html>
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/17531277.html
