day09 Date对象和String类型
1.回顾
获取非行间样式和行间样式的函数封装 function getStyle(elem,attr){ if(window.getComputedStyle){//标准浏览器 return window.getComputedStyle(elem)[attr] }else{//IE低版本浏览器 return elem.currentStyle[attr] } } 求20-100之间的随机整数 Math.random() 0-1 包括0不包括1 Math.floor( Math.random() * (100-20+1) + 20 ) [20 101] 代码复用 结构和功能是一致的时候 实现步骤 1-把它当成一组去实现 里面的标签必须通过父元素获取 2-实现这一组的功能 3-将这一组功能的而主要代码放入到一个函数中 把父元素作为参数 4-调用调试 点击事件中 有一个定时器 解决方法 在定时器定义之前就清除定时器
2. Math对象
2.1 取整
-
parseInt 取整 舍弃小数部分
-
Math.floor 向下取整 舍弃小数部分
-
Math.ceil 向上取整 有小数就进位
-
Math.round 四舍五入
2.2 数学方法
-
Math.max(数值1,数值2,数值3.....) 找序列中最大的值
-
Math.min(数值1,数值2,数值3.....) 找序列中最小的值
-
Math.abs 取绝对值
-
Math.sqrt 开根号
-
Math.pow(num,n) 次方幂 num底数 n 次方幂
2.3 随机数
-
Math.random() 随机生成0-1之间的数据 包括0不包括1
-
随机生成min到max之间的整数
-
Math.floor( Math.random() * (max - min + 1) + min )
-
3.时间对象Date
==月份单词==
January:一月 February:二月 March:三月 April:四月 May:五月 June:六月 July:七月 August:八月 September:九月 October:十月 November:十一月 December:十二月
3.1 创建时间对象
-
创建当前时间对象
<script> // 1.创建当前这一时刻的时间对象 var oDate = new Date(); console.log(oDate);// Thu Sep 01 2022 09:57:06 GMT+0800 (中国标准时间) // 2.创建每秒的时间 setInterval(function(){ var a = new Date(); // console.log(a,"现在时刻"); },1000) </script>
-
创建自定义时间
//a. 自定义的时间是一个字符串 var sDate = new Date("2023,1,1,12:00:00"); var sDate = new Date("2023 1 1 12:00:00"); var sDate = new Date("2023/1/1 12:00:00"); var sDate = new Date("2023-1-1 12:00:00"); console.log(sDate);//Sun Jan 01 2023 12:00:00 GMT+0800 (中国标准时间) //b. 时间分开接受参数 创建2023年10月1日 12:00:00的时间 // 问题 想创建10月 但是结果出来的是11月 // 分析原因: 月份是从0开始的 0-1月 10-11月 var aDate = new Date(2023,9,1,12,0,0) //想创建10月 就给9 console.log(aDate);// Sun Oct 01 2023 12:00:00 GMT+0800 (中国标准时间) var bDate = new Date(2023,9,1); console.log(bDate);// Sun Oct 01 2023 00:00:00 GMT+0800 (中国标准时间)
3.2 获取时间
-
获取特定格式的时间
var oDate = new Date(); // 年月日 时分秒 日期 console.log(oDate);//Thu Sep 01 2022 10:39:02 GMT+0800 (中国标准时间) // 1.获取特定格式的时间 年 月 日 console.log(oDate.toDateString());//Thu Sep 01 2022 console.log(oDate.toLocaleDateString());//2022/9/1 // 2.获取特定格式的时间 时 分 秒 console.log(oDate.toTimeString());//10:41:30 GMT+0800 (中国标准时间) console.log(oDate.toLocaleTimeString());// 10:42:02
-
获取单个时间
// 3.获取单个时间 // 年 console.log(oDate.getFullYear());//2022\ // 月 月份是从0开始 0----1月份 8----9月份 console.log(oDate.getMonth() + 1);//9 // 日 console.log(oDate.getDate());// 1 // 时 console.log(oDate.getHours()); // 分钟 console.log(oDate.getMinutes()); // 秒 console.log(oDate.getSeconds()); // 星期 ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"] console.log(oDate.getDay());//4
-
获取时间戳
// 4.获取现在的时间戳 1970年1月1日0:0:0 到现在时刻的毫秒 console.log(oDate.getTime()) // 5.获取未来时间的时间戳 1970年1月1日0:0:0 到2023年10月1日的毫秒 var sDate = new Date("2023,10,1") console.log(sDate);//Sun Oct 01 2023 00:00:00 GMT+0800 (中国标准时间) console.log(sDate.getTime());//1696089600000
3.3 倒计时
-
实现思路:倒计时 未来时间的时间戳-现在时间的时间戳 = 差值(毫秒单位)
-
==注意==
-
1天 24 * 60 * 60 86400s
-
1时 60*60 3600s
-
1分 60 60s
-
<script> auto(); setInterval(auto, 1000) function auto() { // 1.倒计时 未来时间的时间戳-现在时间的时间戳 = 差值(毫秒单位) // 创建未来时间 var futureDate = new Date("2022,9,3"); // 创建现在时间 var currentDate = new Date(); // 时间差 毫秒单位转成秒 1s = 1000ms var time = futureDate.getTime() - currentDate.getTime(); time = parseInt(time / 1000); // console.log(time);// 131680 // 将time 转为 天 时 分 秒 /* 1天 24*60*60 86400s 1时 60*60 3600s 1分 60 60s */ var t = parseInt(time / 86400); console.log(t); var h = parseInt((time % 86400) / 3600); console.log(h); var m = parseInt((time % 86400 % 3600) / 60); console.log(m); var s = time % 60; console.log(s); // 将结果显示在页面上 document.body.innerHTML = "还剩余" + suppleZero(t) + "天" + suppleZero(h) + "时" + suppleZero(m) + "分" + suppleZero(s) + "秒" } function suppleZero(num) { return num < 10 ? "0" + num : num; } </script>
4.字符串对象
4.1 创建字符串对象
-
字面量创建
// 1.字面量创建 (包装类对象 是使用字符串的方法的之后 会暂时将自己伪装成一个对象) var str1 = "0711web"; console.log(str1);//0711web console.log(typeof str1);// string console.log(str1.length);// 7
-
new关键字创建
// 2.new 关键字创建 var str2 = new String("0711web"); console.log(str2);//String {'0711web'} console.log(typeof str2);// object console.log(str2.length);//7
4.2 字符串的方法
length
-
获取字符串长度
charAt
-
语法:str.charAt(下标)
-
作用 :获取下标对应的字符
// length console.log(str1.length);//7 // charAt(下标) console.log(str1.charAt(6));//b
charCodeAt
-
语法:str.charCodeAt(下标)
-
作用 :获取下标对应的字符编码
// charCodeAt(下标) "A"----65 "a"----97 "0"----48 console.log(str1.charCodeAt(0));//48
indexOf
==从左往右查找==
-
语法:str.indexOf(searchValue,index)
-
作用 :查询一个字符串在另一个字符串中首次出现的位置 如果出现则是返回该字符串的下标位置 没有找到则是返回-1
-
参数
-
searchValue:必需参数 需要查询的字符串
-
index:可选值 开始查找的位置 默认是从下标0开始查找
-
// indexof var str2 = "webuiwebuiwebui"; var s = "ui"; console.log(str2.indexOf(s));// 3 ui的u的下标 var s1 = "java" console.log(str2.indexOf(s1));// -1 var s3 = "ui"; console.log(str2.indexOf(s3,5));//8 var str3 = "uiwebui"; var s4 = "ui"; console.log(str3.indexOf(s4));//0
lastindexof
==从右往左查找==
-
语法 :str.lastindexOf(searchvalue,index)
-
作用 :从字符串后面开始往前查找第一次出现的目标位置 如果找到返回正常的索引值 如果找不到则是返回-1
-
参数
-
searchValue: 必需参数 需要查询的字符串
-
index:可选值 开始查找的位置 默认是从str.length-1开始查找
// lastindexOf 了解 var str = "webuiwebjava"; var s1 = "web" console.log(str.lastIndexOf(s1));//5 console.log(str.lastIndexOf(s1,3));//0
-
字符串截取方法
substring
-
语法:str.substring(start,end)
-
作用:截取介于两个指定下标之间的字符 包括start不包括end
-
参数
-
start 开始截取的下标 可选值 默认是0
-
end 结束截取的下标 可选值 默认是str.length
-
// 1.substring(start,end) var str1 = "webuiwebuiwebui"; console.log(str1.substring());// webuiwebuiwebui console.log(str1.substring(2));// buiwebuiwebui console.log(str1.substring(2,4));// bu
slice
-
语法:str.slice(start,end)
-
作用:截取介于两个指定下标之间的字符 包括start不包括end
-
参数
-
start 开始截取的下标 可选值 默认是0
-
end 结束截取的下标 可选值 默认是str.length
-
// 2.slice(start,end) var str2 = "webuiwebuiwebui"; console.log(str2.slice());//webuiwebuiwebui console.log(str2.slice(3));//uiwebuiwebui console.log(str2.slice(3,6));//uiw
slice和substring的区别
-
substring 会自动调整位置 slice不会自动调整位置
-
substring 碰见负数会默认为0 slice碰见负数认为倒数第几个
// 3.区别 var str3 = "abcdefg"; console.log(str3.substring(2,0));//ab 自动调整位置 (0,2) console.log(str3.slice(2,0));//" " 不会自动调整位置 console.log(str3.substring(2,-1));//ab 负数会默认为是0 console.log(str3.slice(2,-1));//cdef 负数默认为倒数第几个 var str4 = ["[object Object]","[object Function]","[object Array]"]; console.log(str4[0].slice(8,-1));//Object console.log(str4[1].slice(8,-1));//Function console.log(str4[2].slice(8,-1));//Array for(var i = 0;i<str4.length;i++){ console.log(str4[i].slice(8,-1)) }
substr
-
语法 str.substr(start,length)
-
作用:从哪开始截取 截取几个
var str = "110123200010010987"; console.log(str.substr(6,4))// 2000
大小写转换
toUpperCase
-
语法 str.toUpperCase() 转大写
toLowerCase
-
语法 str.toLowerCase() 转小写
-
验证码不区分大小写
<script> var str = "ABcdeff"; console.log(str.toUpperCase());"ABCDEFF"; //转大写 console.log(str.toLowerCase());"abcdeff"; //转小写 // 验证码不区分大小写 var str1 = "OpXy"; //系统给的验证码 var str2 = "apxy"; //用户输入的验证码 if(str1.toLowerCase() == str2.toLowerCase()){ console.log("用户输入正确") } </script>
replace
-
语法 str.replace(searchValue,replaceValue)
-
作用 替换字符串中的某个字符 返回一个新的字符串 默认一次只能替换一个
-
参数
-
searchValue 必需 将要被替换的字符串
-
replaceValue 必需 替换的字符
-
// replace(searchValue,replaceValue) var str = "Webuiwebuiwebui"; var newStr = str.replace("web","java");//将web字符串替换成java console.log(newStr,str)
trim
-
语法 str.trim()
-
作用 去除字符串的首尾空格
// trim 去除字符串的首尾空格 var str = " webui webui "; console.log(str.trim());
split
-
语法:str.split(分割标识)
-
作用:将字符串根据特定标识分割成数组
// split 将字符串根据特定标识分割成数组 var date = "2022-9-1";// [2022,9,1] var newDate = date.split("-"); console.log(newDate,date);// ['2022', '9', '1'] '2022-9-1' var name = "澄邈、德泽、海超" console.log(name.split("、"));// ['澄邈', '德泽', '海超']
5.面试题
1-字符串的方法必须掌握 2-倒计时必须掌握 3-获取单个时间必须掌握 4-Math对象的取整必须掌握