北京高端it网站建设,济宁vi设计公司,网站开发按钮素材,郑州百度seo关键词学习目标#xff1a; 掌握事件类型 学习内容#xff1a;
事件类型鼠标事件焦点事件键盘事件文本事件focus选择器案例 事件类型#xff1a; 鼠标事件#xff1a;
title事件类型-鼠标事件/titlestylediv {width: 200px;height: 200px;background-c…学习目标 掌握事件类型 学习内容
事件类型鼠标事件焦点事件键盘事件文本事件focus选择器案例 事件类型 鼠标事件
title事件类型-鼠标事件/titlestylediv {width: 200px;height: 200px;background-color: pink;}/style/head
bodydiv/divscriptconst div document.querySelector(div)// 鼠标经过div.addEventListener(mouseenter, function () {console.log(轻轻的我来了)})// 鼠标离开div.addEventListener(mouseleave, function () {console.log(轻轻的我走了)})/script/body练习
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title练习-轮播图点击切换/titlestyle* {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;border-radius: 4px;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
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// const arr [1, 3]// arr[0]// 1. 初始数据const data [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider03.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider04.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider05.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider06.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider07.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]//获取元素const img document.querySelector(.slider-wrapper img)const p document.querySelector(.slider-footer p)const footer document.querySelector(.slider-footer)//1.右按钮业务// 1.1 获取右侧按钮const next document.querySelector(.next)let i 0 //信号量 控制播放图片张数// 1.2 注册点击事件next.addEventListener(click, function () {// console.log(11)i//1.6 判断条件 如果大于8 就复原为0// if (i 8) {// i 0// }i i data.length ? 0 : i//1.3 得到对应的对象// console.log(data[i])//调用函数toggle()})//2.左侧按钮业务//2.1 获取左侧按钮const prev document.querySelector(.prev)// 2.2 注册点击事件prev.addEventListener(click, function () {// console.log(11)i--//1.6 判断条件 如果小于0 则爬到最后一张图片索引号是 7// if (i 0) {// i 7// }i i 0 ? data.length - 1 : i//2.3 得到对应的对象// console.log(data[i])//调用函数toggle()})//声明一个渲染的函数作为复用function toggle() {//1.4 渲染对应的数据img.src data[i].urlp.innerHTML data[i].titlefooter.style.backgroundColor data[i].color//1.5 更换小圆点 先移除原来的类名当前li再添加 这个类名document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i 1})).classList.add(active)}//3.自动播放模块let timerId setInterval(function () {//利用js自动调用点击事件 click() 一定加小括号调用函数next.click()}, 1000)//4.鼠标经过大盒子停止定时器const slider document.querySelector(.slider)//注册事件slider.addEventListener(mouseenter, function () {//停止定时器clearInterval(timerId)})//5.鼠标离开大盒子开启定时器//注册事件slider.addEventListener(mouseleave, function () {//停止定时器clearInterval(timerId)//开启定时器timerId setInterval(function () {//利用js自动调用点击事件 click() 一定加小括号调用函数next.click()}, 1000)})/script
/body/html焦点事件 title焦点事件/title
/headbodyinput typetextscriptconst input document.querySelector(input)input.addEventListener(focus, function () {console.log(有焦点触发)})input.addEventListener(blur, function () {console.log(失去焦点触发)})/script/body练习
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title练习-小米搜索框案例/titlestyle* {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;}/stylebodydiv classmiinput typesearch placeholder小米笔记本ul classresult-listlia href#全部商品/a/lilia href#小米11/a/lilia href#小米10S/a/lilia href#小米笔记本/a/lilia href#小米手机/a/lilia href#黑鲨4/a/lilia href#空调/a/li/ul/divscript//1.获取元素const input document.querySelector([typesearch])const ul document.querySelector(.result-list)// console.log(input)//2.监听事件 获得焦点input.addEventListener(focus, function () {// console.log(11)//ul显示ul.style.display block//添加一个带有颜色边框的类名input.classList.add(search)})//3.监听事件 失去焦点input.addEventListener(blur, function () {// console.log(11)ul.style.display noneinput.classList.remove(search)})/script/body/html键盘事件
title键盘事件/title
/headbodyinput typetextscriptconst input document.querySelector(input)input.addEventListener(keydown, function () {console.log(键盘按下了)})input.addEventListener(keyup, function () {console.log(键盘弹起了)})/script/body文本事件
title文本事件/title
/headbodyinput typetextscriptconst input document.querySelector(input)input.addEventListener(input, function () {console.log(input.value)})/script/bodyfocus选择器
titlefocus选择器/titlestyleinput {width: 200px;transition: all .3s;}/* focus伪类选择器 获得焦点 */input:focus {width: 300px;}/style
/headbodyinput typetext/body案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title练习-评论字数统计/titlestyle.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}/style
/headbodydiv classwrapperi classavatar/itextarea idtx placeholder发一条友善的评论 rows2 maxlength200/textareabutton发布/button/divdiv classwrapperspan classtotal0/200字/span/divdiv classlistdiv classitem styledisplay: none;i classavatar/idiv classinfop classname清风徐来/pp classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp classtime2022-10-10 20:29:21/p/div/div/divscriptconst tx document.querySelector(#tx)const total document.querySelector(.total)//1.当我们文本域获得了焦点就让total 显示出来tx.addEventListener(focus, function () {total.style.opacity 1})//2.当我们文本域失去了焦点就让total 隐藏出来tx.addEventListener(blur, function () {total.style.opacity 0})//3.检测用户输入tx.addEventListener(input, function () {// console.log(tx.value.length) 得到输入的长度total.innerHTML ${tx.value.length}/200字})/script/body/html
