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对象的取整必须掌握