js-day09

字符串方法

toLowerCase()：

将字符串中的字母转成全小写

console.log('HELLO'.toLowerCase())
//会根据不同国家的语言进行转换大小写的形式
console.log('HELLO'.toLocaleLowerCase())

toUpperCase():

将字符串中的字母转成全大写

console.log('hello'.toUpperCase())

charAt(index):

• 返回指定下标位置的一个字符。如果没有找到，则返回空字符串； 参数是下标
• []中括号这种方式在低版本的浏览器里面是不支持的，charAt()方法兼容性更好

var str = 'abc'
console.log(str[0])
console.log(str.charAt(0))

indexOf:

返回一个字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到，则返回-1

 var str = 'abc'
 console.log(str.indexOf('a'))

例子：判断用户输入的邮箱地址是否有@符号

var email = prompt('请输入你的邮箱地址？')
if(email.indexOf('@')!=-1){
    alert('ok')
}else{
    alert('输入不符合规范')
}

if(email.indexOf('vip')!=-1){
    alert('你是尊贵的VIP')
}else{
    alert('请充值')
}

lastIndexOf:

在原始字符串中，从右往左查找。如果没有找到，则返回-1

onsole.log('abcad'.lastIndexOf('a'))

substring()：

在原字符串，返回一个字符串；不取结束位置，不能给负值会转成0

console.log('王成喜欢吃瓜'.substring(1, 3))
// 注意点：如果给了负值那么会转成0进行计算，那么两个参数的位置会进交换
console.log('王成喜欢吃瓜'.substring(2, -1))

slice():

提取字符串的片断，并在新的字符串中返回被提取的部分；不包括结束位置。给负值时，可以返回倒数第几个

 // console.log('王成喜欢喝酒'.slice(1, -2))

substr()

从起始索引号提取字符串中指定数目的字符。参数1表示起始位置 、值2表示截取的项数

console.log('王成喜欢喝酒'.substr(1, 3))

charCodeAt()

方法可返回指定位置的字符的 Unicode 编码

console.log('王'.charCodeAt())
console.log('a'.charCodeAt())
console.log('1'.charCodeAt())

trim()：

移除字符串首尾空白

• trimLeft()
• trimRight()
• trimStart()
• trimEnd()

var txt = document.getElementById('txt')
var btn = document.getElementById('btn')
btn.onclick = function(){
    if(txt.value.trim() == ''){
        alert('请填写内容')
        return
    }
}

// concat()：连接两个或多个字符串，返回连接后的字符串
console.log('王成'.concat('123'))

replace():替换方法

• 参数1表示的是要替换那个字符
• 参数2表示替换成那个字符
• replace()方法支持正则，正则就是验证字符的一种规则
  • g修饰符，表示全局匹配，整个字符串里面去进行替换

console.log('成比较傻, 还比较傻。喜欢说md'.replace(/色|傻/g, '*'))

console.log('成比较傻, 还比较傻。喜欢说md'.replace(/[傻md]/g, '*'))

var txt1 = document.getElementById('txt1')
var txt2 = document.getElementById('txt2')
var btn = document.getElementById('btn')

btn.onclick = function(){
    txt2.value = txt1.value.replace(/傻|md/g, '*')
}

split()

分割，根据你传递的字符的进行把字符串分割成数组

对比：slice()截取   splice() 组合（删除、新增、替换）

注意：如果不传入任何参数那么就把所有的字符当成一个数组元素，如果传入的是一个空字符串，那么就把每一个字符都当成一个数组元素

var url = 'https://www.mi.com?username=zhangsan&password=123'
var str = url.split('?')[1]
console.log(str)

统计字符串个数

• 需要把字符串字符当成这个对象的键放进对象里面，为了方便统计并把初始值设置为1
• 可以去遍历字符串
• 在进行判断这个对象里面是否有这个字符串字符的属性

var str = 'aaabbabddofsakhfsa'
var obj = {}
for(var i=0; i<str.length; i++){
// obj[str[i]]  str[0] 'a'  obj['a']
if(obj[str[i]]){    
// 能进来说明已经存在这个属性
obj[str[i]]++
}else{
// 到这里说明没有这个属性，必须把这个属性添加进对象并赋值为1
// obj['a'] = 1
obj[str[i]] = 1
}
}
console.log(obj)

Math方法 PI

π 3.1415926

console.log(Math.PI)

向上取整 ceil

console.log(Math.ceil(10.1))
console.log(Math.ceil(10.5))
console.log(Math.ceil(10.9))

向下取整 floor

console.log(Math.floor(10.1))
console.log(Math.floor(10.5))
console.log(Math.floor(10.9))

四舍五入 round

console.log(Math.round(10.4))
console.log(Math.round(10.5))
console.log(Math.round(10.9))

幂数（次方）pow

console.log(Math.pow(2, 2))
console.log(Math.pow(2, 3))
console.log(Math.pow(2, 11))

根号（开平方根）sqrt

console.log(Math.sqrt(4))
console.log(Math.sqrt(9))
console.log(Math.sqrt(16))

随机数（0-1）random

console.log(Math.random())

指的是0-1之间的随机数，但是取1的概念极小

随机数公式

• 一个范围，例如：20 --- 30
• random = Math.random()*(max-min)+min

如果你想取到那个区间的随机数，可以进行向上取整或者向下取整

