lesson07-js基础3
视频1-回顾+作业讲解
0-作业讲解 //图片轮播 --要求：点击4个按钮，分别切换图片
--------------------------------------------------------
视频2-数组方法+对象
1-数组方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 var a=[1,2,3]; 10 // var arr=new Array(); 11 //操作方法 12 console.log(a.length);//3 13 //数组可读可写 14 console.log(a[1]);//2 15 a[1]=3; 16 console.log(a[1]);//3 17 console.log(a);// [1, 3, 3] 18 //前加 19 a.unshift("a","b"); 20 console.log(a); //["a","b",1, 3, 3] 21 //后加 22 a.push("a","b"); 23 console.log(a); //["a","b",1, 3, 3,"a","b"] 24 25 //删最后一个 26 a.pop(); 27 console.log(a);//["a","b",1, 3, 3,"a"] 28 //删前面 29 a.shift(); 30 console.log(a);//["b",1, 3, 3,"a"] 31 32 //splice() 33 //传一个参数:表示数组从序列0开始截取n位 34 console.log(a.splice(3)); //数组开始截取3个元素 35 console.log(a);//["b", 1,3] 36 37 //传两个参数:从下标1开始,删除2位 38 console.log(a.splice(1,2)); 39 console.log(a);// ["b"] 40 41 //传三个参数:删除指定位置的数据,然后再在此处添加数据 42 a=["b",1, 3, 3,"a"] 43 console.log(a.splice(1,2,"x","y","z")); //删除元素1,3，--添加x，y，z 44 console.log(a);// ["b", "x","y","z" 3, "a"] 45 46 //通过ASCII码大小排序 47 var b=[0,-2,5,-3,8]; 48 console.log(b.sort());//[-2, -3, 0, 5, 8] 49 console.log(b.reverse());// [8, 5, 0, -3, -2] 50 51 //数学大小排序 52 b.sort(function (x,y) { 53 // return x-y;//正序 54 return y-x;//反序 55 }); 56 console.log(b);//[8, 5, 0, -2, -3] 57 58 //字符串转换成数组---通过split("")方法 59 //数组转换成字符串---通过join方法 60 console.log(a);// ["b", "x","y","z" 3, "a"] 61 y=a.join("---"); 62 console.log(y);//b---x---y---z---3---a 63 64 </script> 65 </body> 66 </html>
--------------------------------------------------------
2-补充方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 //toString()、toFixed()、parseInt()、parseFloat()、Number()、isNaN（）、isArray() 11 12 var a=123.126; 13 //toString():转化为字符串； 14 var b=a.toString(); 15 console.log(b);//123.123 16 console.log(typeof b);//string 17 18 //toFixed():小数字符串；(四舍五入，不传参，只保留整数，传参a，保留小数点后a位） 19 var c=a.toFixed(2); 20 console.log(c);//123.13 21 console.log(typeof c);//string 22 23 //parseInt()取整数 24 var x="1123.1a5"; 25 var y="11b2.123"; 26 console.log(parseInt(x));//1123 27 console.log(parseInt(y));//11 28 29 //parseFloat()取小数 30 console.log(parseFloat(x));//1123.1 31 console.log(parseFloat(y));//11 32 33 // Number()转换成数字 34 console.log(Number(b));//123.126 35 console.log(typeof Number(b));//number 36 37 //isNaN（）判断不是数字 38 console.log(typeof x);//string 39 console.log(isNaN(x));//true 40 41 //isArray()判断是否是数组 42 var a=[1,2,3]; 43 console.log(Array.isArray(a));//true 44 console.log(Array.isArray(x));//false 45 46 </script> 47 </body> 48 </html>
--------------------------------------------------------
1，JavaScript 的Math对象
2，JavaScript 的日期对象
3，JavaScript 的函数
4，JavaScript 的定时器
3-Math对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 //获取时间对象 11 var time=new Date(); 12 //当前时间 13 console.log(time); //Mon May 18 2020 14:15:05 GMT+0800 (中国标准时间) 14 //时间戳 15 console.log(time.getTime()); //1589782505672 16 17 //年月日时分秒:月份从0计 18 var year=time.getFullYear(); 19 var mon=time.getMonth()+1; 20 var date=time.getDate(); 21 var hour=time.getHours(); 22 var min=time.getMinutes(); 23 var sec=time.getSeconds(); 24 //打印-- 2020年5月18日14时15分5秒 25 console.log(year+"年"+mon+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒"); 26 //页面显示-- 2020年5月18日14时15分5秒 27 document.body.innerText=year+"年"+mon+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒"; 28 29 </script> 30 </body> 31 </html>
--------------------------------------------------------
4-时间对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 //获取时间对象 11 var time=new Date(); 12 //当前时间 13 console.log(time); 14 //时间戳 15 console.log(time.getTime()); 16 //年月日时分秒:月份从0计 17 var year=time.getFullYear(); 18 var mon=time.getMonth()+1; 19 var date=time.getDate(); 20 var hour=time.getHours(); 21 var min=time.getMinutes(); 22 var sec=time.getSeconds(); 23 //打印 24 console.log(year+"年"+mon+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒"); 25 //页面显示 26 document.body.innerText=year+"年"+mon+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒"; 27 28 </script> 29 </body> 30 </html>
--------------------------------------------------------
视频3.函数+定时器
5-函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 /* 11 //定义函数 12 function f1() { 13 console.log("ok"); 14 } 15 16 f1(); //函数放上面也可以执行 17 18 19 //匿名函数像有名函数一样执行 20 //1.匿名函数需加上（（）、+、-、！、~）变成函数表达式，例子：+function () 21 //2.函数表达式()===>完成自执行 22 23 (function () { 24 console.log("ok2"); //（）这种方式和其他区别 25 })(); 26 27 +function () { 28 console.log("ok3"); 29 }(); 30 -function () { 31 console.log("ok4"); 32 }(); 33 !function () { 34 console.log("ok5"); 35 }(); 36 ~function () { 37 console.log("ok6"); 38 }(); 39 */ 40 //函数参数 41 // function sum(x,y,z){ 42 // var a=x+y+z; 43 // console.log(a); 44 // console.log("x:"+x+";y:"+y+";z:"+z); 45 // } 46 // sum(1,2,3); //x:1;y:2;z:3 47 // sum(1,2); //x:1;y:2;z:undefined， 48 // sum(1,2,3,4); //x:1;y:2;z:3 ，丢弃4 49 50 function sum() { 51 // console.log(arguments); 52 var s=0; 53 for(var i=0;i<arguments.length;i++){ 54 // s = s+arguments[i]; 55 s+=arguments[i]; //不定长传入参数相加 56 } 57 // console.log(s); 58 return s //函数返回值:return 59 } 60 var y=sum(1,2,3,4,5,6,7,8,9); 61 console.log(y);//45 62 63 </script> 64 </body> 65 </html>
--------------------------------------------------------
6-函数作用域
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 11 /* 12 例子1 13 1.初始化function f+var a--->a=undefined 14 2.函数从上到下的执行 15 */ 16 f(); 17 //函数作用域 18 //声明提前:函数执行前，所有变量已经进行了声明，但未赋值 19 function f() { 20 console.log(a);//undefined 21 var a="ok"; 22 console.log(a);//ok 23 } 24 25 /* 26 例子2 27 1.function a--->console.log("ok") 28 function a--->console.log("哈哈"); 29 ===>function a--->console.log("哈哈"); 30 2.从上往下执行:a();a();===> 31 */ 32 function a() { 33 console.log("ok"); 34 } 35 a(); 36 function a(){ 37 console.log("哈哈"); //输出2次哈哈 ，因为函数a覆盖定义，执行2次a() 38 } 39 a(); 40 41 /* 42 例子3 43 1.function x--->console.log("哈哈"); var x; 44 2.从上往下执行x();x(); 45 x=赋值;==>x();===>console.log("你好"); 46 */ 47 console.log("------------------------------"); 48 function x(){ 49 console.log("ok"); 50 } 51 x(); 52 function x(){ 53 console.log("哈哈"); //输出2次哈哈 54 } 55 x(); 56 //和上面不同，var x返回接收"你好" 57 var x=function () { 58 console.log("你好"); //输出1次你好 59 }; 60 x(); 61 62 63 //例子4，函数作用域:即在每一个函数体内，变量是有其自己的作用域的，外界访问不到； 64 //（外面var全局变量整个js生效，函数内var函数内生效） 65 /* 66 分析: 67 1.function y+var name 68 2.执行 69 A.var name="小明"; 70 B.console.log("2:"+name);===>2:小明 71 C.y();===>name="xiaoming"+console.log("1:"+name);====>1:xiaoming 72 D.console.log("3:"+name);===>3:小明 73 */ 74 console.log("------------------------------"); 75 var name="小明"; 76 function y(){ 77 var name="xiaoming"; 78 console.log("1:"+name); 79 } 80 81 console.log("2:"+name); //输出 2:小明 82 y(); //输出 1:xiaoming 83 console.log("3:"+name); //输出 3:小明 84 85 </script> 86 </body> 87 </html>
--------------------------------------------------------
7-定时器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button>清除定时器</button> 9 10 <script> 11 /* 12 //延迟1s后执行函数 13 setTimeout(function(){ 14 console.log("ok"); 15 },1000); 16 //定时器:每隔一秒执行一次函数 17 setInterval(function () { 18 console.log("ok"); 19 },1000) 20 */ 21 22 //定时器处理函数 23 function f(){ 24 console.log("ok"); 25 } 26 ST=setTimeout(f,1000); 27 SI=setInterval(f,1000); 28 29 //清除定时器 30 clearTimeout(ST); 31 var btn=document.querySelector("button"); //获取button按钮对象 32 btn.onclick=function () { 33 clearInterval(SI); 34 } 35 </script> 36 </body> 37 </html>
--------------------------------------------------------
视频4.总结+布置作业
总结：
js三
1.数组方法:length,可读可写,splice,前加后加,前删后删
2.toString,toFixed,parseInt()、parseFloat()、Number()、isNaN（）、isArray()
3.Math:取整+随机random
4.日期对象:年月日时分秒
5.函数:定义函数==>有名函数+匿名函数==>匿名函数+特殊符号===>函数表达式===>函数表达式+()===>实现自执行
函数参数:arguments
函数返回值:return
函数作用域:声明提前+作用域
6.延时器:ST=setTimeOut(f,1000);===>clearTimeOut(ST);
定时器:SI=setInterval(f,1000);===>clearInterval(SI);
-------------------------------------------------
作业：
要求
1，时间倒计时
2，当前时间跳转
3，倒计时完毕后文字改变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .num1{ 8 font-size:20px; 9 color:red; 10 } 11 .num2{ 12 color:skyblue; 13 } 14 </style> 15 </head> 16 <body> 17 <h4>敌军还有<span class="num1">5</span>秒到达战场</h4> 18 <h4>现在是北京时间:<span class="num2"></span></h4> 19 20 <script> 21 //倒计时完成 22 var obj=document.querySelector(".num1"); //获取class对象num1 23 var out=document.querySelector("h4"); //获取h4标签对象 24 var obj1=document.querySelector(".num2"); //获取class对象num2 25 var num1=obj.innerText; 26 // console.log(num1); 27 28 //定时器处理函数--倒计时5秒后改变文本并显示 29 function f() { 30 if(num1==1){ 31 clearInterval(SI); //清除定时器 32 out.innerText="全军出击!!"; //改变文本 33 }else{ 34 num1-=1; // 35 obj.innerText=num1; 36 } 37 } 38 var SI=setInterval(f,1000);//设置定时器，每1秒后执行f() 39 40 //定时器处理函数--每1秒获取当前时间并显示 41 function f1() { 42 //时间填入 43 var time=new Date(); 44 //年月日时分秒:月份从0计 45 var year=time.getFullYear(); 46 var mon=time.getMonth()+1; 47 var date=time.getDate(); 48 var hour=time.getHours(); 49 var min=time.getMinutes(); 50 var sec=time.getSeconds(); 51 mon=change(mon); //调用change函数 52 date=change(date); 53 hour=change(hour); 54 min=change(min); 55 sec=change(sec); 56 obj1.innerText=year+"年"+mon+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒"; //num2对象改变文本 57 } 58 59 //2020年5月18日14时15分5秒---文本中小于10的数字补全两位 60 function change(n) { 61 n="0"+n; //当n=01取01, 当n=045取45 62 n=n.slice(-2); //01 63 return n; 64 } 65 f1(); 66 setInterval(f1,1000); //设置定时器，每1秒执行f1() 67 68 </script> 69 </body> 70 </html>
