开关灯事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.c2 {
background-color: red;
}
.c3 {
background-color: green;
}
</style>
</head>
<body>
<div class="c1 c2 c3"></div>
<button class="b2">点击</button>
<script>
divele = document.getElementsByClassName("c1")[0];
buttonele = document.getElementsByClassName("b2")[0];
buttonele.onclick = function () {
divele.classList.toggle("c3")
}
</script>
</body>
</html>
<!--
1 先将开关灯的样式给调节出来
2 在吧开关灯的标签找到
3 在将按钮的标签找到
4 将按钮的标签绑定一个事件
5 在事件中写入对于class的操作减掉绿色的样式类
-->
显示时间事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" class="c1">
<button class="c2">开始</button>
<button class="c3">结束</button>
<script>
butele1 = document.getElementsByClassName("c2")[0];
butele2 = document.getElementsByClassName("c3")[0];
var t = null;
function showtime() {
time = new Date();
inputele = document.getElementsByClassName("c1")[0];
inputele.value = time.toLocaleString()
}
butele1.onclick = function () {
if (!t) {
t = setInterval(showtime, 1000)
}
};
butele2.onclick = function () {
clearInterval(t);
t = null
}
</script>
</body>
</html>
<!--
1 先写一个input框
2 在将script定义一个时间对象,用来输出value值
3 在通过计时器来控制时间的间隔显示
4 在写入几个按钮来控制开始结束
5 在通过jss将标签按钮找到,绑定事件
6 注意这里我们按开始按钮式如果多安了就会多开很多计时器。我们要限制计时器的个数定义一个全局变量来指向计时器
如果开始没有的时候就让他执行,如果有就不让他执行
7 注意在我们取消计时器的时候。的将全局变量清空
-->
获取焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="帅的什么也没有留下" class="c1">
<script>
inputele = document.getElementsByClassName("c1")[0];
inputele.onfocus = function () {
inputele.value = ""
};
inputele.onblur = function () {
inputele.value = "老板记得下一次在来哦"
}
</script>
</body>
</html>
<!--
1 先写一个input框
2 通过jss找到input这个标签
3 在将这个标签绑定给 onfous 和onblur 这两个事件
4 在事件内写入触发事件的代码
-->
省市联动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1">
</select>
<select name="" id="d2">
</select>
<script>
var data = {
"河北省": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"上海": ["静安区", "黄浦区"],
"深圳": ["南山区", "龙岗区"]
};
s1ele = document.getElementById("d1");
s2ele = document.getElementById("d2");
var opel = document.createElement("option");
opel.innerText = "--请选择--";
s1ele.appendChild(opel);
for (let i in data) {
var opele = document.createElement("option");
opele.innerText = i;
opele.value = i;
s1ele.appendChild(opele)
}
s1ele.onchange = function () {
var a = s1ele.value;
var b = data[a];
s2ele.innerHTML = "";
for (let i = 0; i < b.length; i++) {
var opele2 = document.createElement("option");
opele2.innerText = b[i];
opele2.value = b[i];
s2ele.appendChild(opele2)
}
}
</script>
</body>
</html>
<!--
1 先写两个select框
2 在jss文件中找的select标签
3 在将字典date for循环得到省的值
4 我们在动态创建option标签每次循环将文本值传入option标签内
5 再将第一个select标签绑定一个onchange事假我们可以同过标签.value的方式取出我们select中选定的值
6 同过我们选定的值获取列表中的城市的值
7 然后在for循环 一次取出城市的值,动态的创建option标签。将文本值给option标签
8 注意每一次我们动态传值得时候都要将上次的标签信息给删除掉
-->
模态框事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128, 128, 128, 0.4);
z-index: 1;
}
.c3 {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
background-color: white;
z-index: 2;
}
.h1 {
display: none;
}
</style>
</head>
<body>
<div class="c1">我是最下面的</div>
<button class="d1">登录</button>
<div class="c2 h1"></div>
<div class="c3 h1">
<p>username <input type="text"></p>
<p>password <input type="password"></p>
<button class="d2">取消</button>
</div>
<script>
var divele1 = document.getElementsByClassName("d1")[0];
divele1.onclick = function () {
divele2 = document.getElementsByClassName("c2")[0];
divele3 = document.getElementsByClassName("c3")[0];
divele2.classList.remove("h1");
divele3.classList.remove("h1")
}
var divele4 = document.getElementsByClassName("d2")[0];
divele4.onclick = function () {
divele5 = document.getElementsByClassName("c2")[0];
divele6 = document.getElementsByClassName("c3")[0];
divele5.classList.add("h1");
divele6.classList.add("h1")
}
</script>
</body>
</html>
<!--
1 先定义3个diV 第一个是最底下的类容。第二个是模态框,第三个是登录框
2 注意,这几个div都要绝对定位,不然就不会飘起来
3 然后在定义一个h类来隐藏属相
4 我们在通过按钮绑定操作来修改每个div中的隐藏类
5 一个增加h一个删除按钮
-->