选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 300px;
/* background: gainsboro; */
/* margin: 0 auto; */
}
.box div {
width: 400px;
height: 300px;
background: red;
display: none;
}
.input input {
width: 100px;
height: 40px;
border: 0;
}
.active {
background: red;
}
.box .black {
display: block;
}
</style>
</head>
<body>
<div class="input">
<input class="active" type="button">
<input type="button">
<input type="button">
</div>
<div class="box">
<div data-index="0" class="black">1</div>
<div>2</div>
<div>3</div>
</div>
<script>
var inputArr = document.querySelectorAll(".input input")
var divs = document.querySelectorAll(".box div")
for (var i = 0; i < inputArr.length; i++) {
inputArr[i].dataset.index = i
inputArr[i].onclick = function() {
// 删除inputArr全部的active样式
for (var j = 0; j < inputArr.length; j++) {
// 删除样式 classList.remove("active")
inputArr[j].classList.remove("active")
}
for (var m = 0; m < divs.length; m++) {
divs[m].classList.remove("black")
}
// 给当前的元素添加active样式 classList.add("active")
this.classList.add("active")
var index = this.dataset.index
// console.log(index)
divs[index].classList.add("black")
}
}
</script>
</body>
</html>
事件
这种方式可以时一个元素绑定多个元素
添加点击事件:div_0.addeventlistener("点击事件类型")
删除点击事件:dia_0.removeEventList("click",test) //解绑
鼠标 按下 悬浮 抬起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box1">
</div>
<script>
//mousedown 鼠标按下
//mousemove 鼠标悬浮
//mouseup 鼠标抬起
var box = document.querySelector(".box1")
box.onmousedown = function() {
console.log("鼠标按下")
box.style.background = "blue"
}
box.onmousemove = function() {
console.log("鼠标悬浮")
box.style.background = "green"
}
box.onmouseup = function() {
console.log("鼠标抬起")
box.style.background = "orange"
}
</script>
</body>
</html>
选项卡2鼠标移入背景修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.box img {
width: 150px;
height: 100px;
border: 10px solid rgb(189, 189, 189);
}
.box img:hover {
border: 10px solid white;
}
body {
background: url(img/bg1.jpg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/bg1.jpg" alt="">
<img src="img/bg2.jpg" alt="">
<img src="img/bg3.jpg" alt="">
<img src="img/bg4.jpg" alt="">
<img src="img/bg5.jpg" alt="">
<img src="img/bg6.jpg" alt="">
</div>
<script>
var imgs = document.querySelectorAll(".box img")
var body = document.body
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function() {
body.style.backgroundImage = "url(" + this.src + ")"
}
}
</script>
</body>
</html>
onkeydown 按下键盘事件
onkeyup 按键抬起
onfocus/onblur 获取焦点 失去焦点 获取焦点/失去焦点常用在表单验证
change 改变时触发 ,当获取焦点和失去焦点时内容进行对比如果发生改变则会触发change事件反之则不会
oninput 一直触发
手机端的触摸事件 ontouchstart ontouchmove onrouchend
鼠标的坐标 距离视口的坐标 距离文档流的坐标 距离左上角的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
background: rgb(172, 170, 170);
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div")
div.onclick = function(event) {
console.log(event.clientX, event.clientY) //距离浏览器视口的坐标
console.log(event.pageX, event.pageY) //距离文档流的坐标
console.log(event.offsetX, event.offsetY) //距离元素本身的左上角的坐标
}
</script>
</body>
</html>
鼠标移入出现提示性语言 并 更随移动 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 600px;
position: relative;
}
img {
width: 400px;
height: 600px;
}
p {
position: absolute;
top: 0;
left: 0;
background: rgba(128, 128, 128, 0.155);
display: none;
pointer-events: none;
/* 清除鼠标事件 */
}
</style>
</head>
<body>
<div>
<img src="img/bg1.jpg" alt="">
<p>qqqqqqqqqq</p>
</div>
<script>
var imgs = document.querySelector("div img")
var ps = document.querySelector("div p")
imgs.onmouseover = function() {
ps.style.display = "block"
}
imgs.onmouseout = function() {
ps.style.display = "none"
}
imgs.onmousemove = function(event) {
// console.log(event.offsetX, event.offsetY)
ps.style.left = event.offsetX + "px"
ps.style.top = event.offsetY + "px"
}
</script>
</body>
</html>
点击事件 阻止点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div id="box"><span>点击</span></div>
</div>
<script>
var span = document.querySelector("#box span")
span.onclick = function(event) {
alert("弹出框")
event.stopPropagation() //阻止事件
}
box.onclick = function() {
location.href = "http://www.baidu.com"
}
</script>
</body>
</html>
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: red;
font-size: 12px;
}
div {
width: 450px;
height: 300px;
margin: 200px auto;
}
div p {
height: 30px;
margin-bottom: 30px;
}
div p input {
width: 250px;
height: 30px;
outline-style: none;
/* border: 0; */
/* border-bottom: 1px solid black; */
}
</style>
</head>
<body>
<div>
<p id="p0">用户名:<input type="text" id="text" placeholder="请输入用户名"><span></span></p>
<p id="p1">密 码:<input type="password" id="pwd" placeholder="请输入密码"><span></span></p>
<p id="p2">邮 箱:<input type="email" id="email" placeholder="请输入邮箱"><span></span></p>
<!-- <input type="text"> -->
</div>
<script>
var pArr = document.querySelectorAll("div p")
text.onblur = function() {
// /^[^\u4e00-\u9fa5]+$/ 是不是中文
var text1 = /[a-zA-z0-9]/
var wenb = text.value
if (text1.test(wenb)) {
console.log("对")
} else {
console.log("不对")
var span = document.querySelector("#p0 span")
span.innerHTML = "不能输入中文"
}
}
pwd.onblur = function() {
// console.log(blur)
// 规定输入长度为6到8位
// 匹配一个单词边界,也就是指单词和空格间的位置
// 判断字符长度的
var reg = /\b[a-zA-Z0-9]{6,8}\b/
var str = pwd.value //文本框中输入的字符
// console.log(str)
if (reg.test(str) == true) {
console.log("输入正确")
} else {
console.log("输入错误")
var span = document.querySelector("#p1 span")
span.innerHTML = "输入错误"
}
}
email.onblur = function() {
// /^[^\u4e00-\u9fa5]+$/ 是不是中文
var youxs = /\b[\w.%+-]+@[\w>-]+\.[a-zA-Z]{2,6}\b/
var youx = email.value
if (youxs.test(youx)) {
console.log("对")
} else {
console.log("不对")
var span = document.querySelector("#p2 span")
span.innerHTML = "请按邮箱格式"
}
}
</script>
</body>
</html>
自动跳转轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
}
.box img {
width: 500px;
height: 300px;
}
.box ul {
display: flex;
justify-content: space-around;
width: 400px;
height: 30px;
/* background: red; */
position: absolute;
top: 250px;
left: 50px;
}
.box ul li {
width: 30px;
height: 30px;
border-radius: 50%;
list-style: none;
text-align: center;
line-height: 30px;
background-color: rgba(255, 255, 255, 0.452);
}
.active {
background-color: red !important;
}
</style>
</head>
<body>
<div class="box">
<img src="img/bg1.jpg" alt="">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
var index = 1
function name() {
var imgarr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg"]
var img = document.querySelector(".box img")
// console.log(img)
img.src = "img/" + imgarr[index]
// console.log(index)
var lis = document.querySelectorAll(".box ul li")
for (let i = 0; i < lis.length; i++) {
// const element = array[i];
lis[i].classList.remove("active")
}
lis[index].classList.add("active")
// console.log(box)
//移入 移出 onmouseover(移入) onmouseout(移除)
lis[index].onmouseover = function() {
clearInterval(set)
}
lis[index].onmouseout = function(e) {
set = setInterval(name, 1000)
e.stopPropagation()
}
index++
if (index > 5) {
index = 0
}
}
var set = setInterval(name, 1000)
</script>
</body>
</html>