网站内容建设运维服务,wordpress中怎么排序,ui设计网站模板,网站底部版权信息格式一、window定时器 1.window定时器方法 有时我们并不想立即执行一个函数#xff0c;而是等待特定一段时间之后再执行#xff0c;我们称之为“计划调用#xff08;scheduling a call#xff09;”。 目前有两种方式可以实现#xff1a; setTimeout 允许我们将函数推迟到一…一、window定时器 1.window定时器方法 有时我们并不想立即执行一个函数而是等待特定一段时间之后再执行我们称之为“计划调用scheduling a call”。 目前有两种方式可以实现 setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。 setInterval 允许我们重复运行一个函数从一段时间间隔之后开始运行之后以该时间间隔连续重复运行该函数。 并且通常情况下有提供对应的取消方法 clearTimeout取消setTimeout的定时器clearInterval取消setInterval的定时器 大多数运行环境都有内置的调度程序并且提供了这些方法 目前来讲所有浏览器以及 Node.js 都支持这两个方法所以我们后续学习Node的时候也可以在Node中使用它们 2.setTimeout的使用 setTimeout的语法如下 let timerId setTimeout(func|code, [delay], [arg1], [arg2], ...) func|code想要执行的函数或代码字符串。 一般传入的都是函数由于某些历史原因支持传入代码字符串但是不建议这样做 delay执行前的延时以毫秒为单位1000 毫秒 1 秒默认值是 0arg1arg2…要传入被执行函数或代码字符串的参数列表 clearTimeout方法 setTimeout 在调用时会返回一个“定时器标识符timer identifier”我们可以使用它来取消执行 function showTime() {console.log(new Date().toISOString());setTimeout(showTime(), 1000); } showTime(); // 或者 function showTime() {console.log(new Date().toISOString());setTimeout(showTime, 1000); } showTime();3.setInterval的使用 setInterval 方法和 setTimeout 的语法相同 所有参数的意义也是相同的不过与 setTimeout 只执行一次不同setInterval 是每间隔给定的时间周期性执行 clearInterval方法 setInterval也会返回一个“定时器标识符timer identifier”我们可以通过clearInterval来取消这个定时器。 关于定时器还有一些宏任务相关的概念我们会在JavaScript高级中讲解。 二、案例实战 1.轮播消息提示 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.tip-bar {display: inline-flex;align-items: center;height: 30px;background-color: rgba(0,0,0,.4);border-radius: 16px;}img {width: 30px;height: 30px;border-radius: 50%;margin-right: 5px;}span {font-size: 13px;color: white;margin-right: 8px;}/style /head bodydiv classtip-barimg srchttps://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png altspan183***138对这件商品感兴趣/span/divscript// 1.从服务器拿到数据ajax/fetch请求let tipList [{icon: https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png,title: coderwhy对这件商品感兴趣},{icon: https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png,title: 123***814对这件商品感兴趣},{icon: https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png,title: 刘军对这件商品感兴趣}]// 2.动态的切换数据// 2.1.获取元素var tipBar document.querySelector(.tip-bar)var imgEl tipBar.querySelector(img)var spanEl tipBar.querySelector(span)// 2.2.3s切换一次数据var currentIndex 0 // 记录当前展示到的索引位置setInterval(function() {// 1 根据索引获取itemvar tipItem tipList[currentIndex]// 2 给DOM设置内容imgEl.src tipItem.iconspanEl.textContent tipItem.title// 3 重新计算索引currentIndexif (currentIndex tipList.length) {currentIndex 0}}, 3000)// 随机// Math.floor(Math.random() * tipList.length)/script/body /html2.关闭隐藏信息 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.top-bar {display: flex;flex-direction: row;align-items: center;height: 45px;width: 375px;background-color: black;/* 关键 */overflow: hidden;transition: all .5s ease-out;}.delete {display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;width: 30px;cursor: pointer;}.delete img {height: 10px;width: 10px;}.logo {height: 30px;width: 30px;margin-left:3px;margin-right: 30px;cursor: pointer;}span {color: white;font-size: 14px;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.btn {width: 94px;height: 100%;line-height: 45px;text-align: center;font-size: 14px;color: #fff;background-color: #F63515;}/style /head bodydiv classtop-bardiv classdeleteimg src./img/delete.png alt/divimg classlogo src./img/logo.png altspan打开京东App,购物更轻松/spandiv classbtn立即打开/div/divscript// 1.获取元素var topBar document.querySelector(.top-bar)var deleteEl topBar.querySelector(.delete)// 2.监听delete的点击deleteEl.onclick function() {topBar.style.height 0// setTimeout(function() {// topBar.remove()// }, 300)}// 3.监听过渡动画结束topBar.ontransitionend function() {topBar.remove()}/script/body /html3.侧边栏展示 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.tool-bar {position: fixed;top: 30%;right: 0;display: flex;flex-direction: column;align-items: center;width: 35px;}.item {position: relative;width: 35px;height: 35px;margin-bottom: 1px;background-color: #7a6e6e;border-radius: 3px 0 0 3px;}.icon {display: inline-block;width: 100%;height: 100%;cursor: pointer;background-image: url(./img/toolbars.png);}/* .icon01 {background-position: -48px 0;}.icon02 {background-position: -48px -50px;}.icon03 {background-position: -48px -100px;}.icon04 {background-position: -48px -150px;} */.name {position: absolute;z-index: -1;right: 35px;/* left: -62px; */top: 0;width: 0;height: 35px;line-height: 35px;color: #fff;text-align: center;font-size: 12px;background-color: #7a6e6e;cursor: pointer;border-radius: 3px 0 0 3px;transition: width .2s ease;}.item:hover,.item:hover .name {background-color: #cd1926;}/style /head bodydiv classtool-bardiv classitemi classicon icon01/idiv classname购物车/div/divdiv classitemi classicon icon02/idiv classname收藏/div/divdiv classitemi classicon icon03/idiv classname限时活动/div/divdiv classitemi classicon icon04/idiv classname大礼包/div/div/divscript// 1.动态给icon设置backgroundPositionvar iconEls document.querySelectorAll(.icon)for (var i 0; i iconEls.length; i) {var iconEl iconEls[i]iconEl.style.backgroundPosition -48px -${50*i}px}// 2.实现鼠标进入动画// 方案一: mouseenter(不能使用事件委托)var itemEls document.querySelectorAll(.item)for (var itemEl of itemEls) {itemEl.onmouseenter function() {var nameEl this.children[1]nameEl.style.width 62px}itemEl.onmouseleave function() {var nameEl this.children[1]nameEl.style.width 0}}// 方案二: mouseover(使用事件委托)// var toolbarEl document.querySelector(.tool-bar)// toolbarEl.onmouseover function(event) {// handleMouseEvent(event, 62)// }// toolbarEl.onmouseout function(event) {// handleMouseEvent(event, 0)// }// function handleMouseEvent(event, width) {// if (event.target ! toolbarEl) {// // var itemEl event.target.classList.contains(item) ? event.target: event.target.parentElement// // 1.获取唯一的item// var itemEl null// if (event.target.classList.contains(item)) {// itemEl event.target// } else {// itemEl event.target.parentElement// }// // 2.根据item获取nameElement// var nameEl itemEl.children[1]// // 3.设置宽度// nameEl.style.width ${width}px// }// }/script/body /html4.登录框 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./css/iconfont.cssstylebody,input {margin: 0;padding: 0;outline: none;}.container {text-align: center;}.pannel {display: inline-block;padding: 30px;width: 300px;/* border-radius: 10px; *//* border: 2px solid #ccc; */}.pannel .form-item {display: flex;width: 100%;margin-bottom: 15px;border: 1px solid #ccc;}.pannel .form-item .icon {width: 40px;height: 40px;box-sizing: border-box;border-right: 1px solid #ccc;background-color: #eee;vertical-align: bottom;color: #ccc;}.pannel .form-item .icon.icon-account {font-size: 24px;line-height: 40px;}.pannel .form-item .icon.icon-password {line-height: 40px;font-size: 18px;}.pannel .form-item input {padding-left: 10px;height: 40px;flex: 1;box-sizing: border-box;border-style: none;}.pannel .form-item i {width: 20px;margin: 0 3px;font-style: normal;color: #ccc;line-height: 40px;font-size: 20px;}button {width: 100%;background-color: rgb(233, 97, 99);border-style: none;padding: 5px 0;font-size: 20px;letter-spacing: 5px;color: #fff;}/style /head bodydiv classcontainerdiv classpannelform action/abc methodposth1登录页面/h1div classform-itemdiv classicon iconfont icon-account/divinput typetext nameusername idusername placeholder邮箱/用户名/登录手机i classremove-icon iconfont icon-delete/i/divdiv classform-itemdiv classicon iconfont icon-password/divinput typepassword namepassword idpassword placeholder密码i classhidden-icon iconfont icon-no_eye/ii classremove-icon iconfont icon-delete/i/divbutton typesubmit登录/button/form/div/divscriptvar removeIconEls document.querySelectorAll(.icon-delete);removeIconEls.forEach(function (value) {console.log(value);value.addEventListener(click, function () {console.log(当前元素, this);this.previousElementSibling.value ;})})/script /body /html5.王者荣耀tabControl !DOCTYPE html html langzh-CN headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title王者荣耀-main-news/titlelink relstylesheet href./css/reset.csslink relstylesheet href./css/common.cssstyle.main .section-content {display: flex;justify-content: space-between;}.main .section-content .left-content {width: 872px;height: 1000px;}.main .section-content .right-content {width: 295px;height: 500px;}/style /head bodydiv classmain main_wrapperdiv classsection-contentdiv classleft-contentdiv classcontent-centerdiv classsection_headerdiv classheader_lefth3 classtitle内容中心/h3/divdiv classheader_right href#a classmore href#更多/a/div/divdiv classtab_controldiv classitem active精品栏目/divdiv classline/divdiv classitem赛事精品/divdiv classline/divdiv classitem英雄攻略/div/div/div/div/divscript// 1.获取元素var tabControl document.querySelector(.tab_control)// 2.监听鼠标进入(事件委托)var activeLiEl tabControl.querySelector(.active)tabControl.onmouseover function(event) {// 1.拿到事件发生的对象var itemEl event.targetif (itemEl.classList.contains(item)) {// 其他的取消active// 1.for循环所有的item// 2.querySelector(.active)// 3.记录当前的active对应的itemactiveLiEl.classList.remove(active)// 当前进入的item变成activeitemEl.classList.add(active)// 将最新的itemEl变成activeLiElactiveLiEl itemEl}}/script /body /html6.王者轮播图 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {margin: 0;padding: 0;}a {text-decoration: none;}.box {width: 604px;height: 342px;margin: 0 auto;overflow: hidden;}.pic {display: flex;width: 100%;height: 298px;transition: all 300ms ease;}.pic .banner {flex: 1;}.btn {display: flex;height: 44px;background-color: #000;}.btn a {flex: 1;line-height: 44px;font-size: 14px;text-align: center;color: #b1b2be;}.btn a.active,.btn a:hover {color: #f3c258;background-color: rgba(255, 255, 255, 0.15);}/style /head bodydiv classboxdiv classpica href# classbannerimg src./images/banner01.jpeg alt海诺设计理念/aa href# classbannerimg src./images/banner02.jpeg alt季后赛宣传片/aa href# classbannerimg src./images/banner03.jpeg altKPL选秀招募/aa href# classbannerimg src./images/banner04.jpeg alt荣耀大话王/aa href# classbannerimg src./images/banner05.jpeg alt虔诚人物志/a/divdiv classbtna href# classactive海诺设计理念/aa href#季后赛宣传片/aa href#KPL选秀招募/aa href#荣耀大话王/aa href#虔诚人物志/a/div/divscript// 获取bannervar boxEl document.querySelector(.box);var picEl document.querySelector(.pic);var btnEl document.querySelector(.btn);var index 0;var activeBtn document.querySelector(.active);// 轮播图var bannerTimer exeBanner();// 按钮鼠标切换boxEl.onmouseover function (event) {// 暂停轮播clearInterval(bannerTimer);// 判断是否为按钮不是则返回if (event.target.parentElement ! btnEl ||event.target activeBtn) return;//切换按钮激活changeActive(event.target);// 切换对应的banner// 找到当前按钮的indexindex Array.from(btnEl.children).indexOf(activeBtn);picEl.style.transform translate(-${604*index}px, 0);}boxEl.onmouseleave function (event) {// 开始轮播bannerTimer exeBanner();}// 改变激活按钮元素function changeActive(activeEl) {activeBtn.classList.remove(active);activeBtn activeEl;activeBtn.classList.add(active);}// 执行轮播function exeBanner(params) {return setInterval(() {// banner图移动picEl.style.transform translate(-${604*index}px, 0);// 按钮切换changeActive(btnEl.children[index]);index;if (index picEl.children.length) {index 0;}}, 3000);}/script /body /html原版 !DOCTYPE html html langzh headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {margin: 0;padding: 0;}a {text-decoration: none;}.box {width: 604px;height: 342px;margin: 0 auto;overflow: hidden;}.pic {display: flex;position: relative;width: 100%;height: 298px;}.pic .banner {position: absolute;flex: 1;/* transition: all 2000ms ease; */}.btn {display: flex;height: 44px;background-color: #000;}.btn a {flex: 1;line-height: 44px;font-size: 14px;text-align: center;color: #b1b2be;}.btn a.active,.btn a:hover {color: #f3c258;background-color: rgba(255, 255, 255, 0.15);}/style /head bodydiv classboxdiv classpica href# classbannerimg src./images/banner01.jpeg alt海诺设计理念/aa href# classbannerimg src./images/banner02.jpeg alt季后赛宣传片/aa href# classbannerimg src./images/banner03.jpeg altKPL选秀招募/aa href# classbannerimg src./images/banner04.jpeg alt荣耀大话王/aa href# classbannerimg src./images/banner05.jpeg alt虔诚人物志/a/divdiv classbtna href# classactive海诺设计理念/aa href#季后赛宣传片/aa href#KPL选秀招募/aa href#荣耀大话王/aa href#虔诚人物志/a/div/divscript// 获取bannervar boxEl document.querySelector(.box);var picEl document.querySelector(.pic);var btnEl document.querySelector(.btn);var index 0;var lastIndex index;var activeBtn document.querySelector(.active);// 轮播图var bannerTimer exeBanner();// 按钮鼠标切换boxEl.onmouseover function (event) {// 暂停轮播clearInterval(bannerTimer);// 判断是否为按钮不是则返回if (event.target.parentElement ! btnEl ||event.target activeBtn) return;//切换按钮激活changeActive(event.target);// 切换对应的banner// 找到当前按钮的indexlastIndex index;index Array.from(btnEl.children).indexOf(activeBtn);bannerMove();;}boxEl.onmouseleave function (event) {// 开始轮播bannerTimer exeBanner();}// 改变激活按钮元素function changeActive(activeEl) {activeBtn.classList.remove(active);activeBtn activeEl;activeBtn.classList.add(active);}// 执行轮播function exeBanner(params) {return setInterval(() {// 切换轮播图bannerMove();// 切换按钮changeActive(btnEl.children[index]);lastIndex index;index;// 重置indexif (index picEl.children.length) {index 0;}}, 3000);}// 轮播图移动function bannerMove() {// 给上一张和下一张添加动画for (var i 0; i picEl.children.length; i) {if (i lastIndex || i index) {picEl.children[i].style.transition all 300ms ease;continue;}picEl.children[i].style.transition none;}// banner图移动if (index 0) {for (var i 0; i index; i) {picEl.children[i].style.left -100%;}}if (index 0) {for (var i 1; i picEl.children.length; i) {picEl.children[i].style.left 100%;}}picEl.children[index].style.left 0%;if (index picEl.children.length - 1) {for (var i index1; i picEl.children.length; i) {picEl.children[i].style.left 100%;}}}/script /body /html7.书籍购物车 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border-collapse: collapse;}thead {background-color: #f5f5f5;}th, td {border: 1px solid #aaa;padding: 8px 12px;text-align: center;}/style /head bodytabletheadtrth编号/thth书籍名称/thth出版日期/thth价格/thth购买数量/thth操作/th/tr/theadtbody/tbody/tableh2 classprice总价格: ¥span classprice-count0/span/h2script// 1.从服务器获取数据 ajax/fetchvar books [{id: 1,name: 《算法导论》,date: 2006-09,price: 85.00,count: 3},{id: 2,name: 《UNIX编程艺术》,date: 2006-02,price: 59.00,count: 2},{id: 3,name: 《编程珠玑》,date: 2008-10,price: 39.00,count: 5},{id: 4,name: 《代码大全》,date: 2006-03,price: 128.00,count: 8}]// 2.对数据展示// 到底通过html直接编写, 还是通过JavaScriptDOM操作创建元素// 1 对于固定的, 直接通过html编写(能通过html编写, 尽量通过html直接编写)// 2 对于哪些大量的数据, 有规律的数据, 可以通过JavaScript编写var tbodyEl document.querySelector(tbody)// 2.2. 动态添加tr以及内部数据for (var i 0; i books.length; i) {var trowEl document.createElement(tr)// 2.3. 放具体数据var book books[i]var bookKeys Object.keys(book)for (var m 0; m bookKeys.length; m) {var key bookKeys[m]var value book[key]var tdEl document.createElement(td)if (key price) {value ¥ value}tdEl.textContent valuetrowEl.append(tdEl)}// 2.4. 添加删除按钮var deleteTdEl document.createElement(td)var deleteBtnEl document.createElement(button)deleteBtnEl.textContent 删除deleteTdEl.append(deleteBtnEl)trowEl.append(deleteTdEl)// 2.5.监听删除按钮的点击deleteBtnEl.onclick function() {// 1.删除对应的trowvar deleteTRowEl this.parentElement.parentElementvar deleteTrIndex deleteTRowEl.sectionRowIndexdeleteTRowEl.remove()// 2.删除对应books中的数据books.splice(deleteTrIndex, 1)// 3.重新计算一次价格calcTotalPrice()}tbodyEl.append(trowEl)}// 3.计算总价格var priceCountEl document.querySelector(.price-count)calcTotalPrice()// 封装计算价格的函数function calcTotalPrice() {var totalPrice books.reduce(function(preValue, item) {return preValue item.count * item.price}, 0)priceCountEl.textContent totalPrice}/script/body /html