目录
一、日期对象
1、实例化
2、时间对象方法
3、时间戳
(1)时间戳
(2)获取时间戳的三种方式:
(3)倒计时效果
二、节点操作
1、DOM 节点
2、 查找节点
3、增加节点
(1)创建节点
(2)追加节点
(3)学成在线案例渲染
(4)克隆节点
4、删除节点
三、M端事件
四、JS插件
1、插件:
2、学习插件的基本过程
3、相关插件
五、学生信息表案例
(1)CSS样式代码如下:
(2)JavaScript代码如下:
一、日期对象
- 日期对象:用来表示时间的对象
- 作用:可以得到当前系统时间
1、实例化
- 在代码中发现了 new 关键字时,一般将这个操作称为实例化
- 创建一个时间对象并获取时间
得到当前时间
const date = new Date()
得到指定时间
const date = new Date('2022-5-1 08:30:00')
console.log(date)
2、时间对象方法
使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
页面显示时间:
需求:将当前时间以:YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08
案例分析: ①:调用日期对象方法进行转换 ②:记得数字要补0 ③:字符串拼接后,通过 innerText 给 标签
示例代码如下:
<div></div><script>const div = document.querySelector('div')function getMyDate() {const date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`}div.innerHTML = getMyDate()setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>
<div></div><script>const div = document.querySelector('div')// 得到日期对象const date = new Date()div.innerHTML = date.toLocaleString() // 2024/8/29 09:41:21setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString() // 2024/8/29 09:41:21}, 1000)// div.innerHTML = date.toLocaleDateString() // 2024/8/29// div.innerHTML = date.toLocaleTimeString() // 2024/8/29</script>
3、时间戳
(1)时间戳
- 使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
- 什么是时间戳::是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
- 算法:将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
(2)获取时间戳的三种方式:
示例代码如下:
<script>// 1. 使用getTime()方法const date = new Date()console.log(date.getTime())// 2.简写 +new Date()console.log(+new Date())// 3.使用 Date.now()//无需实例化//但是只能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳console.log(Date.now());// 2. +new Date()console.log(+new Date())console.log('-----------------');console.log(+new Date('2022-4-1 18:30:00'))// 我要根据日期 Day() 0 ~ 6 返回的是 星期一const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']// const date = new Date()console.log(arr[new Date().getDay()])</script>
(3)倒计时效果
需求:计算到下班还有多少时间?
示例代码如下:
// 函数封装 getCountTimefunction getCountTime() {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('2022-4-1 18: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)
二、节点操作
1、DOM 节点
- DOM节点:DOM树里每一个内容都称之为节点
- 节点类型:
- 元素节点:所有的标签,比如 body、div html 是根节点
- 属性节点:所有的属性,比如 href
- 文本节点:所有的文本
2、 查找节点
- 节点关系:针对的找亲戚返回的都是对象父节点、子节点、兄弟节点
- 父节点查找:parentNode 属性。返回最近一级的父节点,找不到返回为null
示例代码如下:
<div class="yeye"><div class="dad"><div class="baby">x</div></div></div><script>const baby = document.querySelector('.baby')console.log(baby) // 返回dom对象console.log(baby.parentNode) // 返回dom对象console.log(baby.parentNode.parentNode) // 返回dom对象</script>
示例代码如下:
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>// const ul = document.querySelector('ul') // ul// console.log(ul.children) // 得到伪数组 选择的是 亲儿子 const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling) // 上一个兄弟console.log(li2.nextElementSibling) // 下一个兄弟</script>
3、增加节点
(1)创建节点
- 即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
- 创建元素节点方法:
(2)追加节点
- 要想在界面看到,还得插入到某个父元素中
- 插入到父元素的最后一个子元素
- 插入到父元素中某个子元素的前面
示例代码如下:
<ul><li>我是老大</li></ul><script>// // 1. 创建节点// const div = document.createElement('div')// // console.log(div)// 2. 追加节点 作为最后一个子元素// document.body.appendChild(div)const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'// ul.appendChild(li)// ul.children// 3. 追加节点// insertBefore(插入的元素, 放到哪个元素的前面)ul.insertBefore(li, ul.children[0])</script>
(3)学成在线案例渲染
需求:按照数据渲染页面
分析: ①:准备好空的ul 结构 ②:根据数据的个数,创建一个新的空li ③:li里面添加内容 img 标题等 ④:追加给ul 重点练习:创建节点和追加节点
示例代码如下:
<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>
(4)克隆节点
示例代码如下:
<ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')// 1 克隆节点 元素.cloneNode(true)// const li1 = ul.children[0].cloneNode(true)// console.log(li1)// 2. 追加ul.appendChild(ul.children[0].cloneNode(true))</script>
4、删除节点
- 若一个节点在页面中已不需要时,可以删除它
- 在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
- 语法:
父元素.removeChild(要删除的元素)
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
示例代码如下:
<style>.box {display: none;}</style>
</head><body><div class="box">123</div><ul><li>没用了</li></ul><script>const ul = document.querySelector('ul')// 删除节点 父元素.removeChlid(子元素)ul.removeChild(ul.children[0])</script>
</body>
三、M端事件
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
- 触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
- touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔 )对屏幕或者触控板操作。
- 常见的触屏事件如下:
四、JS插件
1、插件:
就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
2、学习插件的基本过程
- 熟悉官网,了解这个插件可以完成什么需求
- 看在线演示,找到符合自己需求的demo
- 查看基本使用流程
- 查看APi文档,去配置自己的插件
- 注意: 多个swiper同时使用的时候, 类名需要注意区分
3、相关插件
Swiper插件
五、学生信息表案例
(1)CSS样式代码如下:
* {margin: 0;padding: 0;
}a {text-decoration: none;color:#721c24;
}
h1 {text-align: center;color:#333;margin: 20px 0;}
table {margin:0 auto;width: 800px;border-collapse: collapse;color:#004085;
}
th {padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;
}
td,th {border:1px solid #b8daff;
}
td {padding:10px;color:#666;text-align: center;font-size: 16px;
}
tbody tr {background: #fff;
}
tbody tr:hover {background: #e1ecf8;
}
.info {width: 900px;margin: 50px auto;text-align: center;
}
.info input, .info select {width: 80px;height: 27px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;box-sizing: border-box;margin-right: 15px;
}
.info button {width: 60px;height: 27px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}
(2)JavaScript代码如下:
<body><h1>新增学员</h1><form class="info" autocomplete="off">姓名:<input type="text" class="uname" name="uname" />年龄:<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资:<input type="text" class="salary" name="salary" />就业城市:<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><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)// console.log(arr)// 清空表单 重置 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)console.log(arr)// 从新渲染一次render()}})</script></body>