Web|Web API 实用案例前端|javascript|html5|API

01-window对象

window对象 - 锐客网 > div { height: 3000px; } > //window可以省略 window.document.querySelector('div'); window.addEventListener('scroll', function() { // alert(1) }) // window.alert(2); window.prompt; console.log(window);

02-延迟函数setTimeout()定时器

延迟函数setTimeout()定时器 - 锐客网 > let btn = document.querySelector('button'); let timer = setTimeout(function() { console.log(111); }, 3000) //仅仅执行一次 btn.addEventListener('click', function() { clearTimeout(timer) })

03-自动消失的广告案例

Document - 锐客网 > img { position: absolute; left: 0; bottom: 0; } 文章图片 > let img = document.querySelector('img'); setTimeout(function() { img.style.display = 'none'; }, 5000)

效果展示

文章图片

04-递归函数

Document - 锐客网 > // 递归函数：自己调用自己就是递归函数 // 递归函数容易造成死递归，需要加个退出的条件 let num = 0; function fn() { num++; console.log(11); ; //在函数里面，自己调用自己 if (num >= 100) { return; } fn() } fn();

05-利用递归实现setInterval

Document - 锐客网 > let div = document.querySelector('div'); //利用递归函数模拟了setinterval function fn() { //获取当前时间 div.innerHTML = new Date().toLocaleString() setTimeout(fn, 1000); } fn();

06-js执行机制

Document - 锐客网 > // 1.先执行执行栈中的同步任务 // 2.异步任务放入任务队列中 // 3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行 console.log(1); setTimeout(function() { console.log(2); }) console.log(3); // 输出结果 1 3 2

07-location对象

Document - 锐客网 > console.log(location.href); // 得到url地址可读写 // 给的地址是字符串，可以利用js的方式自动跳转页面 location.href = 'http://www.itcast.cn'

08-5秒后跳转的页面

Document - 锐客网 > span { color: red; } 支付成功,>5秒后跳转页面 > let a = document.querySelector('a'); let num = 5; let timer = setInterval(function() { num--; a.innerHTML = `支付成功,${num}秒后跳转页面` if (num === 0) { clearInterval(timer); // 0秒后自动跳转页面 location.href = 'http://www.itcast.cn' }}, 1000)

效果展示

文章图片

09-location.search

Document - 锐客网

target.html

Document - 锐客网 > // 完整的地址是：file:///D:/VScode%20project/%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98/%E6%9C%80%E6%96%B0Web%20APIs/%E7%AC%AC%E5%85%AD%E5%A4%A9/target.html?username=abc //location.search 可以得到？后面的内容：username=abc // location.href 可以得到完整的地址 // location.hash 获取地址中的哈希值，即 # 后面的内容 console.log(location.search);

location.hash

Document - 锐客网第一个第二个 > console.log(location.hash); //#one #two // location.hash 获取地址中的哈希值，即 # 后面的内容

location.reload()

Document - 锐客网 > let btn = document.querySelector('button'); btn.addEventListener('click', function() { // location.reload() 是个方法，用来刷新页面刷新的方法有本地缓存和强制刷新(直接从网上拉取更新最新内容) // 参数为true,表示强制刷新，相当于ctrl+F5 默认参数是false,平时省略 location.reload(true) })

10-history对象

Document - 锐客网 > let forward = document.querySelector('.forward') let back = document.querySelector('.back') forward.addEventListener('click', function() { history.forward() }) back.addEventListener('click', function() { history.back() })

11-我们需要一个轮播图

Document - 锐客网 > .box { width: 600px; height: 350px; background-color: pink; margin: 100px auto; }html, body { position: relative; height: 100%; }body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; }.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }.swiper-slide img { width: 100%; height: 350px; }.swiper-pagination-bullet { width: 12px; height: 12px; }.swiper-pagination-bullet-active { color: #fff; } 文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片 src="https://www.it610.com/article/js/swiper-bundle.min.js">> var swiper = new Swiper('.one', { slidesPerView: 1, // 自动播放 autoplay: { delay: 2000, //2秒切换一次 stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 disableOnInteraction: false, //用户操作(拖拉)swiper之后，是否禁止autoplay。默认为true：停止。 }, // 小红色的背景是30px 可去掉 spaceBetween: 30, // 是否循环播放 false为不循环 loop: true, pagination: { // 小圆点 el: '.swiper-pagination', // 是否可点击 true为可点击 false为不可点击 clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, keyboard: true, //设置开启键盘来控制Swiper切换。 //设为true时，能使用键盘的方向键控制slide切换。 }); var swiper = new Swiper('.two', { slidesPerView: 1, // 自动播放 autoplay: { delay: 5000, //2秒切换一次 stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 disableOnInteraction: false, //用户操作(拖拉)swiper之后，是否禁止autoplay。默认为true：停止。 }, // 小红色的背景是30px 可去掉 spaceBetween: 30, // 是否循环播放 false为不循环 loop: true, pagination: { // 小圆点 el: '.swiper-pagination', // 是否可点击 true为可点击 false为不可点击 clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, keyboard: true, //设置开启键盘来控制Swiper切换。 //设为true时，能使用键盘的方向键控制slide切换。 });

效果展示 【Web|Web API 实用案例】
12-本地存储使用

Document - 锐客网 > // 存储数据 localStorage.setItem('键','值') // localStorage.setItem('uname', 'pink老师') // localStorage.setItem('age', '18')// 获取数据localStorage.getItem('键') //console.log(localStorage.getItem('uname')); // 删除数据 localStorage.removeItem('键') // localStorage.removeItem('uname'); // 1.存储复杂数据类型(引用数据类型)// 复杂数据类型一定要转换为JSON字符串再进行存储 let obj = { uname: '刘德华', age: 18, address: '黑马程序员' } // console.log(JSON.stringify(obj)); localStorage.setItem('obj', JSON.stringify(obj)); // 2.获取复杂数据类型 JSON.parce() 将JSON字符串转换为对象 //console.log(localStorage.getItem('obj')); //localStorage.getItem('obj')是个字符串 // console.log(typeof(localStorage.getItem('obj'))); //string console.log(JSON.parse(localStorage.getItem('obj'))); let object = { age: 18 } //本地存储只能存储字符串,所以需要转换转换为JSON字符串 localStorage.setItem('key', JSON.stringify(object)) // 获取过来的值是字符串,不是对象了没有办法直接使用,因此首先需要把字符串转换为对象 // JSON.parse() console.log(JSON.parse(localStorage.getItem('key')))//JSON 字符串属性和值都是双引号包含 // let obj = { //"uname": "刘德华", //"age": "18", //"address": "黑马程序员" // }

13-自定义属性

Document - 锐客网 > // 设置自定义属性规范写法 data-开头 let box = document.querySelector('.box'); box.setAttribute('myid', 10) // 获取自定义属性 console.log(box.getAttribute('myid')); console.log(box.dataset); // dataset是一个对象 // 获取自定义属性的值利用对象.属性的方式获取 console.log(box.dataset.index);