发表于： 2023-02-21 21:24:37
0 272
今天的js：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('focus', function () {
console.log('有焦点触发')
})
ipt.addEventListener('blur', function () {
console.log('失去焦点触发')
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input = document.querySelector('input')
//键盘事件
// input.addEventListener('keydown', function () {
// console.log('该键盘按下了')
// })
// input.addEventListener('keyup', function () {
// console.log('该键盘松开了')
// })
//用户输入文本事件 input
input.addEventListener('input',function () {
console.log(input.value)
})
</script>
</body>
</html>l>
案例练习
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
display: none;
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10s</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
//属性选择器
const input = document.querySelector(`[type=search]`)
const ul = document.querySelector('.result-list')
// console.log(input)
//监听事件
//获得焦点
input.addEventListener('focus', function () {
// console.log(11)
ul.style.display = 'block'
input.classList.add('search')
})
//失去焦点
input.addEventListener('blur', function () {
ul.style.display = 'none'
input.classList.remove('search')
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="../../js2-DOM/images/1.jpg" alt="">
</div>
<div class="slider-footer">
<p>雅儿贝德</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
//更好p里面的字
// 初始数据
const data = [
{url: `../../js2-DOM/images/1.jpg`, title: `动漫角色图`, color: `rgb(67, 98, 92)`},
{url: `../../js2-DOM/images/2.jpg`, title: `狗子`, color: `rgb(166, 131, 143)`},
{url: `../../js2-DOM/images/3.jpg`, title: `猫猫`, color: `rgb(53, 29, 25)`},
{url: `../../js2-DOM/images/4.jpg`, title: `动漫壁纸图`, color: `rgb(99, 72, 114)`}
]
//获取元素
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
const slider = document.querySelector('.slider')
let i = 0 //信号量 控制图片张数
//注册点击事件
//右侧按钮
next.addEventListener('click', function () {
// console.log(11)
i++
// if( i >= data.length) {
// i = 0
// }
i = i >= data.length ? 0 : i
//得到对应的对象
// console.log(data[i])
//调用函数
toggle()
})
//左侧按钮
prev.addEventListener('click', function () {
// console.log(11)
i--
//判断条件 如果小于0 则爬到最后一张图片索引号是 3
// if( i < 0) {
// i = 3
// }
i = i < 0 ? data.length - 1 : i
//得到对应的对象
// console.log(data[i])
//调用函数
toggle()
})
//声明一个函数作为复用
function toggle() {
img.src = data[i].url
p.innerHTML = data[i].title
footer.style.backgroundColor = data[i].color
//更换小圆点 先移除原来的类名 当前li再添加这个类名
document.querySelector(`.slider-indicator .active`).classList.remove(`active`)
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
//自动播放
let timerId = setInterval(function () {
//利用js自动调用点击右侧按钮事件 click() 要加小括号调用函数
next.click()
}, 1000)
//鼠标经过
slider.addEventListener('mouseenter', function () {
//停止定时器
clearInterval(timerId)
})
//鼠标离开
slider.addEventListener('mouseleave', function () {
//停止定时器
clearInterval(timerId)
//开启定时器
timerId = setInterval(function () {
//利用js自动调用点击右侧按钮事件 click() 要加小括号调用函数
next.click()
}, 1000)
})
</script>
</body>
</html>
返回列表
评论