4、Web API

2023-06-30 09:44| 来源: 网络整理| 查看: 265

一、日期对象 1.1 实例化

目标：能够实例化日期对象

在代码中发现了 new 关键字时，一般将这个操作称为实例化创建一个时间对象并获取时间

// 实例化 new // 1.得到当前时间 const date = new Date() console.log(date) // 2.指定时间 const date1 = new Date('2023-7-1 08:30:00') console.log(date1) 1.2 日期对象方法

目标：能够使用日期对象中的方法写出常见日期使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

// 获得日期对象 const date = new Date() // 使用里面的方法 console.log(date.getFullYear()) console.log(date.getMonth()+1) 案例：页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08 案例分析： ①：调用日期对象方法进行转换 ②：记得数字要补0 ③：字符串拼接后，通过 innerText 给标签

div{ width: 300px; height: 40px; border: 1px solid pink; text-align: center; line-height: 40px; } 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 : h m = m < 10 ? '0'+ m : m s = s < 10 ? '0'+ s : s return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${h}:${m}:${s}` } div.innerHTML = getMyDate() setInterval(function(){ div.innerHTML = getMyDate() },1000)

时间的另一种方法（简单）

const div = document.querySelector('div') // 得到日期对象 const date = new Date() div.innerHTML = date.toLocaleString() //2023/6/23 11:47:04 // div.innerHTML = date.toLocaleDateString() //2023/6/23 // div.innerHTML = date.toLocaleTimeString() //11:49:14 setInterval(function(){ const date = new Date() div.innerHTML = date.toLocaleString() },1000) 1.3 时间戳

目标：能够获得当前时间戳

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式算法：将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms 1000ms 转换为就是 0小时0分1秒

得到指定时间的时间戳 console.log(+new Date('2023-6-1 18:00:00')) // 我要根据日期Day（） 0~6 返回的是星期一 const arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',] console.log(arr[new Date().getDay()]) 1.4 案例毕业倒计时效果

需求：计算到下课还有多少时间案例分析： ①：用将来时间减去现在时间就是剩余的时间 ②：核心：使用将来的时间戳减去现在的时间戳 ③：把剩余的时间转换为天时分秒注意：

通过时间戳得到是毫秒，需要转换为秒在计算转换公式： d = parseInt(总秒数/ 60/60 /24); // 计算天数 h = parseInt(总秒数/ 60/60 %24) // 计算小时 m = parseInt(总秒数 /60 %60 ); // 计算分数 s = parseInt(总秒数%60); // 计算当前秒数 Document .countdown { width: 240px; height: 305px; text-align: center; line-height: 1; color: #fff; background-color: brown; /* background-size: 240px; */ /* float: left; */ overflow: hidden; } .countdown .next { font-size: 16px; margin: 25px 0 14px; } .countdown .title { font-size: 33px; } .countdown .tips { margin-top: 80px; font-size: 23px; } .countdown small { font-size: 17px; } .countdown .clock { width: 142px; margin: 18px auto 0; overflow: hidden; } .countdown .clock span, .countdown .clock i { display: block; text-align: center; line-height: 34px; font-size: 23px; float: left; } .countdown .clock span { width: 34px; height: 34px; border-radius: 2px; background-color: #303430; } .countdown .clock i { width: 20px; font-style: normal; }

今天是2222年6月1日

下班倒计时

00 : 25 : 20

18:30:00下课

// 获得今天时间的标签 const next = document.querySelector('.next') // 写今天的时间函数 function today() { const date = new Date() return `今天是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日` } // console.log(today()) next.innerHTML = today() // 随机颜色函数 // 1. 自定义一个随机颜色函数 function getRandomColor(flag = true) { if (flag) { // 3. 如果是true 则返回 #ffffff let 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 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination", }, //自动播放 autoplay: { delay: 1000,//1秒切换一次 disableOnInteraction: false, //鼠标触摸之后继续自动播放 }, // 用键盘控制 keyboard: { enabled: true, onlyInViewport: true, }, }); 五、综合案例 1.游乐园轮播图 2.学生信息表案例

核心思路： ①：声明一个空的数组 ②：点击录入，根据相关数据，生成对象，追加到数组里面 ③：根据数组数据渲染页面-表格的行 ④：点击删除按钮，删除的是对应数组里面的数据 ⑤：再次根据数组的数据，渲染页面业务模块： ①：点击录入按钮可以录入数据 ②：点击删除可以删除当前的数据说明：本次案例，我们尽量减少dom操作，采取操作数据的形式增加和删除都是针对于数组的操作，然后根据数组数据渲染页面核心思路： ①：声明一个空的数组 ②：点击录入模块 (1). 首先取消表单默认提交事件 (2). 创建新的对象，里面存储表单获取过来的数据，格式如右图 (3). 追加给数组 (4). 渲染数据。遍历数组，动态生成tr，里面填写对应td数据，并追加给 tbody (5). 重置表单 (6). 注意防止多次生成多条数据，先清空 tbody ③：点击删除模块 (1). 采用事件委托形式，给 tbody 注册点击事件 (2). 点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？ (3). 前面渲染数据的时候，动态给a链接添加自定义属性 data-id=“0”,这样点击当前对象就知道索引号了 (4). 根据索引号，利用 splice 删除这条数据 (5). 重新渲染 ④：点击新增需要验证表单 (1). 获取所有需要填写的表单，他们共同特点都有 name属性 (2). 遍历这些表单，如果有一个值为空，则return 返回提示输入为空中断程序 (3). 注意书写的位置，应该放到新增数据的前面，阻止默认行为的后面

学生信息管理新增学员姓名：年龄：性别: 男女薪资：就业城市：北京上海广州深圳曹县录入就业榜学号姓名年龄性别薪资就业城市操作 // 获取元素 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 = ` ${arr[i].stuId} ${arr[i].uname} ${arr[i].age} ${arr[i].gender} ${arr[i].salary} ${arr[i].city} 删除 ` // 追加元素父元素.appendChild(子元素) tbody.appendChild(tr) } } // 3.删除操作 // 3.1 事件委托 tbody tbody.addEventListener('click', function(e){ if (e.target.tagName === 'A') { // alert(11) // 得到当前元素的自定义属性 data-Id // console.log(e.target.dataset.id) // 删除arr 数组里面对应的数据 arr.splice(e.target.dataset.id,1) console.log(arr) // 重新渲染一次 render() } })

【本文地址】

4、Web API

4、Web API

今日新闻

推荐新闻