01-window对象
<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.document.querySelector('div');
window.addEventListener('scroll', function() {
})
window.prompt;
console.log(window);
script>
body>
html>
02-延迟函数setTimeout()定时器
<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-自动消失的广告案例
<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>Documenttitle>
<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-递归函数
<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>Documenttitle>
head>
<body>
<script>
let num = 0;
function fn() {
num++;
console.log(11);;
if (num >= 100) {
return;
}
fn()
}
fn();
script>
body>
html>
05-利用递归实现setInterval
<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>Documenttitle>
head>
<body>
<div>div>
<script>
let div = document.querySelector('div');
function fn() {
div.innerHTML = new Date().toLocaleString()
setTimeout(fn, 1000);
}
fn();
script>
body>
html>
06-js执行机制
<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>Documenttitle>
head>
<body>
<script>
console.log(1);
setTimeout(function() {
console.log(2);
})
console.log(3);
script>
body>
html>
07-location对象
<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>Documenttitle>
head>
<body>
<script>
console.log(location.href);
location.href = 'http://www.itcast.cn'
script>
body>
html>
08-5秒后跳转的页面
<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>Documenttitle>
<style>
span {
color: red;
}
style>
head>
<body>
<a href="http://www.itcast.cn">支付成功,<span>5span>秒后跳转页面a>
<script>
let a = document.querySelector('a');
let num = 5;
let timer = setInterval(function() {
num--;
a.innerHTML = `支付成功,${num}秒后跳转页面`
if (num === 0) {
clearInterval(timer);
location.href = 'http://www.itcast.cn'
}
}, 1000)
script>
body>
html>
效果展示
09-location.search
<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>Documenttitle>
head>
<body>
<form action="target.html">
<input type="text" name="username">
<button>提交button>
form>
body>
html>
target.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>Documenttitle>
head>
<body>
<script>
console.log(location.search);
script>
body>
html>
location.hash
<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>Documenttitle>
head>
<body>
<a href="#one">第一个a>
<a href="#two">第二个a>
<script>
console.log(location.hash);
script>
body>
html>
location.reload()
<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>Documenttitle>
head>
<body>
<button>刷新button>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
location.reload(true)
})
script>
body>
html>
10-history对象
<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>Documenttitle>
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-我们需要一个轮播图
<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>Documenttitle>
<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;
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">
<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>
<div class="swiper-pagination">div>
<div class="swiper-button-next">div>
<div class="swiper-button-prev">div>
div>
div>
<div class="box">
<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>
<div class="swiper-pagination">div>
<div class="swiper-button-next">div>
<div class="swiper-button-prev">div>
div>
div>
<script src="js/swiper-bundle.min.js">script>
<script>
var swiper = new Swiper('.one', {
slidesPerView: 1,
autoplay: {
delay: 2000,
stopOnLastSlide: true,
disableOnInteraction: false,
},
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
keyboard: true,
});
var swiper = new Swiper('.two', {
slidesPerView: 1,
autoplay: {
delay: 5000,
stopOnLastSlide: true,
disableOnInteraction: false,
},
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
keyboard: true,
});
script>
body>
html>
效果展示
12-本地存储使用
<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>Documenttitle>
head>
<body>
<script>
let obj = {
uname: '刘德华',
age: 18,
address: '黑马程序员'
}
localStorage.setItem('obj', JSON.stringify(obj));
console.log(JSON.parse(localStorage.getItem('obj')));
let object = {
age: 18
}
localStorage.setItem('key', JSON.stringify(object))
console.log(JSON.parse(localStorage.getItem('key')))
script>
body>
html>
13-自定义属性
<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>Documenttitle>
head>
<body>
<div class="box" data-index="0" data-name="andy">div>
<script>
let box = document.querySelector('.box');
box.setAttribute('myid', 10)
console.log(box.getAttribute('myid'));
console.log(box.dataset);
console.log(box.dataset.index);
script>
body>
html>
