淮南学校网站建设电话,godaddy托管 wordpress,宿迁市建设局网站怎么投诉,四川省住房和城乡建设厅官网下载• 定时器函数介绍
定时器函数在开发中的使用场景
网页中经常会需要一种功能#xff1a;每隔一段时间需要自动执行一段代码#xff0c;不需要我们手动去触发例如#xff1a;网页中的倒计时要实现这种需求#xff0c;需要定时器函数定时器函数有两种#xff0c;今天我先讲…• 定时器函数介绍
定时器函数在开发中的使用场景
网页中经常会需要一种功能每隔一段时间需要自动执行一段代码不需要我们手动去触发例如网页中的倒计时要实现这种需求需要定时器函数定时器函数有两种今天我先讲间歇函数 • 定时器函数基本使用
定时器函数可以开启和关闭定时器 开启定时器 作用每隔一段时间调用这个函数 间隔时间单位是毫秒 关闭定时器 案例
案例1阅读注册协议
需求按钮60秒之后才可以使用 分析 ①开始先把按钮禁用disabled 属性 ②一定要获取元素 ③函数内处理逻辑
秒数开始减减按钮里面的文字跟着一起变化如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytextarea name id cols30 rows10用户注册协议欢迎注册成为京东用户在您注册过程中您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议请您务必仔细阅读、充分理解协议中的条款内容后再点击同意尤其是以粗体或下划线标识的条款因为这些条款可能会明确您应履行的义务或对您的权利有所限制。【请您注意】如果您不同意以下协议全部或任何条款约定请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息阅读并点击同意上述协议且完成全部注册流程后即表示您已充分阅读、理解并接受协议的全部内容并表明您同意我们可以依据协议内容来处理您的个人信息并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方详情查看/textareabrbutton classbtn disabled我已经阅读用户协议(60)/buttonscript//1 获取按钮对象const btn document.querySelector(.btn)//2 开始定时器let i 5let itv setInterval(function () {btn.innerHTML 我已经阅读用户协议(${--i})// 3 停止定时器if (i 0) {clearInterval(itv)btn.disabled false}}, 1000)/script
/body/html
案例2轮播图定时变换图片
需求每隔一秒钟切换一个图片 分析 ①准备一个数组对象里面包含详细信息素材包含 ②获取元素 ③设置定时器函数 设置一个变量 找到变量对应的对象 更改图片、文字信息 激活小圆点移除上一个高亮的类名当前变量对应的小圆点添加类 ④处理图片自动复原从头播放放到变量后面紧挨 如果图片播放到最后一张 就是大于等于数组的长度 则把变量重置为0 !DOCTYPE html
html langzh_CNheadmeta 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/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const sliderData [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: ./images/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider05.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider06.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider07.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]//开始定时器 let i 0setInterval(function () {//2 获取图片对象const img document.querySelector(.slider-wrapper img)// 修改对象的src属性 图片对象的src属性 数组随机对象中的url属性img.src sliderData[i].url//3 获取p对象const p document.querySelector(.slider-footer p)p.innerHTML sliderData[i].title//4 获取li对象并移除其他的active属性循环方式// const list document.querySelectorAll(.slider-indicator li)// for(let i 0;ilist.length;i){// list[i].classList.remove(active)// }//排他思想的方式document.querySelector(.slider-indicator .active).classList.remove(active)const li document.querySelector(.slider-indicator li:nth-child(${i 1}))li.classList.add(active)iconsole.log(i)if(i 8){//如果i8时最后一张图片将i重置为0i 0}}, 1500)// //1 生成一个随机数// let random parseInt(Math.random()*sliderData.length)// //2 获取图片对象// const img document.querySelector(.slider-wrapper img)// // 修改对象的src属性 图片对象的src属性 数组随机对象中的url属性// img.src sliderData[random].url// //3 获取p对象// const p document.querySelector(.slider-footer p)// p.innerHTML sliderData[random].title// //4 获取li对象并修改css// const li document.querySelector(.slider-indicator li:nth-child(${random1}))// li.classList.add(active)/script
/body/html
案例3 电子时钟
要求在网页上显示一个时钟秒针分针。时针可以旋转 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.main {position: relative;width: 600px;height: 600px;margin: 100px auto;background: url(./images/clock.jpg) no-repeat;}.hour,.minute,.second {width: 30px;height: 600px;}.hour {position: absolute;left: 50%;margin-left: -15px;background: url(./images/hour.png);}.minute {position: absolute;left: 50%;margin-left: -15px;background: url(./images/minute.png);transform: rotate(270deg);}.second {position: absolute;left: 50%;margin-left: -15px;background: url(./images/second.png);transform: rotate(60deg);}.rotate6 {transform: rotate(6deg);}/style
/headbodydiv classmaindiv classhour/divdiv classminute/divdiv classsecond/div/divscriptlet deg 0let conut 0//定时器var mynow new Date();//默认的获取的是当前时间//通过调用日期对象的方法来重新获取当前的日期时间let hourTime mynow.getHours();//获取小时let minuteTime mynow.getMinutes();//获取分钟let secondTime mynow.getSeconds();//获取秒const second document.querySelector(.second)second.style.transform rotate(${secondTime * 6}deg)const minute document.querySelector(.minute)minute.style.transform rotate(${minuteTime * 6}deg)const hour document.querySelector(.hour)hour.style.transform rotate(${hourTime * 30}deg)setInterval(function () {//1 每过一秒钟秒针旋转6度// 1.1获取秒针元素deg 6const second document.querySelector(.second)second.style.transform rotate(${deg}deg)if (deg 360) {deg 0//2 秒针转一圈分针转6度const minute document.querySelector(.minute)conutif (minuteTime 60) {minuteTime 1}else{minuteTime}minute.style.transform rotate(${minuteTime * 6}deg)}// 3时针转动if (minuteTime 60) {if (hourTime 12) {hourTime 1} else {hourTime}const hour document.querySelector(.hour)hour.style.transform rotate(${hourTime * 30}deg)}}, 1000)/script
/body/html
