<!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 fn1(n1,n2){
var he = n1 + n2;
var ji = n1 * n2;
console.log(n1+'与'+n2+'相加的和为'+he);
console.log(n1+'与'+n2+'相乘的积为'+ji);
}
fn1(10,20);
fn1(3,8);
// 编写函数,输入三个数字(传参),输出 三个数字按照从小到大的顺序
// 输入 n1 = 45 n2 = 12 n3 = 14
// 输出 n1 = 12 n2 = 14 n3 = 45
function fn2(n1,n2,n3){
if(n1>n2){
var x = n1;
n1 = n2;
n2 = x;
}
if(n2>n3){
var x = n2;
n2 = n3;
n3 = x;
}
if(n1>n2){
var x = n1;
n1 = n2;
n2 = x;
}
return n1+'<'+n2+'<'+n3
}
console.log(fn2(11,5,3));
console.log(fn2(2,50,33));
// 编写函数,传参 计算一个数字的阶乘返回
// 假设输入 5 1*2*3*4*5
// 返回值为 阶乘的结果
function fn3(n){
var sum = 1;
for(var i=1;i<=n;i++){
sum*=i;
}
return sum;
}
console.log(fn3(5));
console.log(fn3(3));
// 某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:
// 每位数字都加上5,然后用除以10的余数代替该数字,再将第一位和第四位交换,第二位和第三位交换,
// 请编写一个函数,传入原文,返回密文。
// 返回值是 密文
function fn4(num){
var q = (parseInt(num/1000)+5)%10;
var b = (parseInt(num/100)%10+5)%10;
var s = (parseInt(num/10)%10+5)%10;
var g = (num%10+5)%10;
// 交换位置
var x = q;
q = g;
g = x;
x = b;
b = s;
s =x;
// 组成新的数字
var nn = ''+q+b+s+g;
return nn;
}
console.log(fn4(1234));
console.log(fn4(4937));
// 求 1! + 2!+ 3! + 4! + 5! + 6! + ...... + 20! 的值
// 编写函数,可以通过 传入参数 计算 任何值,参数为一个数字
// 返回值为 计算的结果
function fn5(n){
var sum = 0;
// 外层循环 循环几 就是 要计算几的阶乘
for(var i=1;i<=n;i++){
// 接收阶乘的结果
var num = 1;
// 实现 计算 当前 外层循环的值 的阶乘
for(var j=1;j<=i;j++){
num *= j;
}
// 将 每个数字的阶乘 结果 相加
sum += num;
}
return sum;
}
console.log(fn5(3)); // 9
console.log(fn5(20)); // 2561327494111820300
function fn6(n){
// 接收 所有 值继承的 相加之和
var sum = 0;
// 用来计算阶乘的,因为任何值的阶乘都是从1开始乘到这个数字的
var num = 1;
// 执行计算阶乘
for(var i=1;i<=n;i++){
num *= i; // 1*1*2*3*4
sum += num;
}
return sum;
}
console.log(fn6(3)); // 9
console.log(fn6(20)); // 2561327494111820300
</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>
<script>
// 输入一个日期,判断这个日期是这一年的第几天 (区分平年和闰年)
// 例如:20220211 最终计算出结果为 42
// 使用 switch(考虑switch的穿透) 和 if 的结合成
var yearMonthDay = prompt("请输入一个需要查看的日期,例如:20220211")
console.log(yearMonthDay);
var year = parseInt(yearMonthDay/10000);
var month = parseInt(yearMonthDay/100)%100;
var day = yearMonthDay%100;
console.log(year);
console.log(month);
console.log(day);
var sum = 0;
switch(month){
case 12:
sum += 30;
case 11:
sum += 31;
case 10:
sum += 30;
case 9:
sum += 31;
case 8:
sum += 31;
case 7:
sum += 30;
case 6:
sum += 31;
case 5:
sum += 30;
case 4:
sum += 31;
case 3:
if(year%4===0&&year%100!=0 || year%400===0){
sum += 29;
}else{
sum += 28;
}
case 2:
sum += 31;
case 1:
sum += day;
break;
}
alert(year+'年'+month+'月'+day+'日是'+year+'年的第'+sum+'天');
// switch(month){
// case 1:
// sum += day;
// break;
// case 2:
// sum += 31+day;
// case 3:
// if(year%4===0&&year%100!=0 || year%400===0){
// sum += 31+29+day;
// }else{
// sum += 31+28+day;
// }
// break;
// case 4:
// if(year%4===0&&year%100!=0 || year%400===0){
// sum += 31+29+31+day;
// }else{
// sum += 31+28+31+day;
// }
// break;
// ......
// }
</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>
<script>
// ƒ fn1(n){console.log(n+'fn函数被调用了');}
// var num1;
// var num2;
console.log(num1); // undefined
console.log(fn1); // ƒ fn1(n){console.log(n+'fn函数被调用了');}
console.log(fn2); // undefined
fn1(1);
// fn2(); // fn2 is not a function
// JS运行的代码分为三个阶段
// 预编译:
// 浏览器帮我们做,所做的事情就是基本的语法检查,
// 除了给我们报错时,看不见摸不着
// 预解析:
// 也是浏览器做,虽然已经能够看得见了,
// 对我们程序中使用var和function定义的变量和函数进行预解析工作。
// 执行代码:
// 从上往下执行,逐行
// - 当执行函数时才会进入函数内部
// - 再次逐行执行代码
// 导致变量num值为undefined的原因就是第二步预解析问题。
// JS语言中所有的变量名和函数名都会被执行提升操作。
// js对变量的提升
// 在 预解析阶段,浏览器会把 所有用 var声明的变量 全部 提升到 当前作用域下的最顶端
// 提升的过程 只会针对 变量的 声明部分 进行提升,对变量的 赋值部分是不会进行提升操作的
// 因为 声明一个变量不复制结果就是undefined,所以在变量赋值之前 访问这个变量结果是undefined
console.log(num1); // undefined
var num1 = 10;
console.log(num1); // 10
// console.log(num2); // Error: num2 is not defined
// 对变量的提升 是针对 用var声明的变量 才会提升,如果声明变量没有var是不会进行提升操作的,会报错
num2 = 20;
console.log(num2); // 20;
// js对函数的提升
// js提升函数和变量不一样,提升函数是针对整个函数全部提升到当前作用域的最顶部
// 所以相当于 函数是写在 最上面的,我们就可以在 任意位置调用函数
// 赋值函数 是按照 变量的提升规则来执行的,所以在 将函数赋值给 变量之前 变量都是undefined
// 所以无法在 赋值式函数 赋值给这个变量之前 调用函数,因为它是undefined
// 声明式函数 是将整个函数进行提升到 当前作用域下的最顶部
function fn1(n){
console.log(n+'fn函数被调用了');
}
fn1(2);
// 赋值式函数 是按照变量的规则提升的,在这之前这个变量的结果是 undefined
var fn2 = function(){
console.log('fn2函数被调用');
}
fn2();
</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>
<script>
console.log(abc); // ƒ abc(){console.log(1234);}
abc();
// 变量 和 函数 都会 执行 提升操作
// 但是如果 变量名 和 函数名 重名
// 在 提升阶段 函数优先:
// 如果变量名和函数名重名,在 变量和函数定义之前,访问这个名字得到的结果都是 函数
// 在 执行阶段 变量优先:
// 一旦 代码执行到 给 这个名字的变量赋值 这一句后,
// 这个名字 就是 变量了,不会再是 函数
// 注:如果 变量名 和 函数名 重名,如何区分 这个名字 是变量 还是函数
// 在 给这个变量赋值之前 这个名字都是 函数
// 在 给这个变量赋值之后 这个名字都是 变量
console.log(abc); // ƒ abc(){console.log('1234');}
abc();
var abc = 100;
console.log(abc); // 100
// abc(); // Error: abc is not a function
function abc(){
console.log('abc函数被调用了');
}
console.log(abc); // 100
// abc(); // Error: abc is not a function
function abc(){
console.log(1234);
}
console.log(abc); // 100
// 这里的 abc 是 变量名 不是函数名
var abc = function(){
console.log('6699');
}
console.log(abc); // function(){console.log('6699');}
abc();
</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>
<script>
// 变量的作用域 就是 指变量能够起作用的范围。
// 变量的作用域决定了变量将来可以被访问的区域,
// 而变量被限制的区域也决定了该变量是 全局变量 还是 局部变量。
// 全局变量 --- 全局作用域
// 在 函数外部 声明的变量 就是 全局变量
// 全局变量 可以在 页面的 任意位置 访问使用 --- 全局变量的作用域是全局
console.log(num1); // undefined
var num1 = 11;
console.log(num1); // 11
var n1 = 100;
console.log(n1); // 100
// 局部变量 --- 局部作用域
// 在 函数内部 声明的变量 就是 局部变量
// 局部变量 只能在 当前函数内部访问时使用,如果在函数外部访问使用就会报错 --- 局部变量的作用域是局部(函数内部)
// 函数的 形参 其实也是一个 局部变量
// 局部变量 在函数内部 也会 进行 变量的提升操作 --- 会将 函数内部的局部变量 提升到 函数的最顶部
function fn1(abc){
// var num2;
console.log(abc); // 33
console.log(num1); // 11
console.log(num2); // undefined
var num2 = 22;
console.log(num2); // 22
console.log(n1); // 100
n1 = 150;
console.log(n1); // 150
}
fn1(33);
// console.log(abc); // Error: abc is not defined
// console.log(num2); // Error: num2 is not defined
console.log(n1); // 150
function fn2(){
console.log(n1); // 150
console.log(num1); // 11
// console.log(num2); // Error: num2 is not defined
}
fn2();
console.log(num1);
var x = 222;
function fn3(a,b){ // var a=66; var b;
console.log(a); // 66
console.log(b); // undefined
console.log(c); // undefined
var a = 88;
console.log(a); // 88
console.log(b); // undefined
var b = 77;
console.log(b); // 77
var c = 99;
console.log(c); // 99
console.log(x); // 222
}
fn3(66)
// console.log(a); // Error: a is not defined
</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>
<script>
// 当 全局变量 和 局部变量 重名时
// 在 函数外 使用的是 全局变量
// 在 函数内 使用的是 局部变量
// 在函数内部 如果 存在 和 全局变量 重名的 局部变量,函数内部优先使用 局部变量
// 如果 函数内部 不存在 重名的 局部变量,在函数内部 才会使用 这个名字的 全局变量
console.log(n1); // undefined
var n1 = 22;
console.log(n1); // 22
console.log(n2); // undefined
var n2 = 4;
console.log(n2); // 4
console.log(n3); // undefined
var n3 = 78;
console.log(n3); // 78
function fn1(n1){
console.log(n1); // 33
console.log(n2); // undefined
var n2 = 9;
console.log(n2); // 9
console.log(n3); // 78
}
fn1(33);
console.log(n1); // 22
console.log(n2); // 4
console.log(n3); // 78
var a = 12;
var b = 13;
var c = 14
// console.log(d); // Error: d is not defined
function fn2(a,b){
console.log(a); // 3
var a = 9;
console.log(a); // 9
console.log(b); // undefined
console.log(c); // 14
c = 22;
// console.log(d); // Error: d is not defined
d = 100;
console.log(d); // 100
}
fn2(3);
console.log(a); // 12
console.log(b); // 13
console.log(c); // 22
console.log(d); // 100
// 注意:在 函数中 如果 使用一个变量 没有 加var关键字
// 如果 函数中 有这个名字的 局部变量 就是 对这个 局部变量的修改
// 如果 函数中 没有有这个名字的 局部变量 就是 对全局的这个名字的变量的修改
// 如果 函数中没有这个名字的局部变量,全局中也没有这个名字的 全局变量
// 这个 名字的变量 相当于 是一个全局变量
// 会在 全局中 添加一个这个名字的变量
// 但是这个变量 只能在 添加后访问使用,在添加之前访问都是报错
// 如果声明变量没有加var,则声明的变量是一个全局变量
// 全局有这个名称的变量就修改,如果没有就是创建
</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>
<script>
var num1 = 11;
console.log(num1); // 11
var n1 = 33;
function fn111(num1){
console.log(num1); // 12
var num2 = 90;
console.log(num2); // 90
function fn222(){
console.log(num2); // 90
console.log(num1); // 12
console.log(n1); // 33
var num4 = 88;
function fn333(){
console.log(num4); // undefined
var num4 = 678;
console.log(num4); // 678
console.log(num1); // 12
num1 = 77;
console.log(num1); // 77
// console.log(num5); // Error:num5 is not defined
num5 = 55;
console.log(num5); // 55
}
fn333();
}
fn222();
}
fn111(12);
console.log(num1); // 11
console.log(num5); // 55
// 在作用域链情况下:
// > 当变量没加var时,会去在上一个作用域中找【同名&带var】
// > 找到了 - 直接修改
// > 找不到 - 在作用域链上找
// > 一直找到顶级作用域
// > 找到了 - 直接修改
// > 找不到 - 自己创建修改
</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>
<style>
.box{
background-color: pink;
}
.box div{
width: 100px;
height: 40px;
margin-top: 10px;
line-height: 40px;
color:aqua;
text-align: center;
border-radius: 20px;
background-color: blueviolet;
font-size: 20px;
cursor: pointer;
font-weight: 600;
}
</style>
</head>
<body>
<!-- <div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div> -->
<script>
// 数组是应用数据类型
// 复杂数据类型
// 对象数据类型
// let cls = document.querySelector(".box");
// cls.addEventListener("click",function(e){
// if(e.target.tagName.toLowerCase() === "div"){
// console.log(e.target.innerHTML)
// }
// })
// var name="韩信";
// var user= {
// name:"诸葛",
// game:function(){
// var _this = this;
// setTimeout(function(){
// console.log(_this.name)
// })
// }
// }
// user.game()//this 永远指向调用者
//在定时器里得this是指向全局环境得
let timer = setTimeout(function(){
console.log("卧底");
},3000)
clearTimeout(timer)
</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>
<!--
数组是引用类型得数据类型
数组是有序得数据集合
数组得编号是数组得索引
-->
<script>
var fibo_arr = [false,"hellow",true,1,999];
//可以获取和设置数组得长度
// fibo_arr.length = 20;
//数组得索引可以实现对数组得访问
//对数组可以实现增删改查
//数组
let n = fibo_arr[4]
console.log(n);
//给数组增加长度
//数组最的长度和数组的索引的关系??
// arr[max] = arr.length - 1;
fibo_arr[fibo_arr.length] = 233;
//数组的索引是从0 开始 所以在第六位会出现一个233
console.log(fibo_arr)
//改变 给数组存在数值索引就是给数组改变
fibo_arr[0] = true;
console.log(fibo_arr)
/*数组的遍历就是对数组的访问
遍历 :我们延着某条线索和路径 依次对集合都做一次访问
*/
// for(var i=0;i<fibo_arr.length;i++){
// console.log(fibo_arr[i])
// }
//特地准被了 for(var i in arr){}
// var arr = ["韩信","公孙离",23,false,true,3344];
// for(var i in arr){
// console.log(arr[i])
// }
//数组可以存任意类型的数据
//数组的成员也可以是数组
//数组的成员是数组形成二维数组
// var arr1 =[1,2,3,["我是数组","数组中包含数组"]];
//如果数组一直嵌套就形成了多维数组
var arr2 = [[1,2,3,["韩信",["李元芳"]]],[1,2,3],[1,2,3]];
console.log(arr2[0][3][0]);
//怎么实现二维数组的遍历呢?
//循环嵌套就完事了?
var arr3 = [[1,2,3],[1,2,3],[1,2,3]];
for(var t=0;t<arr3.length;t++){
for(var j=0;j<arr3[t].length;j++){
console.log(arr3[t][j])
}
}
console.log("华丽的分割线-------------------------")
//如何检测一个是否为数组 Array.isArray("")
var arr4 = [[1,3,4],[4,5,6],7,8,9,[5,5,5]];
for(var k=0;k<arr4.length;k++){
// console.log(arr4[k])
if(Array.isArray(arr4[k])){
for(var l=0;l<arr4[k].length;l++){
console.log(arr4[k][l]);
}
}else{
console.log(arr4[k])
}
}
console.log("华丽的分割线-------------------------")
</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>
<script>
//数组的方法
//有关添加和删除的方法
//push()给数组最后添加一个或多个成员
var arr = [
"涛哥真刷",
"韩信s",
9999,
false,
true,
function num() {
console.log("天肉");
},
];
var arr1 = ["韩信"];
let opp = arr.push(arr1);
arr.push(arr1);
console.log(arr);
//pop()删除数组的最后一个数据
// arr.pop();
//此方法的返回值是被删除的数据
var arr2 = [1, 2, 3, 4, 5, 6];
let res = arr2.pop();
console.log(arr2); //
console.log(res); //6
console.log(
"------------------------------------------优雅从不过时----------------------"
);
//unshift()
//在数组的前面添加一个数据
//返回值位数组的长度
var arr3 = ["aa", "bb", 12, 34, false, true];
let tt = arr3.unshift("kk");
console.log(tt); //7
console.log(arr3);
console.log(
"------------------------------------------优雅从不过时----------------------"
);
//shift()
//此方式删除数组第一个值
//删除之后会返回删除的值
var arr4 = [4, 2, 3, 4];
let resout = arr4.shift();
console.log(resout); //4
console.log(arr4); //2,3,4
console.log(
"------------------------------------------优雅从不过时----------------------"
);
//数组排序的方法
//sort();
//设置数组的排序问题
//按照数字的第一个字符大小去排序的
//字符串的排序规则
//自定义比较规则 从小到大排序
var arr5 = [3, 4, 5, 6, 4, 523, 52, 54, 25, 24, 5];
let res0 = arr5.sort();
console.log(arr5);
console.log(res0);
//自定义从大到小排序
console.log(
"------------------------------------------优雅从不过时----------------------"
);
//数组反转排列
// reverse反转
var arr6 = [1,2,3,4,5,6];
let reverseone = arr6.reverse();
console.log(reverseone);
console.log(arr6);
</script>
</body>
</html>