1.变量声明
有了变量先使用const,如果发现它后面是要修改的,在改为let
cost里面存地址,建议数组和对象使用const来声明 存储应用类型（数组）在栈内存地址，地址不变可修改值 可以修改，基本类型不能修改
webapi作用和分类
WEB APIS：操作网页文档或者浏览器的接口（方法）
DOM：操作文档接口
BOM：操作浏览器的接口
DOM树
将html文档以树状结构直观的表现出来
作用文档树直观的体现了标签与标签之间的关系
标签对应元素节点
dom树保留节点与节点关系
获取DOM元素
操作谁，先获取谁
语法：document.querySelector('css选择器') 获取单个元素
<!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">123</div>
<div class="box1">456</div>
<p id="nav"></p>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<script>
// 选择匹配的第一个元素 document.querySelector
// const box (变量名可更改)=document.querySelector('div')选择器不可修改
const box=document.querySelector('.box')
console.log(box);
const nav=document.querySelector('#nav')
console.log(nav);
/* //获取第一个小li
const li =document.querySelector('ul li:first-child')
console.log(li); */
//获取多个元素 document.querySelectorAll()
//获取所有的小li
const li=document.querySelectorAll('ul li')
console.log(li);
</script>
</body>
</html>获取多个元素 document.querySelectorAll()
伪数组:具有索引值,具有length,但是不具有数组的方法(push等..)
伪数组不能直接进行操作,操作伪数组先进行遍历
其他方式获取DOM元素方法
特殊情况
专门获取body的方法
document.body
专门获取html的方法
document.documentElement
修改对象内容
<!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">我是文字的内容</div>
<script>
//1. 获取元素
const box=document.querySelector('.box')
/* // 2.修改文字内容 对象.innerText 不识别标签
console.log(box.innerText)//获取文字内容
box.innerText='我是一个盒子' */
// 3.innerHTML可以获取文本以及解析标签
console.log(box.innerHTML);
box.innerHTML='<h2>更换文字</h2>'
</script>
</body>
</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>
<div class="wrapper">
<strong>年会抽奖</strong>
<h1>一等奖：<span id="one">???</span></h1>
<h3>二等奖：<span id="two">???</span></h3>
<h5>三等奖：<span id="three">???</span></h5>
</div>
<script>
// 一等奖
// 1.声明数组
const personArr=['张三','李四','王五','刘七','常八']
// 随机获取索引值
const random1=Math.floor(Math.random()*personArr.length)
// 获取元素
const one= document.querySelector('#one')
one.innerHTML=personArr[random1]
//删除数组中索引值,不会重复出现
personArr.splice(random1,1)
// 二等奖
// 随机获取索引值
const random2=Math.floor(Math.random()*personArr.length)
// 获取元素
const two= document.querySelector('#two')
two.innerHTML=personArr[random2]
//删除数组中索引值,不会重复出现
personArr.splice(random2,1)
</script>
</body>
</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>
<!-- 常见的属性比如: href title src 等 -->
<img src="./images/1.webp" alt="">
<script>
// 1.获取图片元素
const img=document.querySelector('img')
// 2.修改属性 对象.属性=值
img.src='./images/2.webp'
// 获取属性
img.src
</script>
</body>
</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>
<img src="./images/1.webp" alt="">
<script>
// 思路 随机1-6 通过数字找到对应的图片
// 获取随机数1-6
const random=Math.floor(Math.random()*7)
// 获取元素
const img=document.querySelector('img')
// 修改元素属性
img.src=`./images/${random}.webp`
// // 获取m-n的随机整数
// function getRandom(M,N){
// return Math.floor(Math.random()*(M-N+1))+N
// }
// // 获取图片对象
// const img =document.querySelector('img')
// // 随机得到序号
// const random=getRandom(1,6)
// // 3.更换路径
// img.src=`./images/${random}.webp`
</script>
</body>
</html>通过style属性修改
<!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>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="box"></div>
<script>
// 1.获取元素
const box = document.querySelector(".box");
// 2.修改style样式 元素.style.样式属性='值'
box.style.width = "200px";
box.style.backgroundColor = "blue";//生成的是行内样式,权重高
box.style.borderTop = "red";
</script>
</body>
</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>
<style>
/* body{
background-image: url(./images/desktop_1.jpg);
} */
</style>
<script>
// console.log(
// document.body);
// function getRandom(M,N){
// return Math.floor(Math.random()*(M-N+1))+N
// }
// const random= getRandom(1,10)
// document.body.style.backgroundImage=`url(./images/desktop_${random}.jpg)`
function getColor(){
return Math.floor(Math.random()*256)
}
console.log(getColor());
let r= getColor()
let g= getColor()
let b= getColor()
// 获取元素
document.body.style.backgroundColor=`rgb(${r}, ${g},${b})`
</script>
</body>
</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>
<style>
.nav{
color: red;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="nav">123</div>
<script>
// 获取元素
const div=document.querySelector('div')
div.className='nav .box' //如果之前有类名先写之前的类名
// 通过给元素添加类名
// 如果修改元素属性是class时,必须写成className
// 这种方法会覆盖之前的样式
</script>
</body>
</html>
通过classList修改样式
<!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>
<style>
.c1{
width: 200px;
height: 200px;
background-color: pink;
}
.c2{
border: 1px solid #000;
color: red;
}
</style>
<div class="c1">123</div>
<!-- 获取元素 -->
<script>
const div=document.querySelector('.c1')
// 通过classList修改 不替换之前的类名
// 追加类 元素.classList.add('') 类名不加点并且是字符串
div.classList.add('c2');
//删除类
// 元素.classList.remove('c2')
//切换类 有就删除,没有就加上
div.classList.toggle('c1')
//contains 检测是否包含某个元素
//语法 :元素.classList.contains('类名')
</script>
</body>
</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>轮播图点击切换</title>
<style>
* {
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>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 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)' },
]
// 随机获取一组对象
const random=Math.floor(Math.random()* sliderData.length)
// console.log(sliderData[random]);//生成一组对象
// 获取img 元素
const img=document.querySelector('.slider-wrapper img')
// 修改img元素 修改常用属性
img.src=sliderData[random].url
// 获取p元素
const p=document.querySelector('.slider-footer p')
// 修改p元素 修改文档
p.innerHTML=sliderData[random].title
// 获取背景色
const footer=document.querySelector('.slider-footer')
// 修改背景颜色 修改style属性
footer.style.backgroundColor=sliderData[random].color
// 获取小li
const li =document.querySelector(`.slider-indicator li:nth-child(${random+1})`)
//第一个小li的索引号为0
// 给随机获取的li添加active属性
li.classList.add('active')
</script>
</body>
</html>修改表单属性
获取:DOM对象.属性名
设置:DOM对象.属性名= 新值
<!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 disabled="disabled"></button>
<input type="text" value="电脑">
<input type="checkbox" name="" id="" checked>
<script>
// /*
// 1.获取元素
const inp=document.querySelector('input')
// 2.获取值
console.log(inp.value);
inp.value='买电脑1111'
inp.type='password' //修改type属性变成密码框
// */
// 获取元素
const input =document.querySelector('input' )
input.checked=true //只接受布尔值
// console.log(input.checked);
// //获取元素
const button=document.querySelector('button') //默认为false 禁用吗
button.disabled=true //禁用
// console.log(ipt.disabled);//检测是否禁用
</script>
</body>
</html>自定义属性
data-自定义属性 标签上一律以data开头
在DOM对象上一律以dataset对象方式获取
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<!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>
<!-- data-自定义属性 标签上一律以data开头-->
<!-- 在DOM对象上一律以dataset对象方式获取 -->
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
// 获取元素
const one=document.querySelector('div')
one.dataset.spm=7
// console.log(one.dataset); //获取的所有的data属性
console.log(one.dataset.spm);//不知道
</script>
</body>
</html>定时器-间歇函数
开启定时器
创建定时器
setInterval(调用函数,相隔时间)
setInterval(function(){
console.log('一秒执行一次');
},1000)
<script>
/*创建定时器
// setInterval(调用函数,相隔时间)
setInterval(function(){
console.log('一秒执行一次');
},1000)
*/
// 函数调用
function fn(){
console.log('一秒执行一次');
}
// setInterval(调用函数,相隔时间) 函数名不要加小括号 定时器返回的是一个数字
setInterval(fn,1000)
// setInterval('fn()',1000)
</script>关闭定时器
关闭定时器
let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)
<!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 变量名=setInterval(函数,间隔时间)
clearInterval(变量名) */
function fn1(){
console.log('1');
}
let n1=setInterval(fn1,1000)
function fn2(){
console.log('2');
}
let n2=setInterval(fn2,2000)
// 关闭定时器
clearInterval(n1)
// setInterval(fn,1000)
// console.log(n);
</script>
</body>
</html>每隔一秒加一案例
<script>
// 开启定时器
let num =0
function fun( ){
num++;
console.log(num);
}
setInterval(fun,1000)
</script>回调函数
<script>
//函数也是个数据,也是个值
//如果一个函数给别人当参数,就叫回调函数
function f1 (n){
console.log(n);
}
f1(function(){console.log('123');})
setInterval(function(){
console.log('123');
},1000)
</script>用户倒计时案例
轮播图定时器版
<!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>轮播图定时器版</title>
<style>
* {
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>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 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=0//i做+1
// 获取元素
const img=document.querySelector('.slider-wrapper img ')
const p=document.querySelector('.slider-footer p ')
const footer=document.querySelector('.slider-footer')
console.log(sliderData[i]);//获得的是一组对象
// 开启定时器
setInterval(function (){
i++
//当i大于数组长度时重新开始
if(i>=sliderData.length){
i=0
}
// 修改img
img.src=sliderData[i].url //对象里的url
// 修改p
p.innerHTML=sliderData[i].title
// 修改背景颜色
footer.style.backgroundColor = sliderData[i].color
// 删除li的active属性
document.querySelector('.slider-indicator .active').classList.remove('active')
//增加li的active属性
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
},1000)
</script>
</body>
</html>时钟案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 - 网页时钟</title>
<style>
* {
box-sizing: border-box;
}
.clock {
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
transform: rotate(270deg);
}
.ss {
background-image: url(./images/second.png);
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hh" id="h"></div>
<div class="mm" id="m"></div>
<div class="ss" id="s"></div>
</div>
<script>
/*
知识点：
1. 创建日期对象 获取当前时间
2. 多次定时器，重复获取时间，让指针动起来
*/
// // 获取元素
const num = document.querySelector('.ss');
// 开启定时器
let i=0
setInterval(function(){
// 修改秒针旋转一秒加6度
i+=6
if(i>360){
i=0
}
num.style.transform=`rotate(${i}deg)`;
},1000)
</script>
</body>
</html>总结
2652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
