JS中级篇（二）

瞳眬

于 2024-08-13 11:06:03 发布

阅读量637

点赞数 25

分类专栏：前端开发文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/2301_79614134/article/details/141139878

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JS中级篇（二）

12.日期对象

<script>
    // 获取当前时间 
    const date = new Date()
    // 指定时间
    const date1 = new Date('2024-8-12 08:30:00')
</script>

关键字	说明	取值
getFullYear()	获得年份	四位数
getMonth()	获得月份	0 ~ 11
getDate()	获取月份中的某一天
getDay()	获取星期	0 ~ 6
getHours()	获取小时	0 ~ 23
getMinutes()	获取分钟	0 ~ 59
getSeconds()	获取秒	0 ~ 59

13.时间戳

<script>
	// 方法一：getTime()
    const date = new Date()
    console.log(date.getTime())
    // 方法二：+new Date()
    console.log(+new Date())
    // 方法三：Date.now()
    console.log(Date.now());
</script>

注意

通过时间戳得到是毫秒，需要转换为秒在计算
转换公式：
（1）天数：d = parseInt(总秒数/ 60/60 /24)
（2）小时：h = parseInt(总秒数/ 60/60 %24)
（3）分钟：m = parseInt(总秒数 /60 %60 )
（4）秒数：s = parseInt(总秒数%60)

14.节点操作

<body>
  <div class="one">
    <div class="two">
      <div class="three">x</div>
    </div>
  </div>
  <script>
  
    const c = document.querySelector('.three')
    
	// 父节点查找
	// 子元素.parentNode
    console.log(c.parentNode)
    console.log(c.parentNode.parentNode)
    
    // 子节点查找
    // 父元素.children
    
    //兄弟节点查找
    console.log(c.previousElementSibling)  // 上一个兄弟
    console.log(c.nextElementSibling)  // 下一个兄弟
    
    // 创建节点
    document.createElement('标签名')

	// 追加节点
	// 父元素.appendChild(要插入的元素，最前面)
	// 父元素.insertBefore(要插入的元素，最后面)

	// 增加节点
	// 元素.appendChild(ul.children[第几个].cloneNode(true))
	// 若为true，则代表克隆时会包含后代节点一起克隆
    
    // 删除节点
    // 父元素.removeChild(ul.children[第几个])
  </script>
</body>

15.延时函数

<script>
	// 延时两秒后执行函数，仅仅执行一次
    let n = setTimeout(function () {
      console.log('时间到了')
    }, 2000)
    // 清除延时函数
    clearTimeout(n)
</script>

16.location对象

<script>
	// 跳转页面
	location.href = 'http://www.baidu.com'
	// 强制刷新  ctrl+f5
    location.reload(true)
    // 获取地址？后面部分
    location.search
    // 获取地址#后面部分
    location.hash
</script>

17.histroy对象

关键字	说明
back()	页面后退功能
forward	页面前进功能
go(参数)	参数是1，代表前进。参数是-1，代表后退

18.本地存储

作用	用法
存储数据	localStorage.setItem(key, value)
获取数据	localStorage.getItem(key)
删除数据	localStorage.removeItem(key)
复杂数据存储	localStorage.setItem(‘obj’, JSON.stringify(obj)) const str = localStorage.getItem(‘obj’) console.log(JSON.parse(str))

19.迭代数组

<script>
    const arr = ['red', 'blue', 'green']
    const newArr = arr.map(function (item, index) {
    	console.log(item) // item 得到数组 red blue green
    	console.log(index) // index 得到索引号 0 1 2
    })
    // 分隔符
    console.log(arr.join(''))
</script>

20.正则表达式

<script>
	// const 变量名 =  /表达式/
	// 变量名.test(被检测的字符串)
	// 变量名.exec(被检测的字符串)

	console.log(/哈/.test('哈')) // true
    console.log(/哈/.test('哈哈')) // true
    console.log(/哈/.test('二哈')) // true
    // 1. 边界符
    console.log(/^哈/.test('哈')) // true
    console.log(/^哈/.test('哈哈')) // true
    console.log(/^哈/.test('二哈')) // flase
    console.log(/^哈$/.test('哈')) // true  只有这种情况为true 否则全是false
    console.log(/^哈$/.test('哈哈')) // false
    console.log(/^哈$/.test('二哈')) // false
    //  量词 * 类似 >=0 次
    console.log(/^哈$/.test('哈')) // true
    console.log(/^哈*$/.test('')) // true
    console.log(/^哈*$/.test('哈')) // true
    console.log(/^哈*$/.test('哈哈')) // true
    console.log(/^哈*$/.test('二哈很傻')) //  false
    console.log(/^哈*$/.test('哈很傻')) //  false
    console.log(/^哈*$/.test('哈很哈')) // false
    //  量词 + 类似 >=1 次
    console.log(/^哈$/.test('哈')) // true
    console.log(/^哈+$/.test('')) // false
    console.log(/^哈+$/.test('哈')) // true
    console.log(/^哈+$/.test('哈哈')) // true
    console.log(/^哈+$/.test('二哈很傻')) //  false
    console.log(/^哈+$/.test('哈很傻')) //  false
    console.log(/^哈+$/.test('哈很哈')) // false
    //  量词 ? 类似  0 || 1
    console.log(/^哈?$/.test('')) // true
    console.log(/^哈?$/.test('哈')) // true
    console.log(/^哈?$/.test('哈哈')) // true
    console.log(/^哈?$/.test('二哈很傻')) //  false
    console.log(/^哈?$/.test('哈很傻')) //  false
    console.log(/^哈?$/.test('哈很哈')) // false
    // 量词 {n} 写几，就必须出现几次
    console.log(/^哈{4}$/.test('哈哈哈哈哈')) // false
    // 量词 {n,}   >=n
    console.log(/^哈{4,}$/.test('哈哈哈哈哈')) // true
    // 量词 {n,m}  逗号左右两侧千万不能有空格    >=n && <= m
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈')) // true
    // 字符类   [abc]  只选1个
    console.log(/^[abc]$/.test('a'))  // true
    console.log(/^[abc]$/.test('b'))  // true
    console.log(/^[abc]$/.test('c'))  // true
    console.log(/^[abc]$/.test('ab'))  // false
    console.log(/^[abc]{2}$/.test('ab'))  // true
    // 字符类   [a-z]  只选1个
    console.log(/^[A-Z]$/.test('p'))  // false
    console.log(/^[A-Z]$/.test('P'))  // true
    console.log(/^[0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test(2))  // true
    console.log(/^[a-zA-Z0-9]$/.test('p'))  // true
    console.log(/^[a-zA-Z0-9]$/.test('P'))  // true
</script>