实例： 网页随机变色，隔一秒钟网页背景变化一个颜色

知识补充：

• setInterval()定时器:可以让程序隔多长时间变化一次
• 参数:
  • 参数1表示的是一个函数，里面可以处理具体的业务（可以使用匿名函数或者有名称的函数）
  • 参数2表示的是时间，以毫秒计算的（1秒==1000毫秒）

以下这些对象不需要获取可以直接使用

• window
• document
• document.body
• document.documentELement（html标记、根标记）
• document.head
• document.title

function randomBg(){
    var random = parseInt(Math.random()*(max-min)+min)
    document.body.bgColor = '#'+random
}
// 网页一打开时，先执行一次randomBg这个函数，会设置一个默认值。再等待1秒后开始让定时器调用函数
randomBg()

// 表示1秒后才去调用randomBg函数
setInterval(randomBg, 1000)
}

绝对值 abs

console.log(Math.abs(-10))
console.log(Math.abs(9))

求最小值 min

console.log(Math.min(10, 20))

求最大值 max

console.log(Math.max(30, 20))

实例： 实例：求直角三角形斜边长 勾股定理 c平方 = a * a + b * b

function getLong(a, b){
        var c = Math.pow(a, 2) + Math.pow(b, 2)
        c = Math.sqrt(c)
        return c 
}
var res = getLong(3, 4)
console.log(res) // 5

Date对象

获取完整的日期对象 var d = new Date()

获取日期对象

• 获取年 console.log(d.getFullYear())

• 获取月（老外它们月份是从0开始的，因此需要手动+1） console.log(d.getMonth()+1)

• 获取周（星期） console.log(d.getDay())

• 获取天 console.log(d.getDate())

• 获取小时 console.log(d.getHours())

• 获取分钟 console.log(d.getMinutes())

• 获取秒 console.log(d.getSeconds())

• 获取毫秒 console.log(d.getMilliseconds())

设置日期对象

d.setFullYear(2024)
d.setMonth(12)
console.log(d)

简单设置日期

日期格式：2023-12-1 12:30:20

日期格式：2023/12/1 12:30:20

var d = new Date('2024-03-20')
var d = new Date('2024/03/20 12:30:20')
console.log(d)

时间戳：指的是从1970年1月1日零时到现在经过的毫秒数

var d = new Date()
console.log(d.getTime())

实例：抢购倒计时

抢购倒计时

• 利于将来的时间 - 现在的时间 = 差值（还剩多少时间）
• 日期转换
  • 总的毫秒数 =
  • 总秒数 = (将来的时间戳 - 现在的时间戳)/1000
  • 剩余的天数 = 总秒数 / 3600 / 24
  • 剩余的小时 = 总秒数 / 3600 % 24
  • 剩余的分钟 = 总秒数 / 60 % 60
  • 剩余的秒数 = 总秒数 % 60

var content = document.getElementById('content')
// 设置将来的时间
var endDate = new Date('2023-12-12 00:00:00')
// 动态获取现在的时间
setInterval(function(){
    var nowDate = new Date()
    // 获取总秒数
    var seconds = parseInt((endDate.getTime() - nowDate.getTime())/1000)
    // 剩余的天数
    var day = change(parseInt(seconds/3600/24))
    // 剩余的小时
    var h = change(parseInt(seconds/3600%24))
    // 剩余的分钟
    var m = change(parseInt(seconds/60%60))
    // 剩余的秒数
    var s = change(parseInt(seconds%60))

    // 补位操作
    // day<10 ? day = '0'+ day : day
    // h<10 ? h = '0'+ h : h
    // m<10 ? m = '0'+ m : m
    // s<10 ? s = '0'+ s : s


    // 进行字符串拼接
    content.innerHTML = '距离王成脱单还剩'+day+'天'+h+'小时'+m+'分钟'+s+'秒'
}, 1000)

function change(num){
    return num<10 ? num = '0'+ num : num
}

知识点补充： innerHTML和innerText

• 用来获取或者设置标记的内容的
• innerHTML，可以解析标记
• innerText，不能解析标记
• value 专门用来获取表单和设置表单的值的

 var p = document.getElementById('p')

 // console.log(p.innerHTML)
 // console.log(p.innerText)

 // p.innerHTML = '<b>王成嘿嘿</b>'
 p.innerText = '<b>王成嘿嘿</b>'

抢购倒计时（改）

var content = document.getElementById('content')
// 设置将来的时间
var endDate = new Date('2023-12-12 00:00:00')

// 当一进入页面的时候就先调用一次倒计时函数，这样就可以先进行赋值一次，等待到了1秒后，定时器再去调用函数
djs()

function djs(){
var nowDate = new Date()
// 获取总秒数
var seconds = parseInt((endDate.getTime() - nowDate.getTime())/1000)
// 剩余的天数
var day = change(parseInt(seconds/3600/24))
// 剩余的小时
var h = change(parseInt(seconds/3600%24))
// 剩余的分钟
var m = change(parseInt(seconds/60%60))
// 剩余的秒数
var s = change(parseInt(seconds%60))
// 进行字符串拼接
content.innerHTML = '距离王成脱单还剩'+day+'天'+h+'小时'+m+'分钟'+s+'秒'
}

// 动态获取现在的时间
setInterval(djs, 1000)

function change(num){
return num<10 ? num = '0'+ num : num
}