我是靠谱客的博主 缥缈小海豚，最近开发中收集的这篇文章主要介绍Web API 实用案例02-延迟函数setTimeout()定时器03-自动消失的广告案例效果展示04-递归函数05-利用递归实现setInterval06-js执行机制07-location对象08-5秒后跳转的页面效果展示09-location.searchtarget.htmllocation.hashlocation.reload()10-history对象11-我们需要一个轮播图效果展示12-本地存储使用13-自定义属性，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
01-window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window对象</title>
<style>
div {
height: 3000px;
}
</style>
</head>
<body>
<div>
</div>
<script>
//window可以省略
window.document.querySelector('div');
window.addEventListener('scroll', function() {
// alert(1)
})
// window.alert(2);
window.prompt;
console.log(window);
</script>
</body>
</html>
02-延迟函数setTimeout()定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>延迟函数setTimeout()定时器</title>
</head>
<body>
<button>解除定时器</button>
<script>
let btn = document.querySelector('button');
let timer = setTimeout(function() {
console.log(111);
}, 3000)
//仅仅执行一次
btn.addEventListener('click', function() {
clearTimeout(timer)
})
</script>
</body>
</html>
03-自动消失的广告案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<img src="images/ad.png" alt="">
<script>
let img = document.querySelector('img');
setTimeout(function() {
img.style.display = 'none';
}, 5000)
</script>
</body>
</html>
效果展示
04-递归函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 递归函数：自己调用自己就是递归函数
// 递归函数容易造成死递归，需要加个退出的条件
let num = 0;
function fn() {
num++;
console.log(11);;
//在函数里面，自己调用自己
if (num >= 100) {
return;
}
fn()
}
fn();
</script>
</body>
</html>
05-利用递归实现setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div');
//利用递归函数 模拟了setinterval
function fn() {
//获取当前时间
div.innerHTML = new Date().toLocaleString()
setTimeout(fn, 1000);
}
fn();
</script>
</body>
</html>
06-js执行机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.先执行 执行栈中的同步任务
// 2.异步任务放入任务队列中
// 3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
console.log(1);
setTimeout(function() {
console.log(2);
})
console.log(3);
// 输出结果 1 3 2
</script>
</body>
</html>
07-location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(location.href); // 得到url地址 可读写
// 给的地址是字符串，可以利用js的方式自动跳转页面
location.href = 'http://www.itcast.cn'
</script>
</body>
</html>
08-5秒后跳转的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<a href="http://www.itcast.cn">支付成功,<span>5</span>秒后跳转页面</a>
<script>
let a = document.querySelector('a');
let num = 5;
let timer = setInterval(function() {
num--;
a.innerHTML = `支付成功,<span>${num}</span>秒后跳转页面`
if (num === 0) {
clearInterval(timer);
// 0秒后自动跳转页面
location.href = 'http://www.itcast.cn'
}
}, 1000)
</script>
</body>
</html>
效果展示
09-location.search
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="target.html">
<input type="text" name="username">
<button>提交</button>
</form>
</body>
</html>
target.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 完整的地址是：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);
</script>
</body>
</html>
location.hash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#one">第一个</a>
<a href="#two">第二个</a>
<script>
console.log(location.hash); //#one #two
// location.hash 获取地址中的哈希值，即 # 后面的内容
</script>
</body>
</html>
location.reload()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>刷新</button>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
// location.reload() 是个方法，用来刷新页面 刷新的方法有本地缓存和强制刷新(直接从网上拉取更新最新内容)
// 参数为true,表示强制刷新，相当于ctrl+F5 默认参数是false,平时省略
location.reload(true)
})
</script>
</body>
</html>
10-history对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
let forward = document.querySelector('.forward')
let back = document.querySelector('.back')
forward.addEventListener('click', function() {
history.forward()
})
back.addEventListener('click', function() {
history.back()
})
</script>
</body>
</html>
11-我们需要一个轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<style>
.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;
}
</style>
</head>
<body>
<div class="box">
<!-- Swiper -->
<!-- swiper-container 是原有的不能删掉 可以再多加个名 -->
<div class="swiper-container one">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/b_01.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_02.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_03.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_04.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_05.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_06.jpg" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="box">
<!-- Swiper -->
<div class="swiper-container two">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/b_01.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_02.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_03.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_04.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_05.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/b_06.jpg" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<script src="js/swiper-bundle.min.js"></script>
<!-- 要放到插件的下面 -->
<!-- Initialize Swiper -->
<script>
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切换。
});
</script>
</body>
</html>
效果展示
12-本地存储使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 存储数据 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": "黑马程序员"
// }
</script>
</body>
</html>
13-自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box" data-index="0" data-name="andy"></div>
<script>
// 设置自定义属性 规范写法 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);
</script>
</body>
</html>
最后
以上就是缥缈小海豚为你收集整理的Web API 实用案例02-延迟函数setTimeout()定时器03-自动消失的广告案例效果展示04-递归函数05-利用递归实现setInterval06-js执行机制07-location对象08-5秒后跳转的页面效果展示09-location.searchtarget.htmllocation.hashlocation.reload()10-history对象11-我们需要一个轮播图效果展示12-本地存储使用13-自定义属性的全部内容，希望文章能够帮你解决Web API 实用案例02-延迟函数setTimeout()定时器03-自动消失的广告案例效果展示04-递归函数05-利用递归实现setInterval06-js执行机制07-location对象08-5秒后跳转的页面效果展示09-location.searchtarget.htmllocation.hashlocation.reload()10-history对象11-我们需要一个轮播图效果展示12-本地存储使用13-自定义属性所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复