青岛网站seo,民宿网站建设方案,360免费wifi驱动,心理咨询 网站模版博主主页#xff1a;技术分享菌 博主简介#xff1a;专注于前端开发领域#xff0c;旨在帮助初学者提升前端技能水平#xff0c;分享技术资讯和实用教程。内容涵盖 HTML、CSS、JavaScript、前端框架#xff08;如 React、Vue、Angular 等#xff09;以及前端工程化等方面… 博主主页技术分享菌 博主简介专注于前端开发领域旨在帮助初学者提升前端技能水平分享技术资讯和实用教程。内容涵盖 HTML、CSS、JavaScript、前端框架如 React、Vue、Angular 等以及前端工程化等方面。我们将不断更新优质内容为大家提供一场前端技术的盛宴欢迎你的关注和参与。 文章目录 前言
一、倒计时 倒数日是什么
二、功能实现
一、倒数日
1. 效果图展示
2. HTML 部分
3. CSS 部分
4. JS 部分
5. 整体代码 二、倒计时
1.效果图展示
2. HTML部分
3. CSS部分
4. JS部分
5. 整体代码
总结 前言
在日常生活和各种场景中倒数日、倒计时可以帮助我们更好地规划时间、提高工作效率、激发紧迫感等。在互联网领域倒数日功能也被广泛应用于各类倒计时应用如活动促销、比赛倒计时、课程预约等。 一、倒计时 倒数日是什么
倒数日、倒计时Countdown是一种常见的时间展示方式用于提醒用户某个重要事件即将到来。在日常生活和各种场景中倒计时可以帮助人们更好地规划时间、提高工作效率、激发紧迫感等。随着互联网技术的发展倒计时功能在网页设计中变得越来越常见如活动促销、比赛倒计时、课程预约等。
二、功能实现
一、倒数日
1. 效果图展示 2. HTML 部分
代码如下示例
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title倒数日/title
/headbodydiv classcountdowndiv classtitle距离span春节/span还有/divdiv classdaystrong iddays5000/strong span天/span/divdiv classtarget目标日span idgoal2025-01-01/span/div/div
/body/html
3. CSS 部分
代码如下示例
* {margin: 0;padding: 0;}body {background: -webkit-linear-gradient(to right, #FFFDE4, #005AA7);background: linear-gradient(to right, #FFFDE4, #005AA7);}.countdown {margin: 50px auto;width: 400px;height: 450px;background-color: rgb(145, 3, 3);background-image: url(./festival.jpg);background-size: cover;}.countdown .title {width: 100%;height: 100px;text-align: center;line-height: 100px;font-size: 24px;color: white;}.countdown .day {width: 100%;height: 250px;line-height: 250px;text-align: center;color: white;}.countdown .day strong {display: inline-block;padding: 15px;height: 100px;line-height: 100px;background-color: black;font-size: 72px;}.countdown .day span {font-size: 36px;}.countdown .target {height: 100px;line-height: 100px;text-align: center;color: white;} 对CSS部分代码进行说明解释 countdown类中 我写 背景颜色 和 背景图你们拿到代码就只显示背景色 如需要背景图点击百度网盘链接网页图片资源 4. JS 部分 // 函数封装 getCountTimefunction getCountTime() {// 1. 获得当前时间戳const now new Date()// 2. 得到将来的时间戳const time 2024-01-01 //目标时间修改处const after new Date(time)// console.log(now,after);// 时间戳是毫秒// 3. 将得到剩余的时间戳 sec 记得转换成 秒数const sec (after - now) / 1000// 4. 转换为 天数cosnt d parseInt(sec / 60 / 60 / 24) // 计算天数// console.log(h,m,s);document.querySelector(.title span).innerHTML 元旦 //修改标题处document.querySelector(#days).innerHTML ddocument.querySelector(#goal).innerHTML time}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000) 对JS部分代码进行说明解释 如需要修改目标时间 、标题找到对应的注释代码 时间戳是毫秒需要转换为秒数 公式 秒数 毫秒 / 1000 计算天数 公式 cosnt d parseInt(总秒数 / 60 / 60 / 24) 5. 整体代码 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title倒数日/titlestyle* {margin: 0;padding: 0;}body {background: -webkit-linear-gradient(to right, #FFFDE4, #005AA7);background: linear-gradient(to right, #FFFDE4, #005AA7);}.countdown {margin: 50px auto;width: 400px;height: 450px;background-color: rgb(145, 3, 3);background-image: url(./festival.jpg);background-size: cover;}.countdown .title {width: 100%;height: 100px;text-align: center;line-height: 100px;font-size: 24px;color: white;}.countdown .day {width: 100%;height: 250px;line-height: 250px;text-align: center;color: white;}.countdown .day strong {display: inline-block;padding: 15px;height: 100px;line-height: 100px;background-color: black;font-size: 72px;}.countdown .day span {font-size: 36px;}.countdown .target {height: 100px;line-height: 100px;text-align: center;color: white;}/style
/headbodydiv classcountdowndiv classtitle距离span春节/span还有/divdiv classdaystrong iddays5000/strong span天/span/divdiv classtarget目标日span idgoal2025-01-01/span/div/divscript// 函数封装 getCountTimefunction getCountTime() {// 1. 获得当前时间戳const now new Date()// 2. 得到将来的时间戳const time 2024-01-01 //目标时间修改处const after new Date(time)// console.log(now,after);// 3. 将得到剩余的时间戳 sec 记得转换成 秒数const sec (after - now) / 1000// 4. 转换为 天数const d parseInt(sec / 60 / 60 / 24) // 计算天数// console.log(h,m,s);document.querySelector(.title span).innerHTML 元旦 //修改标题处document.querySelector(#days).innerHTML ddocument.querySelector(#goal).innerHTML time}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)/script
/body/html
二、倒计时
1.效果图展示 图1 实际效果图 图2 时间过去后效果图
2. HTML 部分
代码如下示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title倒计时/title
/headbodydiv classcountdownp classnext今天是2023年11月11日/pp classtitle下班倒计时/pp classclockspan idhour00/spani:/ispan idminutes25/spani:/ispan idscond20/span/pp classtipsspan23:30:00/span 下班/p/div
/body/html
3. CSS 部分
.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 22px;}.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;}
4. JS 部分
// 日期函数封装 getMyDateconst today document.querySelector(.countdown .next)function getMyDate() {const date new Date()return 今天是 ${date.getFullYear()} 年 ${date.getMonth() 1} 月 ${date.getDate()} 日}today.innerHTML getMyDate()// 函数封装 getCountTimefunction getCountTime() {// 1. 获得当前时间const now new Date()// 2. 得到将来的时间戳const time 21:30 // 修改时间处const after new Date(2050-11-15 time) //修改日期处// console.log(now,after);// 3. 将得到剩余的时间戳 sec 记得转换成 秒数const sec (after - now) / 1000// 4. 转换为 时分秒let h parseInt(sec / 60 / 60 % 24)let m parseInt(sec / 60 % 60)let s parseInt(sec % 60)// 当小于10 需要补0h h 10 ? 0 h : hm m 10 ? 0 m : ms s 10 ? 0 s : s// console.log(h,m,s);document.querySelector(#hour).innerHTML hdocument.querySelector(#minutes).innerHTML mdocument.querySelector(#scond).innerHTML sdocument.querySelector(.tips span).innerHTML time}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)对JS部分代码进行说明解释 如需要修改时间 、日期找到对应的注释代码 倒计时核心代码 封装 getCountTime 函数 时间戳是毫秒需要转换为秒数 公式 秒数 毫秒 / 1000 计算时、分、秒 公式 h parseInt(总秒数 / 60 / 60 % 24) // 计算小时 m parseInt(总秒数 / 60 % 60); // 计算分数 s parseInt(总秒数 % 60); // 计算秒数 时分秒 需要进行判断操作 用简洁的三元运算符进行判断 如小于10 就需要进行补0 字符串拼接操作 5. 整体代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title倒计时/titlestyle.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 22px;}.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;}/style
/headbodydiv classcountdownp classnext今天是2023年11月15日/pp classtitle下班倒计时/pp classclockspan idhour00/spani:/ispan idminutes25/spani:/ispan idscond20/span/pp classtipsspan23:30:00/span 下班/p/divscript// 日期函数封装 getMyDateconst today document.querySelector(.countdown .next)function getMyDate() {const date new Date()return 今天是 ${date.getFullYear()} 年 ${date.getMonth() 1} 月 ${date.getDate()} 日}today.innerHTML getMyDate()// 函数封装 getCountTimefunction getCountTime() {// 1. 获得当前时间const now new Date()// 2. 得到将来的时间戳const time 21:30 // 修改时间日期处const after new Date(2050-11-15 time)// console.log(now,after);// 3. 将得到剩余的时间戳 sec 记得转换成 秒数const sec (after - now) / 1000// 4. 转换为 时分秒let h parseInt(sec / 60 / 60 % 24)let m parseInt(sec / 60 % 60)let s parseInt(sec % 60)// 当小于10 需要补0h h 10 ? 0 h : hm m 10 ? 0 m : ms s 10 ? 0 s : s// console.log(h,m,s);document.querySelector(#hour).innerHTML hdocument.querySelector(#minutes).innerHTML mdocument.querySelector(#scond).innerHTML sdocument.querySelector(.tips span).innerHTML time}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)/script
/body/html 总结
以上就是今天要讲的内容本文仅仅简单介绍了日期对象时间戳在实际开发使用而Date对象提供了大量能使我们快速处理数据的方法。在日常生活和各种场景中倒计时倒数日可以帮助人们更好地规划时间、提高工作效率、激发紧迫感等。随着互联网技术的发展倒计时功能在网页设计中变得越来越常见。
