c 购物网站开发流程图,wordpress插件排列,企业通用网站模板,珠海网站制作首页7.1鼠标事件
案例-轮播图点击切换 需求#xff1a;当点击左右的按钮#xff0c;可以切换轮播图 分析: ①右侧按钮点击#xff0c;变量#xff0c;如果大于等于8#xff0c;则复原0 ②左侧按钮点击#xff0c;变量–#xff0c;如果小于0#xff0c;则复原最后一张 ③鼠…
7.1鼠标事件
案例-轮播图点击切换 需求当点击左右的按钮可以切换轮播图 分析: ①右侧按钮点击变量如果大于等于8则复原0 ②左侧按钮点击变量–如果小于0则复原最后一张 ③鼠标经过暂停定时器 ④鼠标离开开启定时器 【示例代码】
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/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/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1.初始数据const data [{ url: imgs/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: imgs/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: imgs/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: imgs/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },]//获取元素const img document.querySelector(.slider-wrapper img)const p document.querySelector(.slider-footer p)const footer document.querySelector(.slider-footer)//2.右侧按钮//2.1 获取右侧按钮const next document.querySelector(.next)let i 0//2.2 注册点击事件next.addEventListener(click, function () {iif (i data.length) {i 0}commom()})//3.左侧按钮//3.1 获取左侧按钮const prev document.querySelector(.prev)//3.2 注册点击事件prev.addEventListener(click, function () {i--if (i 0) {i data.length - 1}commom()})//4.声明一个渲染函数作为复用function commom() {//2.3 渲染对应的数据img.src data[i].urlp.innerHTML data[i].titlefooter.style.backgroundColor data[i].color//2.4 更换小圆点 先移除原来的类名再给当前的li添加active类document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i 1})).classList.add(active)}//5.自动播放模块let timeId setInterval(function () {//利用js自动调用点击事件 click() !next.click() //click()是一个方法}, 1000)// 6.鼠标经过 暂停定时器const slider document.querySelector(.slider)slider.addEventListener(mouseenter, function () {clearInterval(timeId)})// 7.鼠标离开 开启定时器slider.addEventListener(mouseleave, function () {//先关闭定时器clearInterval(timeId)//再打开timeId setInterval(function () {//利用js自动调用点击事件 click() !next.click()}, 1000)})/script
/body/html7.2焦点事件
【示例代码】
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/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;}/style/headbodydiv 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/divscriptconst input document.querySelector(input)// const input document.querySelector([typesearch])const list document.querySelector(.result-list)//获得焦点input.addEventListener(focus, function () {list.style.display block//添加一个带有颜色边框的类名input.classList.add(search)})//失去焦点input.addEventListener(blur, function () {list.style.display noneinput.classList.remove(search)})/script
/body/html7.3文本事件
【示例代码】
bodyinput typetextscriptconst inp document.querySelector(input)inp.addEventListener(input, function () {console.log(inp.value) //获取用户输入的内容})/script
/body案例-评论字数统计 需求用户输入文字可以计算用户输入的字数. 分析: ①判断用输入事件input ②不断取得文本框里面的字符长度文本域.value.length ③把获得数字给下面文本框 【示例代码】
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta 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 () {total.innerHTML ${tx.value.length}/200字})/script
/body/html
