安庆集团网站建设,沈阳做机床的公司网站,wordpress文章地址,专业网站设计的网站提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、日期对象实例化方法 二、时间戳三、DOM 节点插入节点删除节点查找节点父子关系兄弟关系 四、案例举例1.显示格式化时间2.倒计时3.学成在线首页4.学生就业信… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言一、日期对象实例化方法 二、时间戳三、DOM 节点插入节点删除节点查找节点父子关系兄弟关系 四、案例举例1.显示格式化时间2.倒计时3.学成在线首页4.学生就业信息表 前言
能够插入、删除和替换元素节点能够依据元素节点关系查找节点
一、日期对象
ECMAScript 中内置了获取系统时间的对象 Date使用 Date 时与之前学习的内置对象 console 和 Math 不同它需要借助 new 关键字才能使用。
实例化 // 1. 实例化// const date new Date(); // 系统默认时间const date new Date(2020-05-01) // 指定时间// date 变量即所谓的时间对象console.log(typeof date)方法 // 1. 实例化
const date new Date();
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日时、分、秒
const year date.getFullYear(); // 四位年份
const month date.getMonth(); // 0 ~ 111.getFullYear 获取四位年份
2.getMonth 获取月份取值为 0 ~ 11
3.getDate 获取月份中的每一天不同月份取值也不相同
4.getDay 获取星期取值为 0 ~ 6
5.getHours 获取小时取值为 0 ~ 23
6.getMinutes 获取分钟取值为 0 ~ 59
7.getSeconds 获取秒取值为 0 ~ 59
二、时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数它是一种特殊的计量时间的方式。
注ECMAScript 中时间戳是以毫秒计的。 // 1. 实例化const date new Date()// 2. 获取时间戳console.log(date.getTime())
// 还有一种获取时间戳的方法console.log(new Date())// 还有一种获取时间戳的方法console.log(Date.now())
获取时间戳的方法分别为 getTime 和 Date.now 和 new Date()
三、DOM 节点
回顾之前 DOM 的操作都是针对元素节点的属性或文本的除此之外也有专门针对元素节点本身的操作如插入、复制、删除、替换等。
插入节点
在已有的 DOM 节点中插入新的 DOM 节点时需要关注两个关键因素首先要得到新的 DOM 节点其次在哪个位置插入这个节点。
如下代码演示
bodyh3插入节点/h3p在现有 dom 结构基础上插入新的元素节点/phr!-- 普通盒子 --div classbox/div!-- 点击按钮向 box 盒子插入节点 --button classbtn插入节点/buttonscript// 点击按钮在网页中插入节点const btn document.querySelector(.btn)btn.addEventListener(click, function () {// 1. 获得一个 DOM 元素节点const p document.createElement(p)p.innerText 创建的新的p标签p.className info// 复制原有的 DOM 节点const p2 document.querySelector(p).cloneNode(true)p2.style.color red// 2. 插入盒子 box 盒子document.querySelector(.box).appendChild(p)document.querySelector(.box).appendChild(p2)})/script
/body结论 createElement 动态创建任意 DOM 节点 cloneNode 复制现有的 DOM 节点传入参数 true 会复制所有子节点 appendChild 在末尾结束标签前插入节点 insertBefore 在父节点中任意子节点之前插入新节点
删除节点
删除现有的 DOM 节点也需要关注两个因素首先由父节点删除子节点其次是要删除哪个子节点。
body!-- 点击按钮删除节点 --button删除节点/buttonulliHTML/liliCSS/liliWeb APIs/li/ulscriptconst btn document.querySelector(button)btn.addEventListener(click, function () {// 获取 ul 父节点let ul document.querySelector(ul)// 待删除的子节点let lis document.querySelectorAll(li)// 删除节点ul.removeChild(lis[0])})/script
/body结论removeChild 删除节点时一定是由父子关系。
查找节点
DOM 树中的任意节点都不是孤立存在的它们要么是父子关系要么是兄弟关系不仅如此我们可以依据节点之间的关系查找节点。
父子关系
childNodes 获取全部的子节点回车换行会被认为是空白文本节点children 只获取元素类型节点parentNode 获取父节点以相对位置查找节点实际应用中非常灵活。
兄弟关系
previousSibling 获取前一个节点以相对位置查找节点实际应用中非常灵活。nextSibling 获取后一个节点以相对位置查找节点实际应用中非常灵活。
四、案例举例
1.显示格式化时间
年月日时分秒的获取
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 300px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}/style
/headbodydiv/divscriptconst 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
/body/html2.倒计时
秒数转化为*时 *分 *秒 00:00:00的表示形式 实时更新并显示时间
scriptconst countdown document.querySelector(.countdown)countdown.style.backgroundColor rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})const next document.querySelector(.next)next.innerHTML 今天是${new Date().getFullYear()}年${new Date().getMonth() 1}月${new Date().getDate()}日function tran() {//约定时间-当前时间/1000const now new Date() //当前const last new Date(2024-02-27 23:30:00)const re (last - now) / 1000//秒转化为**时**分**秒let m parseInt(re / 60 % 60) //parseIntlet h Math.floor(re / 60 / 60 % 24)let s parseInt(re % 60)//判断是否大于10h h 10 ? h : 0 hm m 10 ? m : 0 ms s 10 ? s : 0 sdocument.querySelector(#hour).innerHTML hdocument.querySelector(#minutes).innerHTML mdocument.querySelector(#second).innerHTML s}tran()setInterval(tran, 1000) //这里tran不需要括号/script3.学成在线首页
内容替换createElementappendChild的使用
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle学车在线首页/titlelink relstylesheet href./css/style.cssstyle/style
/headbody!-- 4. box核心内容区域开始 --div classbox wdiv classbox-hdh3精品推荐/h3a href#查看全部/a/divdiv classbox-bdul classclearfix!-- a href#img src${data[i].src} alth4${data[i].title}/h4div classinfospan高级/span • span${data[i].num}/span人在学习/div/a --/ul/div/divscript// 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) //(父节点类名 ul)for (let i 0; i data.length; i) {const li document.createElement(li)li.innerHTML a href#img src${data[i].src} alth4${data[i].title}/h4div classinfospan高级/span • span${data[i].num}/span人在学习/div/aul.appendChild(li)}/script
/body/html4.学生就业信息表
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /title学生信息管理/titlelink relstylesheet hrefcss/index.css /
/headbodyh1新增学员/h1form classinfo autocompleteoff姓名input typetext classuname nameuname /年龄input typetext classage nameage /性别:select namegender classgenderoption value男男/optionoption value女女/option/select薪资input typetext classsalary namesalary /就业城市select namecity classcityoption value北京北京/optionoption value上海上海/optionoption value广州广州/optionoption value深圳深圳/optionoption value曹县曹县/option/selectbutton classadd录入/button/formh1就业榜/h1tabletheadtrth学号/thth姓名/thth年龄/thth性别/thth薪资/thth就业城市/thth操作/th/tr/theadtbody!-- trtd1001/tdtd欧阳霸天/tdtd19/tdtd男/tdtd15000/tdtd上海/tdtda hrefjavascript:删除/a/td/tr --/tbody/tablescript//1.获取元素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 info document.querySelector(.info)const items document.querySelectorAll([name])let arr []//form提交事件数据更新渲染函数info.addEventListener(submit, function (e) {//阻止默认行为e.preventDefault()//判断内容是否为空for (let i 0; i items.length; i) {if (items[i].value ) { //return alert(输入不能为空)}}//数据替换const data {stuId: arr.length 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value,}arr.push(data)//新数据渲染到下面表格render()//清空text填写原有数据this.reset()})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}/tdtd${arr[i].uname}/tdtd${arr[i].age}/tdtd${arr[i].gender}/tdtd${arr[i].salary}/tdtd${arr[i].city}/tdtda hrefjavascript: data-id${i}删除/a/td// 追加元素 父元素.appendChild(子元素)tbody.appendChild(tr)}}//del删除事件借助自定义属性const tbody document.querySelector(tbody)tbody.addEventListener(click, function (e) {if (e.target.tagName A) {arr.splice(e.target.dataset.id, 1) //arr render里面的new_data是添加在tbody里面localStorage.removeItem(data, JSON.stringify(arr[e.target.dataset.id]))render() }})/script/body/html
