当前位置：网站首页>js 基础学习笔记
js 基础学习笔记
2022-08-04 05:26:00 【Drizzlejj】
js do-while循环结构
<!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>
<script>
var n = 3;
while (n > 0){
console.log('执行它')
n--
}
console.log('最后执行')
var b = 3;
do{console.log('执行它')
b--}
while(b > 0)
console.log('最后执行')
// dowhile 条件不满足时，循环会 执行一次
var a = 0;
do{console.log('执行它')
a--}
while (a > 0)
console.log('最后执行')
var d = 0;
while(d > 0){console.log('执行它')
d--}
console.log('最后执行')
</script>
</head>
<body>
</body>
</html>js for 循环
<!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>
<script>
for(var i =0; i < 3; i++) {
console.log(i)
console.log('执行它')
}
// 循环结束之后执行的代码
console.log('最后执行')
// 输出 1~100 之间所有 3 的倍数
for(var a = 1;a <= 100; a++) {
if( a % 3 === 0){
console.log(a)
}
}
</script>
</head>
<body>
</body>
</html>js join方法
<!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>
<script>
// join() 将数组用连接符连接成为一个字符串
// 返回值：连接好的字符串
var arr = [2021, 12, '01', 18, '00']
var res = arr.join('-')
document.write(res)
</script>
</head>
<body>
</body>
</html>js switch条件语句
<!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>
<script>
var foot = 37
switch(foot){
case 37:
console.log('满足37')
break
case 40:
console.log('满足40')
break
case 42:
console.log('满足42')
break
default:
console.log('什么都没有')
}
// 计算一年中的第几天
// 准备三个变量，分别表示 年 月 日
var year = 2009
var month = 1
var data = 15
// 准备一个变量接受统计结果
var num = 0
// 利用 switch穿透效果叠加月份信息
switch (month){
case 12:num += 30;
case 11:num += 31;
case 10:num += 30;
case 9:num += 31;
case 8:num += 31;
case 7:num += 30;
case 6:num += 31;
case 5:num += 30;
case 4:num += 31;
case 3:
if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0){num += 29}
else{num += 28}
case 2:num += 31;
case 1:console.log(num += data)
}
</script>
</head>
<body>
<div>
<img src="./img/switch.png" alt="">
</div>
</body>
</html>js while 循环
<!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>
<script>
//定义初始变量n
var n = 0
//条件判断 n < 总数
while (n < 3){
//一段重复的代码
console.log('走一个石板')
//改变初始值
n++
}
//后续代码
console.log('继续走后面的路')
// 求 10 的阶乘
// 准备变量接受阶乘的结果
var total = 1
// 开始：10
var num = 10
// 结束 >= 1
while (num >= 1){
total *= num
num--
}
console.log(total)
</script>
</head>
<body>
</body>
</html>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>
<script>
/*
斐波那契数列
数列：1 1 2 3 5 8 13 21 34 55
规则：
第一位和第二位必然是1
第三位开始每一位是前两位的和
需求：求数列第n位是多少
*/
function fn(n){
if(n === 1 || n === 2){
return 1
}
return fn(n-1) + fn(n-2)
}
console.log(fn(6))
</script>
</head>
<body>
<div>
<img src="./img/jszyy.png" alt="作用域" title="作用域">
</div>
</body>
</html>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>
<script>
/*
语法：setInterval(函数，时间）
函数：每次要执行的内容
时间：单位是毫秒
*/
var timer1 = setInterval(function(){
document.write('执行一次')
},1000)
/*
语法：setTimeout（函数，时间）
函数：时间到达执行的内容
时间：单位是毫秒
*/
var timer2 = setTimeout(function(){
document.write('延时执行')
},3000)
// 定时器的返回值，返回的是页面上第几个定时器
console.log('timer1:',timer1)
console.log('timer2:',timer2)
// 关闭定时器
// 语法一：clearInterval（要关闭的定时器返回值）
// 语法二：clearTimeout（要关闭的定时器返回值）
clearTimeout(1)
</script>
</head>
<body>
<section>
<!--
间隔定时器
按照指定周期（毫秒）去执行指定的代码
延时定时器
在固定的时间（毫秒）后指定一次代码
-->
<img src="./img/zjdsq.png" alt="">
</section>
</body>
</html>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>
<script>
// 准备一个空对象
var obj = { };
// 增加一些成员
obj.name = '孙悟空';
obj.age = '1w'
obj.gender = '雄'
console.log(obj)
// 删除一个键值对
delete obj['gender'] // delete obj.gender
console.log(obj)
// 修改一个键值对
obj.gender = 'man'
obj['age'] = '500'
console.log(obj)
// 查询一个键值对
console.log(obj['age'])
console.log(obj.age)
</script>
</head>
<body>
<div>
<img src="./img/jsdx.png" alt="js对象总结" title="js对象总结">
</div>
</body>
</html>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>
// 字面量方式创建对象
var obj = {
name:'Jack',
age:'18',
sayHi: function(){console.log('hello world')}
}
// 如果要创建第二个对象
var obj2 = {
name:'Rose',
age:'21',
sayHi:function(){console.log('hello world!')}
}
// 内置构造函数创建对象
var obj_1 = new Object()
obj_1.name = 'Jack'
obj_1.age = '18'
obj_1.sayHi = function(){console.log('hello world!!')}
// 工厂函数创建对象：制造一个工厂函数 -> 使用工厂函数去创建对象
// 创建工厂函数
function createObj(name, age){
// 手动创建一个对象
var obj_2 = {}
// 手动向里面添加属性
obj_2.name = name
obj_2.age = age
obj_2.sayHi = function(){console.log('hello world!!!')}
// 手动返回这个对象
return obj_2
}
// 使用工厂函数去创建对象
var obj_2_1 = createObj('jack', 18)
var obj_2_2 = createObj('bob', 21)
// console.log(obj_2_1, obj_2_2)
// 制造一个自定义构造函数
// 制造函数会自动创建对象，自动返回这个对象
// 我们只需要手动向里面添加内容就可以了
function createObj_1(name, age){
// 自动创建对象
// 手动向对象里面添加成员
// 这里的 this 指向当前实例（new 前面的变量）
this.name = name
this.age = age
this.sayHi = function(){console.log('hello world!!!')}
// 自动返回对象
}
// 使用自定义构造函数去创建对象，
// 构造函数在使用的时候需要和 new 关键字连用
// 如果不连用，那么没有意义
// 第一次调用 createObj_1 的时候，和 new 关键字连用了
// 我们 createObj_1 里面的 this 指向了 obj_3
// 函数内部的代码在执行的时候，就是在向 obj_3 添加了 name age 和 sayHi 三个成员
var obj_3 = new createObj_1('jack', 18)
// 第二次调用 createObj_1 的时候，和 new 关键字连用了
// 我们 createObj_1 里面的 this 指向了 obj_4
// 函数内部的代码在执行的时候，就是在向 obj_4 添加了 name age 和 sayHi 三个成员
var obj_4 = new createObj_1('rose',19)
console.log(obj_3, obj_4)
</script>
<!--
核心：
+找到一个机器，能批量生产对象
+生产出来的对象，每一个对象都有自己的属性和方法
+每一个对象可能类似，但是内容不太一样
=>构造函数
=>可以批量生产对象
=>可以向函数一样传递参数，可以给每一个对象添加一些不同的内容
=>当你需要完成一个功能的时候，我们先制造一个构造函数
->利用构造函数去创建一个可以完成任务的对象
->依赖这个对象完成功能
这个“机器”（构造函数）要生产有属性有方法的合理的对象
=>机器：就是构造函数
=>属性：直接写在构造函数体内
=>方法：写在构造函数的原型上
-->
</body>
</html>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>
/*
构造函数的不合理
+ 当你在构造函数体内书写方法的时候
=>你需要向对象上添加方法的时候
=>只要创建一次对象（new 一次）就会有一个函数在占用空间
=>创建100次对象，会有100个一模一样的函数出现
+ 100个函数一模一样
=>但是其实里面有99个是重复的，没有必要存在
*/
// 准备一个构造函数
function Person(name, age){
this.name = name
this.age = age
this.sayHi = function(){console.log('hello world')}
}
// 创建对象
var p1 = new Person('jack', 18)
var p2 = new Person('rose',19)
console.log(p1,p2)
// 看一下是不是真的两个对象
console.log(p1 == p2) // false 确实是两个对象
// 调用两个对象的 sayHi方法
p1.sayHi()
p2.sayHi()
// 两个对象里面的函数
console.log(p1.sayHi)
console.log(p2.sayHi)
console.log(p1.sayHi == p2.sayHi) // faLse 是两个函数
/*
var p1 = new Person('Jack', 18)
var p2 = new Person('Rose', 19)
p1 第一次执行 Person 函数
=>会吧函数内部的 this 指向p1
=>会吧函数体内的代码全部执行一遍
=>向 p1 上添加 name 属性
=>向 p1 上添加 age 属性
=>向 p1 上添加 sayHi 方法，会创建一个函数出来
p2 第二次执行 Person 函数
=>会吧函数内部的 this 指向 p2
=>会吧函数体内的代码全部执行一遍
=>向 p2 上添加 name 属性
=>向 p2 上添加 age 属性
=>向 p2 上添加 sayHi 方法，会创建一个函数出来
*/
</script>
</body>
</html>js 构造函数的使用
<!--
构造函数的数用
1. 构造函数和普通函数没有区别
只不过在使用的时候和 new 关键字连用
2.书写构造函数，函数名首字母大写
当你看到名字的时候，就知道要和 new 关键字连用
3.调用的时候，需要和 new 关键字连用
因为只有和 new 关键字连用的的时候，这个函数才会有自动创建对象和返回对象的能力
4.当函数名和 new 关键字连用的时候
函数内部的 this 指向当前实例（new 关键字前面的变量）
我们直在函数体内书写 this.xxx = 值
就是在向自动创建出来的对象里面添加内容
-->
<!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>
function person(){
console.log('hello world')
}
function Person(){
this.name = 'jack'
}
var obj = new Person()
console.log(obj)
var obj_1 = Person()
console.log(obj_1)
</script>
</body>
</html>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>
<script>
var resl = prompt('这样做真的好吗？')
while(resl !== 'yes'){
resl = prompt('这样做真的好吗？')
}
alert('好吧，你赢了')
/*
do {
var result = prompt('这样做真的好吗？')
}while(result !== 'yes')
alert('好吧，你赢了')
*/
</script>
</head>
<body>
</body>
</html>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>
<style>
*{margin: 0;padding: 0;}
ul ,ol , li{list-style: none;}
img{display: block;}
.banner{width: 900px;height: 380px;position: relative;margin: 50px 0;}
.banner ul{width: 100%;height: 100%; position: relative;}
.banner ul li{
width: 100%;height: 100%;
position: absolute;left: 0;top: 0;
opacity: 0;
transition: .5s linear;}
.banner ul li.active{opacity: 1;}
.banner ol{width: 100px;height: 20px;
display: flex;justify-content: space-between;
position: absolute;left: 350px;bottom: 0px;
}
.banner ol li {width: 8px;height: 8px;
cursor: pointer;
border: 2px solid white; border-radius: 50%;}
.banner ol li.active{background-color: orangered;}
.banner div{width: 20px;height: 40px;
position: absolute;top: 50%;
transform: translateY(-50%); /* 垂直居中 */
background-color: rgba(0, 0, 0, .5 );
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
cursor: pointer;
}
.left{left: 0;}
.right{right: 0;}
</style>
</head>
<body>
<div class="banner">
<ul class="imgBox">
<li class="active"><img src="./img/31.png" alt=""></li>
<li><img src="./img/32.png" alt=""></li>
<li><img src="./img/33.png" alt=""></li>
<li><img src="./img/34.png" alt=""></li>
</ul>
<ol class="fouc">
<li data-i = '0' data-name="point" class="active"></li>
<li data-i = '1' data-name="point"></li>
<li data-i = '2' data-name="point"></li>
<li data-i = '3' data-name="point"></li>
</ol>
<div class="left"><</div>
<div class="right">></div>
</div>
<script>
/*
点击左按钮，当前这一张消失，上一张出现
点击右按钮，当前这一张消失，下一张出现
点击焦点按钮，当前这一张消失，某一张出现
*/
// 获取元素
var l = document.querySelector('.left')
var r = document.querySelector('.right')
var p = document.querySelector('ol')
var ban = document.querySelector('.banner')
var img = document.querySelectorAll('ul>li')
var poin = document.querySelectorAll('ol>li')
console.log(poin)
// 准备一个变量，表示当前是第几张，默认是0，因为默认显示的是弟0张。
var index = 0
// 书写一个切换一张的函数,
// 这个函数有可能切换上一张，有可能切换下一张，有可能直接切换到索引的图片
// 约定 ： true 切换下一张， false : 切换上一张， number : 切换到索引的图片
function changeOne(type){
// 让当前显示的图片隐藏和高亮按钮取消高亮
img[index].className = ''
poin[index].className = ''
if(type === true){
index++
}else if(type === false){
index--
}else{
index = type
}
// 判定一下 Index 的边界值
if (index >= img.length){
index = 0
}
if (index < 0){
index = img.length - 1
}
// 让改变后的这一张显示出来
img[index].className = 'active'
poin[index].className = 'active'
}
// 给轮播图区域添加绑定点击事件
ban.onclick = function(e){
// 判断点击的是左按钮
if(e.target.className === 'left'){
console.log('点击了左按钮')
// 切换上一张，调用 changeOne 方法传递参数为 false
changeOne(false)
}
// 判断点击的是右按钮
if(e.target.className === 'right'){
console.log('点击了右按钮')
// 切换下一张，调用 changeOne 方法传递参数为 true
changeOne(true)
}
// 判断点击的是焦点盒子
if(e.target.dataset.name === 'point'){
console.log('点击了焦点按钮')
// 拿到自己身上记录的索引
var i = e.target.dataset.i - 0
//切某一张，调用 changeOne 方法传递参数为 i
changeOne(i)
}
}
// 自动切换
setInterval(function(){
changeOne(true)
},2000)
</script>
</body>
</html>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>
<style>
*{margin: 0;padding: 0;}
ul, ol, li{list-style: none;}
.tab{width: 900px;height: 450px;border: 10px solid black;
display: flex;flex-direction: column;
}
.tab ul{
height: 50px;
display: flex;
}
.tab ul li{
flex: 1;
display: flex;justify-content: center;align-items: center;
width: 300px;font-size: 28px;
color: white;background-color: skyblue;
cursor: pointer;
}
.tab ul li.active{background-color: orange;}
.tab ol{flex: 1;display: flex;position: relative;}
.tab ol li{
width: 100%;height: 100%;
font-size: 78px;color: white;background-color: orchid;
display: flex;justify-content: center;align-items: center;
position: absolute;top: 0;left: 0;display: none;}
.tab ol li.active{display: flex;}
</style>
</head>
<body>
<div class="tab" id="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab" id="box2">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script>
/*
1.抽象内容
+一个能够完成选项卡的对象，需要有哪些属性和方法
+属性：所有可以点击的按钮盒子
+属性：所有可以切换的选项盒子
+方法：能添加点击事件的方法
2.书写构造函数
+能创建一个对象，包含两个属性和一个方法
+属性直接写在构造函数体内
+方法写在构造函数的原型上
*/
// 书写构造函数
function Tabs(ele){
// 1.范围
this.ele = document.querySelector(ele)
// 2.在范围内找到所有可以点击的盒子
this.btns =this.ele.querySelectorAll('ul > li')
// 3.在范围内找到所有需要切换显示的盒子
this.tabs = this.ele.querySelectorAll('ol > li')
}
// 4.原型上书写方法 (创建一个 change 函数方法)
Tabs.prototype.change = function(){
// 4.1执行给所有 btns 里面的按钮添加点击事件
// 4.1.2 怎么拿到 btns
console.log(this.btns) // 此处绝对不能直接使用 t.btns
// 6 提前保存一下 this
var _this = this
console.log(_this)
for (var i = 0; i < this.btns.length; i++){
// 5 提前保存索引 (setAttribute() 方法添加指定的属性，并为其赋指定的值。)为元素添加属性
this.btns[i].setAttribute('index', i)
this.btns[i].addEventListener('click',function(){
console.log('我被点击了')
//4.3 需要让实例的btns 里面的每一个没有 active 类名
//4.3 需要让实例的tabs 里面的每一个没有 active 类名
// 这里不是在change函数的作用域了，而是事件处理函数的作用域
// 在事件处理函数里面，this指向当前事件的事件源
console.log(_this)
// 当你访问_this 的时候，其实是在访问变量
// 自己作用域没有，就会去上一级作用域查找
for (var j = 0; j < _this.btns.length; j++){
_this.btns[j].className = ''
_this.tabs[j].className = ''
}
// 7 当前点击的这个 li 有 active 类名
this.className = 'active'
// 让实例身上的tabs 里面索引对应的哪一个 li 有actvie 类名
// 拿到当前 li 身上保存的索引
var index = this.getAttribute('index') - 0
_this.tabs[index].className = 'active'
})
}
}
// 使用的时候
// 选项卡就可以使用了
var t = new Tabs('#box')
// 实例对象在调用方法
// 函数调用方式，对象.函数名（）
// 函数内部的 this 就是指向 点 前面的 xxx
// 我在 change 函数里面写的 this 就是 t
t.change()
console.log(t)
// 第二个选项卡
var t2 = new Tabs('#box2')
t2.change()
</script>
</body>
</html>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>
<script>
// 获取当前终端时间
console.log(new Date())
// 自定义时间
console.log(new Date( 2010, 0, 1, 8, 0)) // Fri Jan 01 2010 08:00:00 GMT+0800 (中国标准时间)
// 获取 年
var time = new Date()
console.log(time.getFullYear()) // 2021
// 获取 月 ； 0 表示 1 月，11 表示 12 月
console.log(time.getMonth())
// 获取 日
console.log(time.getDate())
// 获取 小时
console.log(time.getHours())
// 获取 分钟
console.log(time.getMinutes())
// 获取 秒
console.log(time.getSeconds())
// 获取一周中的第几天
console.log(time.getDay())
// 获取时间戳
console.log(time.getTime())
// 时间的设置 设置一个时间 2020年2月3日4时5分6秒
// 设置 年
console.log(time.setFullYear(2020))
// 设置 月 ； 0 表示 1 月，11 表示 12 月
console.log(time.setMonth(1))
// 设置 日
console.log(time.setDate(3))
// 设置 小时
console.log(time.setHours(4))
// 设置 分钟
console.log(time.setMinutes(5))
// 设置 秒
console.log(time.setSeconds(6))
console.log(time)
</script>
</head>
<body>
<div>
<img src="./img/hqsj.png" alt="获取时间">
</div>
<div>
<img src="./img/szsj.png" alt="设置时间">
</div>
</body>
</html>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>
<script>
function getDiff(NewTime){
// 获取两个时间节点之间的时间差
// 设置两个时间点
var OldTime = new Date() // 当前时间
/*
var NewTime = new Date(2022, 0, 31, 0, 0, 0) // 2022-01-31-00-00-00
*/
// 两个时间点的时间戳相减,得到两个时间点之间相差的毫秒数
var a = NewTime.getTime() - OldTime.getTime()
// 把相差的毫秒数换算成秒
var b =Math.floor (a / 1000)
// 相差的 日
var d = Math.floor(b / (24*60*60))
// 相差的 小时
var h = Math.floor(b % (24*60*60) / (60*60))
// 相差的 分钟
var m = Math.floor(b % (60 *60) / 60)
// 相差的 秒
var s = b % 60
return { day:d, hour:h, minutes:m, seconds:s}
}
var t = new Date(2022,0,31,23,59,59)
console.log(getDiff(t))
</script>
</head>
<body>
</body>
</html>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>
<style>
.box{width: 100px;padding: 20px; border: 1px solid black;border-radius: 5px;}
hr{margin: 10px 0;}
</style>
</head>
<body>
<div class="box">
全选：<input type="checkbox"><br>
<hr>
<input type="checkbox">选项一<br>
<input type="checkbox">选项二<br>
<input type="checkbox">选项三<br>
<input type="checkbox">选项四<br>
</div>
<script>
/*
代码逻辑：
1.给 全选按钮 绑定点击事件
-拿到自己的选中状态
-给所有选项按钮设置选中状态
2.给每一个选项按钮绑定点击事件
-判断是不是所有选项按钮都是选中的
-根据判断结果给全选按钮设置选中状态
*/
// 获取元素
var allBtn = document.querySelector('input')
var items = document.querySelectorAll('input:nth-child(n + 2)')
console.log(items)
// 给全选按钮绑定事件
allBtn.onclick = function(){
// 选中状态
var type = allBtn.checked
console.log(type)
// 把自己的选中状态设置给每一个选项按钮
for (var i = 0; i < items.length; i++){
items[i].checked = type
}
}
//循环给每一个选项按钮绑定点击事件
for (var i = 0; i < items.length; i++){
items[i].onclick =function(){
// 假设所有按钮都是选中的
var flag = true
// 通过循环来验证假设
for (var j = 0; j < items.length; j++){
if(items[j].checked === false){
flag = false
break
}
}
console.log(flag)
// 把得到的结果设置个全选按钮
allBtn.checked = flag
}
}
</script>
</body>
</html>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>
<style>
*{margin: 0;padding: 0;}
ul li{list-style: none;}
.outer{width: 300px;height: 300px;background-color: pink;
display: flex;justify-content: center;align-items: center;
margin: 0 auto;}
.center{width: 200px;height: 200px;background-color: skyblue;
display: flex;justify-content: center;align-items: center;}
.inner{width: 100px;height: 100px;background-color: tomato;}
ul{width: 400px;height: 100px; margin: 30px auto;background-color: turquoise;
display: flex;justify-content: space-around;align-items: center;}
ul li{width: 50px;height: 50px;font-size: 28px;background-color: tomato;
color: white;display: flex;justify-content: center;align-items: center;}
</style>
</head>
<body>
<!-- 事件传播 -->
<div class="outer">
<div class="center">
<div class="inner">
</div>
</div>
</div>
<script>
// 逐渐向外传播
// 获取元素
var a = document.querySelector('.outer')
var b = document.querySelector('.center')
var c = document.querySelector('.inner')
// 添加绑定点击事件
a.onclick = function(){console.log('我是outer,我被点击了')}
b.onclick = function(){console.log('我是center,我被点击了')}
c.onclick = function(e){
e.stopPropagation() // 阻止了传播
console.log('我是inner,我被点击了')}
</script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 获取元素
var d = document.querySelector('ul')
// 添加绑定点击事件
d.onclick = function(e){
console.log('我是ul,我被点击了')
// 获取点击的是哪一个标签
console.log(e.target)
// 通过事件目标判断点击的标签
if (e.target.tagName === 'LI'){
console.log('你点击的是li')
}
}
</script>
</body>
</html>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>
<style>
div{width: 30px;height: 30px;border-radius: 50%;background-color: red;
position: fixed;left: 0;top: 0;}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素
var d = document.querySelector('div')
// 给整个窗口添加鼠标移动事件
document.onmousemove = function(e){
// 获取鼠标移动的坐标
var x = e.clientX
var y = e.clientY
// 坐标 赋值给 元素
d.style.left = x + 5 +'px'
d.style.top = y + 5 + 'px'
}
</script>
</body>
</html>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>
<script>
/*
random()
语法：Math.random()
作用：获取0~1之间的随机小数，包含0，但是不包含1
返回值：0~1之间的随机小数
*/
console.log(Math.random())
/*
round()
语法：Math.round(数字）
作用：对数字进行四舍五入取整
返回值：四舍五入后的整数
*/
console.log(Math.round(10.5))
/*
ceil()
语法：Math.ceil（数字）
作用：对数字进行向上取整
返回值：向上取整后的整数
*/
console.log(Math.ceil(10.5))
/*
floor(）
语法：Math.floor(数字）
作用：对数字进行向下取整
返回值：向下取整后的整数
*/
console.log(Math.floor(10.5))
/*
Row()
语法：Math.pow（底数，指数）
作用：对数字进行取幂运算
返回值：取幂后的结果
*/
console.log(Math.pow(2, 3))
/*
sqrt()
语法：Math.sqrt（数字）
作用：对数字进行二次方根运算
返回值：二次方根后的结果
*/
console.log(Math.sqrt(16))
/*
abs()
语法：Math.abs(数字）
作用：对数字进行绝对值运算
返回值：绝对值运算后的结果
*/
console.log(Math.abs(-10))
/*
max()
语法：Math.max（数字1,数字2,数字3,.）
作用：获取若干数字的最大值
返回值：若干个数字中的最大值
*/
console.log(Math.max(1, 20, 3, 50, 10))
/*
min()
语法：Math.min(数字1,数字2,数字3,.）
作用：获取若干数字的最小值
返回值：若干个数字中的最小值
*/
console.log(Math.min(-1, 20, 3, 50, 10))
/*
PI
语法：Math.PI
作用：得到一个近似T的值
*/
console.log(Math.PI)
</script>
</head>
<body>
</body>
</html>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>
<script>
// 获取0-10范围内的随机数
var rando = function(){
// 获取一个随机小数
var n = Math.random()
// 用这个小数乘以10
var num = n * 10
// 对这个数四舍五入取整
return Math.round(num)
}
console.log(rando())
// 存在的问题
/*
0 ~ 0. 499... 0
0.5 ~ 1.499... 1
8.5 ~ 9.499... 9
9.5 ~ 9.999.. 10
0 和 10 的概率较小。
*/
// 利用 floor 向下取整
var rand = function(){
// 获取一个随机小数
var n1 = Math.random()
// 用这个小数乘以11
var num1 = n1 * 11
// 对这个数向下取整
return Math.floor(num1)
}
console.log(rand())
// 升级......
// 获取一定范围内的随机数
// 准备两个数字当作范围
var min = 15
var max = 26
// 两数差的随机整数
var res = Math.floor(Math.random() * (max - min + 1))
// 使用随机整数 + 相对较小的数字
var res2 = res + min
console.log(res2)
// 封装函数
var r = function (x, y){
var res_1 =Math.floor(Math.random() * (y - x + 1))
return res_1 + x
}
console.log( r(15, 20))
</script>
</head>
<body>
<div>
<img src="./img/zjszff.png" alt="">
</div>
</body>
</html>js 数组redecu累加
<!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>求1-100的和！</div>
<button onclick="handleClick()">累加求和</button>
<button onclick="handleClick2()">reduce累加求和</button>
<div>和是：<span></span></div>
</body>
<script>
// 声明指定长度的数组
var arr = new Array(101)
// 创建一个 0-100 的数组
for(var i = 0;i<arr.length;i++){arr[i]=i}
function handleClick () {
let total = 0
arr.forEach((item) => {total += item})
document.getElementsByTagName('span')[0].innerHTML = total
}
function handleClick2 () {
// 数组.reduce((上次计算的结果，当前循环的item项) => {return 上次的结果 + 当前循环的 item 项},初始值)
const sum = arr.reduce((val,item) => { return val + item},0)
document.getElementsByTagName('span')[0].innerHTML = sum
}
// reduce 第二种方法
var obj = {
name:'猴子',
info:{
skill:{
location:'花果山水帘洞',
sex:'male'
}
}
}
var arrys = ['info','skill','location']
var located = arrys.reduce((newObj,key) => {return newObj[key]},obj)
console.log(located)
// 如果是一个字符串,则需要把这个字符串分割成一个数组，再用 reduce
const attrStr = 'info.skill.location'
var locat = attrStr.split('.').reduce((newObj,k) => newObj[k],obj)
console.log(locat)
</script>
</html>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>
<script>
// 创建一个数组
var arr = [1, 2, 3, 4, 5]
// push 方法 将数据 追加 到数组的 末尾
arr.push(7)
console.log(arr)
// 返回值 ： 追加数据后数组 最新的长度
var res = arr.push('返回值')
document.write(res)
// 发生了变化
delete arr[3]
console.log(arr)
// pop 方法 删除数组 最后一个 数据
// 返回值 ： 被删除的数据
var res_1 = arr.pop()
document.write(res_1)
console.log(arr)
// unshift() 将数据 添加 到数组的 最前
// 返回值 ： 添加数据后的 最新长度
var res_2 = arr.unshift('最前')
console.log(res_2)
console.log(arr)
// shift() 删除数组 最前面一个 数据
// 返回值 ： 被删除的数据
var res_3 = arr.shift('最前')
console.log(res_3)
console.log(arr)
// reverse() 将数组反转
// 返回值 ： 反转后的数组
var res_4 = arr.reverse()
console.log(res_4)
console.log(arr)
// splice()
/*
语法：数组.splice（开始索引，多少个，要插入的数据）
开始索引：默认是0
多少个：默认是0
要插入的数据：默认是没有
作用：删除数组中若干数据，并选择是否插入新的数据
返回值：以新数组的形式返回被删除的数据
*/
var res_5 = arr.splice(1, 3, '新来的')
console.log(res_5)
console.log(arr)
// sort()
/*
语法：
数组.sort（）
数组.sort( function (a, b) { return a - b } ）
数组.sort( function (a, b) { return b - a } ）
作用：将数组进行 排序
返回值：排序好的新数组
*/
var arr_1 = [5, 1, 11, 2, 133, 3, 1111, 4]
var res_6 = arr_1.sort()
console.log(res_6)
console.log(arr_1)
var res_61 = arr_1.sort(function(a, b){ return a - b })
console.log(res_61)
console.log(arr_1)
var res_62 = arr_1.sort(function(a, b){ return b - a })
console.log(res_62)
console.log(arr_1)
// join() 将数组用连接符连接成为一个字符串
// 返回值：连接好的字符串
var arr_3 = [2021, 12, '01', 18, '00']
var res_7 = arr_3.join('-')
console.log(res_7)
// contact() 将其他数组和数组 拼接 在一起
// 返回值 ： 拼接好的 新数组
var res_8 = arr_3.concat(arr_1)
console.log(res_8)
// slice()
/*
语法：数组.slice（开始索引，结束索引）
开始索引：默认是0
结束索引：默认是数组长度
作用：截取数组中的某些数据
返回值：以新数组的形式返回截取出来的数据
*/
var res_9 = arr_3.slice(0, 3)
console.log(res_9)
// indexof()
/*
作用：查找数据在数组中的索引位置
返回值：
有该数据，返回第一次出现的索引位置
没有该数据，返回-1
*/
var arr_10 = [1, 2, 3, 2]
var resl = arr_10.indexOf(2)
console.log(resl)
var resl_1 = arr_10.indexOf(4)
console.log(resl_1)
// forEach()
// 语法：数组.forEach(function（item,index,arr）{}）
// 作用：遍历数组
arr.forEach( function ( item, index, arr){
// item 就是数组的每一项
console.log(item)
// index 就是索引
console.log(index)
// 原始数组
console.log(arr)
// 打印分隔线
console.log('---------------------------')
})
// map()
/*
语法 ： 数组.map( function ( item, index, arr) {})
作用 ： 映射 数组
返回值 ： 映射后的 新数组
*/
var resl_2 = arr.map( function ( item, index, arr) {
// 以 return 书写映射条件
return item * 10
})
console.log(resl_2)
// filter()
// 语法：数组.filter(function（item,index,arr）{}）
// 作用：过滤数组
// 返回值：过滤后的新数组
var arr_4 = [100, 200, 300, 400]
var resl_3 = arr_4.filter( function(item, index){
// 以 return 方式书写过滤条件
return item > 150
})
console.log(resl_3)
/*
every()
语法：数组.every(function（item,index,arr）{})
作用：判断数组是不是每一项都满足条件
返回值：一个布尔值
*/
var resl_4 = arr_4.every( function( item, index,arr){
return item > 150
})
console.log(resl_4)
/*
some()
语法：数组.some(function（item,index,arr）{}）
作用：判断数组是不是有某一项满足条件
返回值：一个布尔值
*/
var resl_5 = arr_4.some( function (item, index, arr){
return item < 200
})
console.log(resl_5)
</script>
</head>
<body>
<div>
<img src="./img/szff.png" alt="">
</div>
</body>
</html>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>
<script>
// 打印10*10方形
for(var a = 0; a < 10; a++){
for(var i = 0;i < 10; i++){
document.write(' *   ')}
document.write('</br>')
}
// 打印三角形
for(var d = 1; d <= 10; d++){
for(var c = 0; c < d; c ++){
document.write(' *   ')}
document.write('</br>')
}
// 打印99乘法表
for(var e = 1; e < 10; e++){
for(var f = 1; f <= e; f++){
document.write(f + " * " + e + " = " + e*f + "    ")
}
document.write('</br>')
}
// 最大公约数
// 准备两个变量，保存两个数字
var max = 24;
var min = 12;
for (g = min;g >= 1; g--){
if (max % g === 0 && min % g === 0){
console.log(g)
break
}
}
// 最小公倍数
// 准备两个变量，保存两个数字
var max = 15;
var min = 10;
for (var i = max; i <= min * max; i += max){
// console.log(i)
if (i % min === 0){
console.log(i)
break
}
}
</script>
</head>
<body>
</body>
</html> 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>
/*
﹢解决问题
=>当你需要给实例对象添加方法
=>直接书写在构造函数体内
=>这个行为并不好
=>我们的原型就是解决了这个问题
不好的原因
=>当我把方法书写在构造函数体内
=>每次创建实例的时候，都会创建一个函数数据类型
=>多个函数方法，一模一样，但是占据了多分存储空间
*/
function Person(name, age){
// 向实例随想内添加属性
this.name = name
this.age = age
// 向实例对象内添加方法
// 在构造函数体内直接向实例对象添加方法，这个行为并不好
this.sayHi = function(){ console.log('hello world')}
}
console.log(Person.prototype)
// 创建一个实例
var p1 = new Person('jack', 18)
// 创建第二个实例
var p2 = new Person('rose', 19)
console.log(p1, p2)
p1.sayHi()
p2.sayHi()
</script>
-->
<script>
/*
解决问题
原型
=>概念：每一个构造函数天生自带一个prototype属性，是一个对象数据类型
=>概念：每一个对象天生自带一个属性__proto__，指向所属构造函数的prototype
=>概念：当你访问对象的成员的时候，首先在自己身上查找，如果没有，自动去到_proto__上查找
如何解决问题
=>我们把需要添加给实例的方法，放在构造函数的原型（prototype）上
=>就可以有实例进行访问使用
原型：
=>构造函数天生自带的一个prototype
=>作用：有构造函数添加方法，专门给实例对象使用
*/
function Person(name, age){
// Person.prototype.name = name
// Person.prototype.age = age
this.name = name
this.age = age
console.log(Person.prototype)
}
// 创建一个实例对象
// p1 所属的构造函数就是 Person
// p1.__proto__ === Person.prototype
var p1 = new Person('jack', 18)
// console.log(p1.__proto__ === Person.prototype)
console.log(p1.__proto__ )
// 当你访问 p1 的 name 成员
// 因为当你访问p1.a 的时候，自己没有，会自动去自己的__proto__ 上查找
// 又因为自己的__proto___就是 perosn.prototype
// 所以，其实就是去到 person.prototype 上查找
console.log(p1.name)
// 如何解决问题
// 把想添加给实例对象的方法，书写在原型上
Person.prototype.sayHi = function (){console.log('hello world')}
// 再创建一个实例对象
// p2 所属的构造函数就是 Person
var p2 = new Person('rose', 19)
console.log(p2.__proto__ === Person.prototype )
// 当你访问 p1 的sayHi的时候
// 自己没有, 回去自己的 __proto__ 上找
console.log(p1.sayHi)
// 当你访问 p2 的sayHi的时候
// 自己没有, 回去自己的 __proto__ 上找
console.log(p2.sayHi)
// 因为p1.__proto__和p2.__proto__是一个对象空间
// p1和p2的sayHi是一个
console.log(p1.sayHi === p2.sayHi)
function People(name, age){
this.name = name
this.age = age
this.sayH = function (){console.log('hi world')}
}
var P1 = new People('bob', 14)
var P2 =new People('Tom', 16)
console.log(P1, P2)
P1.sayH()
console.log(P1.sayH === P2.sayH)
</script>
</body>
</html>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>
/*
原型prototype
+定义：每一个函数天生自带一个属性，叫做prototype，是一个对象
+构造函数也是函数，也会有这个自带的空间prototype
+既然prototype是一个对象，我们就可以使用对象操作的语法，向里面添加一些内容
对象
+定义：每一个对象，在你访问他的成员的时候，如果自己没有这个属性
=>会自动去所属构造函数的prototype上查找
+自定义构造函数创建的对象也是对象，当你访问某一个成员的时候
=>如果没有，也会自动去所属构造函数的原型上查找
=>哪一个构造函数创建的对象，这个对象就属于哪一个构造函数
=>因为构造函数在创建对象的过程，我们起名为实例化的过程
>创建出来的对象叫做这个构造函数的一个实例化对象
*/
function Person(){}
Person.prototype.sayHi = function(){console.log('我是 Person 原型上的方法')}
console.log(Person.prototype)
// 创建一个实例化对象
// 因为 p1 是 Person 实例化出来的对象
// p1 就是属于 Person 这个构造函数的
// 当你访问 p1 的sayHi成员的时候，p1 自己是没有的
// 会自动去 Person 的原型（prototype）上查找
var p1 = new Person()
console.log(p1)
p1.sayHi()
// 创建第二个实例化对象
// 因为 p2 也是Person 的实例化对象
// p2 没有 sayHi成员，也会自动去 Person 的原型上查找
var p2 = new Person()
console.log(p2)
p2.sayHi()
</script>
</body>
</html>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：实例对象身上的__proto__指向谁？
=>指向所属构造函数的prototype
=>p1所属的构造函数是Person
=>p1.__proto__指向Person.prototype
问题2:Person.prototype 的__proto___指向谁?
=>Person.prototype所属的构造函数是谁
=>因为Perosn.prototype是一个对象数据类型(object）
=>在Js内所有的object数据类型都是属于object这个内置构造函数
=>Person.prototype是属于 object 这个内置构造函数的
=>Person.prototype的__proto__指向object.prototype
问题3： Person 的__proto__ 指向谁？
=>Person是一个函数，函数本身也是一个对象，就会有__proto___
=>在JS内，所有的函数都是属于内置构造函数Function的实例
=>Person.__proto__指向 Function.prototype
问题4:object.prototype 的__proto__指问谁?
=>object.prototype是一个对象数据类型，只要是对象，都是数据object这个内置构造函数的
=>注意：object.prototype 在 Js 内叫做顶级原型,不在有__proto___了
=>object.prototype的__proto__指向 null
问题5:object 的__proto__指问谁?
=>object是内一个内置构造函数，同时也是一个函数，同时也是一个对象
=>在JS内，所以的函数都是属于内置构造函数Function的实例
=>object也是Function的实例
=>object.___proto__指向Function.prototype
问题6:Function.prototype 的 __proto__指向谁?
=>Function.prototype也是一个对象数据类型
=>只要是对象数据类型都是object的实例
=>Function.prototype的__proto__指向object.prototype
问题7：Function 的__proto__ 指向谁?
=>Function也是一个内置构造函数，也是一个函数
=>在JS内，所有的函数都是属于内置构造函数Function的实例
=>Function自己是自己的构造函数
=>Function自己是自己的实例对象
=>Function所属的构造函数的是Function
原型链
+ 用 __proto__ 串联起来的对象链状结构
注意：使用__proto__
+每一个对象数据类型，都有一个属于自己的原型链
+作用：为了访问对象成员
对象访问机制：
+当你需要访问对象的成员的时候
+首先在自己身上查找，如果有直接使用
+ 如果没有,会自动去 __proto__ 上查找
+ 如果还没有，就再去__proto___ 上查找
+直到object.prototype都没有，那么返回 undefiend
*/
function Person(){}
var p1 = new Person()
</script>
-->
<div>
<img src="./img/原型.png" alt="">
</div>
</body>
</html>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>
<script>
/*
charAt()
语法：字符串.charAt（索引）
作用：获取对应索引位置的字符
返回值：对应索引位置的字符
*/
/*
toLowerCase()
语法：字符串.toLowerCase(）
作用：将字符串内的字母全部转换成小写
返回值：转换好的字符串
*/
var s = 'Hello, This is WTO and This is BBC'
var res = s.toLowerCase()
console.log(res)
/*
toUpperCase()
语法：字符串.toUpperCase(）
作用：将字符串内的字母全部转换成大写
返回值：转换好的字符串
*/
var res_1 = res.toUpperCase()
console.log(res_1)
/*
replace()
语法：字符串.replace(换下内容，换上内容）
作用：将字符串内第一个满足换下内容的片段替换成换上内容
返回值：替换好的字符串
*/
var res_2 = s.replace('This','That')
console.log(res_2)
/*
trim()
语法：字符串.trim(）
作用：去除字符串首尾的空格
返回值：去除空格后的字符串
*/
var res_3 = s.trim()
console.log(res_3)
/*
split()
语法：字符串.split（分隔符）
作用：按照分隔符将字符串切割成为一个数组
返回值：切割后的数组
*/
var str = '2021-12-02'
console.log(str.split('-'))
console.log(s) // Hello, This is WTO and This is BBC
console.log(s.substr(1, 8)) // ello, Th
console.log(s.substring(1, 8)) // ello, T
console.log(s.slice(1, 8)) // ello, T
</script>
</head>
<body>
<div>
<img src="./img/zfcff.png" alt="">
</div>
<div>
<img src="./img/zfcff_1.png" alt="">
</div>
</body>
</html>js案例回到顶部
<!--
/*
1.滚动条滚动不超过临界点，顶部通栏显示，否则隐藏
2.滚动条滚动超过临界点，回到顶部按钮显示，否则隐藏
3.点击回到顶部按钮，滚动条滚动回到顶部
*/
-->
<!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>
*{
margin: 0;padding: 0;
}
body{height: 3000px;}
.head{width: 100%;height: 80px;
display: flex;justify-content: center;align-items: center;
font-size: 30px;color: #fff;background-color: skyblue;
transition: top .5s linear;
position: fixed;top: -80px;left: 0;
}
.Gotop{width: 50px;height: 50px;background-color: pink;
font-size: 20px;text-align: center;line-height: 25px;color: #fff;
position: fixed;bottom: 50px;right: 50px;
display: none;}
</style>
</head>
<body>
<!--
1.需要一个顶部通栏标签和一个回到顶部按钮标签
2.让页面超过浏览器可视窗口高度
3.设置顶部通栏样式，默认是在超出页面的
4.设置回到顶部按钮样式，默认是在隐藏的
-->
<header class="head">这是导航栏</header>
<section class="Gotop">返回顶部</section>
<script>
/*
代码逻辑：
1.给浏览器绑定滚动事件，实时获取浏览器卷去的高度
2.判断卷去的高度决定隐藏还是显示
3.给回到顶部按钮绑定点击事件
*/
// 获取元素
var header = document.querySelector('.head')
var goTop = document.querySelector('.Gotop')
// 绑定滚动事件
window.onscroll = function(){
// 获取浏览器卷去的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
// 判断卷去的高度
if(height >= 300){
header.style.top = '0px'
goTop.style.display = 'block'
}else{
header.style.top = '-80px'
goTop.style.display = 'none'
}
}
// 绑定点击事件
goTop.onclick = function(){
// 让页面滚回到顶部
window.scrollTo({
top:0,
behavior:'smooth'
})
}
</script>
</body>
</html>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>
<style>
table{width: 300px;text-align: center;}
</style>
</head>
<body>
<table border="1" cellspacing='0'>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<!-- js 渲染 -->
</tbody>
</table>
<script>
var users = [
{id: 01, name: '孙悟空1', age: 50},
{id: 2, name: '猪八戒', age: 5},
{id: 31, name: '沙和尚', age: 500},
{id: 4, name: '小白龙', age: 30}]
var tbody = document.querySelector('tbody')
// 循环遍历 users 的数据
users.forEach(function (item){
// 这里的 item 是数组的每一个对象
console.log(item)
// 每一个对象生成一个 tr 标签
var tr = document.createElement('tr')
// 循环遍历 item
for(var key in item){
// 生成 td 标签
var td = document.createElement('td')
td.innerHTML = item[key]
// td 标签插入到 tr
tr.appendChild(td)
}
//把本次的循环结果 tr 插入到 tbody 的内部
tbody.appendChild(tr)
})
</script>
</body>
</html>js行内书写
<!--
行内式
-直接把代码书写在标签身上
a 标签 - 书写在 href 属性上
<a href="javascript：JS代码;">点我一下</a>
非 a标签-书写在行为属性上
<div onclick="alert('hello world'）">点我一下</div>
外链式
-把代码书写在一个.js文件内
外链式JS代码，不需要依赖任何行为，打开页面就会执行
使用 script 标签的src属性引入指定 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>
<a href="javascript:alert('hello world')">点我一下</a>
<div onclick="alert('hello world')">点我</div>
</body>
</html>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>
<script>
// 创建一个数组
var arr = [9, 7, 3, 5, 1, 4, 8, 2, 6]
for (var j = 0; j < arr.length-1; j++){
// arr.length-1-j 已经比较了的，放在最后就已经不不要再比较了，
// 因此最后一步只需要比较第一位和第二位，比较是越来越少的。
for (var i = 0; i < arr.length-1-j; i++){
// 判断 前后数字大小，如果前面的大于后面的则交换位置。
if(arr[i] > arr[i + 1]){
// 创建一个临时变量
var temp = arr[i]
// 前后两位交换位置
arr[i] = arr[i + 1]
arr[i + 1] = temp
}
}
}
console.log(arr)
</script>
</head>
<body>
</body>
</html>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>
<script>
var money = 0
//满足哪一个if的条件，就执行哪一个条件后面的{}
//前面的如果满足了，就不去考虑后面的内容了
//当所有条件都不满足的时候，就会执行 else 后面的{}
if (money >= 100){console.log('大于100')}
else if (money >= 50){console.log('小于100大于50')}
else{console.log('小于50')}
</script>
</head>
<body>
<div>
<img src="./img/if.png" alt="if 条件分支语句总结">
</div>
</body>
</html>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>
<div>
<input type="datetime-local">
</div>
<div id="times"></div>
<script>
var end = document.querySelector('input')
function _fresh() {
var endtime = new Date(end.value);
var nowtime = new Date();
var leftsecond = parseInt((endtime.getTime()-nowtime.getTime()) / 1000);
__d = parseInt(leftsecond / 3600 / 24);
__h = parseInt((leftsecond / 3600) % 24);
__m = parseInt((leftsecond / 60) % 60);
__s = parseInt(leftsecond % 60);
document.getElementById("times").innerHTML = "" + __d + "天 " + "" + __h + "" + "小时 " + "" + __m + "" + "分 " + "" + __s + "" + "秒";
if (leftsecond <= 0) {
document.getElementById("times").innerHTML = "活动已结束";
clearInterval(sh);
}
}
var sh;
sh = setInterval(_fresh, 1000);
</script>
</body>
</html>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>
<style>
/* 重置样式 */
*{margin: 0;padding: 0;}
ul , ol{list-style: none;}
.box{width: 800px;height: 400px;
display: flex;flex-direction: column;
/*flex-direction: column; 主轴为垂直方向 */}
.box ul{height: 60px;display: flex;}
.box ul li{font-size: 24px;background-color: rgb(64, 46, 85);color: white;
flex: 1;display: flex;justify-content: center;align-items: center;
cursor: pointer;}
.box ul li.active{background-color: orange;}
.box ol{flex: 1;position: relative;}
.box ol li{width: 100%;height: 100%;font-size: 48px;background-color: orchid;color: white;
display: flex;justify-content: center;align-items: center;
position: absolute;left: 0;top: 0;display: none;}
.box ol li.active{display: flex;}
img{width: 800px;height: 340px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active"><img src="./img/32.png" alt=""></li>
<li><img src="./img/33.png" alt=""></li>
<li><img src="./img/31.png" alt=""></li>
</ol>
</div>
<script>
// 每个 按钮盒子 绑定一个点击事件
// 获取 按钮盒子元素
var btns = document.querySelectorAll('ul>li')
// 获取 内容盒子元素
var conts = document.querySelectorAll('ol>li')
// 给每个按钮添加绑定点击事件
btns.forEach(function( item, index){
item.onclick = function(){
// 所有按钮盒子取消高亮状态 取消类名 active
btns.forEach(function(t, i){
t.className = ''
// 所有内容盒子隐藏
conts[i].className = ''
})
// 当前点击的按钮和索引对应的盒子添加 active 类名
item.className = 'active'
conts[index].className = 'active'
}
})
</script>
</body>
</html>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>
<script>
// 创建一个数组
var arr = [9, 3, 5, 2, 7, 1, 4, 6, 8]
for (var j = 0; j < arr.length-1; j++){
// 逐个比较，把最小数字 1 的索引 5 替换成 0
// 假设 原来数组的最小数字索引为 0
var min_index = j;
// 与数组后面的数字进行逐个比较
for (var i = j+1; i < arr.length; i++){
// 判断是不是比我假设索引位置的数字小
if (arr[i] < arr[min_index]){
// 如果条件为 True 则替换 min_index
min_index = i
}
// 先得到最小数字的索引。
}
// 交换索引 0 位置和 minindex 位置
var temp = arr[j]
arr[j] = arr[min_index]
arr[min_index] = temp
console.log(arr)
}
</script>
</head>
<body>
</body>
</html>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>
<script>
console.log(10 == '10')
console.log(10 === '10')
var n = 5;
n--;
console.log(n) //4
--n;
console.log(n) //3b
var num = 10
--num;
console.log(num) //9
var num2 = 20
num2--
console.log(num2) //19
var a = 5
console.log(1 + ++a) //7
console.log(a) //6
// 先执行++ ， 1+6=7
// 即是 先算++a 等于6，再算1+6=7
var b = 5
console.log(1 + b++)//6
console.log(b) //6
// 后执行++ ，1+5=6
// 即是 先算1+b=6
c = 6
console.log(c++) //6
</script>
</head>
<body>
<h3> 算数运算符</h3>
<section>
<img src="./img/ssysf.png" alt="算数运算符">
</section>
<h3>赋值运算符</h3>
<section>
<img src="./img/fzysf.png" alt="赋值运算符">
</section>
<h3>比较运算符</h3>
<section>
<img src="./img/bjysf.png" alt="比较运算符">
<p> == 只比较值是不是相等，不考虑数据类型 </p>
<p> === 既比较值是不是相等，又要考虑数据类型 </p>
</section>
<h3>总结</h3>
<section>
<img src="./img/ysfzj.png" alt="">
</section>
</body>
</html>边栏推荐
猜你喜欢
随机推荐
Typora 使用保姆级教程 | 看这一篇就够了 | 历史版本已被禁用
Swoole学习（二）
多个gcc/glibc版本的共存及指定gcc版本的编译
lambda函数用法总结
部署LVS-DR群集【实验】
7.13 Day20----MYSQL
力扣：70. 爬楼梯
7.15 Day21---MySQL----Index
bind和function
注意！软件供应链安全挑战持续升级
Can 't connect to MySQL server on' localhost3306 '(10061) simple solutions
Several ways to heavy
去重的几种方式
通过＆修改数组中的值
跨域问题的解决
Swoole学习（一）
Summary of MySQL database interview questions (2022 latest version)
力扣：96.不同的二叉搜索树
将自定义类型作为关联容器的key
C1认证之web基础知识及习题——我的学习笔记