1. 日期对象
1.1 实例化
<script>// 实例化// 1.得到当前时间const date = new Date()console.log(date);// 2.得到指定时间const date1 = new Date('2025-3-14')console.log((date1));</script>1.2 日期对象方法
千万不要忘记加小括号
// 获得日期对象const date2 = new Date()// 使用里面的方法console.log(date2.getFullYear());console.log(date2.getMonth() + 1); //getMonth()取值0~11console.log(date2.getDate());console.log(date2.getDay()); //星期几，getDay()取值范围0~6，星期日是第0天显示格式化时间
<script>const div = document.querySelector('div')function getMyDate() {const date = new Date()// 不足10，前补0let h = date.getHours()h = h < 10 ? '0' + h : hlet m = date.getMinutes()m = m < 10 ? '0' + m : mlet s = date.getSeconds()s = s < 10 ? '0' + s : sreturn `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${h}:${m}:${s}`}div.innerHTML = getMyDate() //防止刚刷新时1秒的空白setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>另一种写法（不用手动补0）
const div = document.querySelector('div')const date = new Date()div.innerHTML = date.toLocaleString()setInterval(function () {const date = new Date() //要获取最新的时间div.innerHTML = date.toLocaleString() // 2025/3/16 11:46:04// div.innerHTML = date.toLocaleDateString() // 2025/3/16// div.innerHTML = date.toLocaleTimeString() // 11:46:04}, 1000)1.3 时间戳
//1. getTime()const date = new Date()console.log(date.getTime())// //2. +new Date()console.log(+new Date()) //new Date()是字符串 +转化成数字型// // 3. Date.now() 不需要实例化console.log(Date.now())//返回指定时间的时间戳
console.log(+new Date('2025/3/16 11:46:04')) //2025-3-16 11:46:04 也行 //返回星期几const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']console.log(arr[new Date().getDay()])倒计时效果
<script>// 随机颜色函数// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']// 利用for循环随机抽6次 累加到 str里面for (let i = 1; i <= 6; i++) {// 每次要随机从数组里面抽取一个 // random 是数组的索引号 是随机的let random = Math.floor(Math.random() * arr.length)// str = str + arr[random]str += arr[random]}return str} else {// 4. 否则是 false 则返回 rgb(255,255,255)let r = Math.floor(Math.random() * 256) // 55let g = Math.floor(Math.random() * 256) // 89let b = Math.floor(Math.random() * 256) // 255return `rgb(${r},${g},${b})`}}// 页面刷新随机得到颜色const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = getRandomColor()// 函数封装 getCountTimefunction getCountTime() {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('20225-3-16 13:30:00')// console.log(now, last)// 3. 得到剩余的时间戳 count 记得转换为 秒数const count = (last - now) / 1000// console.log(count)// 4. 转换为时分秒// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时// m = parseInt(总秒数 / 60 % 60); // 计算分数// s = parseInt(总秒数 % 60); // let d = parseInt(count / 60 / 60 / 24) // 计算当前秒数let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconsole.log(h, m, s)// 5. 把时分秒写到对应的盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#scond').innerHTML = s}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)// 日期const next = document.querySelector('.next')function getDate() {const date = new Date()next.innerHTML = `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`}getDate()setInterval(getDate, 1000)</script>2. 节点操作—元素节点
2.1 DOM节点
2.2 查找结点（通过关系 属性）
//关闭广告
<body><div class="box">我是广告1<div class="box1">X</div></div><div class="box">我是广告2<div class="box1">X</div></div><div class="box">我是广告3<div class="box1">X</div></div></div><script>//单个广告// const box1 = document.querySelector('.box1')// box1.addEventListener('click', function () {// this.parentNode.style.display = 'none'// })//多个广告const closeBtn = document.querySelectorAll('.box1')for (let i = 0; i < closeBtn.length; i++) {closeBtn[i].addEventListener('click', function () {this.parentNode.style.display = 'none'})}</script>
</body>
得到的是伪数组，包含所有的亲儿子
2.3 增加节点（重点）
<script>// 1.创建节点const li = document.createElement('li')// 2.追加节点const ul = document.querySelector('ul')li.innerHTML = '我是新增的li'// ul.appendChild(li) //尾增ul.insertBefore(li, ul.children[0]) //将li插入到ul中第一个li的前面</script> <script>// 1. 重构 let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]const ul = document.querySelector('.box-bd ul')// 1. 根据数据的个数，创建 对应的小lifor (let i = 0; i < data.length; i++) {// 2. 创建新的小liconst li = document.createElement('li')// 把内容给lili.innerHTML = `<a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a>`// 3. ul追加小liul.appendChild(li)}</script>
const ul = document.querySelector('ul')// 克隆节点 元素.cloneNode(true) 深克隆 将被克隆元素中所有内容都克隆//.cloneNode(false) 浅克隆 只克隆标签const li1 = ul.children[0].cloneNode(true)// console.log(li1);ul.appendChild(li1)2.4 删除节点
ul.removeChild(ul.children[0])3. M端事件（了解）
4. JS插件
5. 案例—学生信息表
<script>// 获取元素const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const tbody = document.querySelector('tbody')// 获取所有带有name属性的 元素const items = document.querySelectorAll('[name]')// 声明一个空的数组， 增加和删除都是对这个数组进行操作const arr = []// 1. 录入模块// 1.1 表单提交事件const info = document.querySelector('.info')info.addEventListener('submit', function (e) {// 阻止默认行为 不跳转e.preventDefault()// console.log(11)// 这里进行表单验证 如果不通过，直接中断，不需要添加数据// 先遍历循环for (let i = 0; i < items.length; i++) {if (items[i].value === '') {return alert('输入内容不能为空')}}// 创建新的对象 取得表单元素的值const obj = {stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}// console.log(obj)arr.push(obj) // 追加给数组里面this.reset() // 清空表单 重置 render() // 调用渲染函数})// 2. 渲染函数 因为增加和删除都需要渲染function render() {// 先清空tbody 以前的行 ，把最新数组里面的数据渲染完毕 tbody.innerHTML = ''// 遍历arr数组for (let i = 0; i < arr.length; i++) {// 生成 tr const tr = document.createElement('tr')tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a></td>`// 追加元素 父元素.appendChild(子元素)tbody.appendChild(tr)}}// 3. 删除操作// 3.1 事件委托 tbodytbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 得到当前元素的自定义属性 data-id// console.log(e.target.dataset.id)// 删除arr 数组里面对应的数据arr.splice(e.target.dataset.id, 1)render() // 重新渲染一次}})</script>