网站建设与维护要用到代码吗,蛋糕店网站开发策划书,杭州网站建设seo优化,什么网站做推广农产品比较好经典回顾倒计时 倒计时的基本布局介绍。 一个内容区域和一个输入区域#xff0c;内容区域进行划分 直接使用flex布局会更快一点。 js代码 我们利用一下模块化思想#xff0c;直接把获得时间这个功能写成一个函数。方便后续的调用
function getTime() {const date new Date…经典回顾倒计时 倒计时的基本布局介绍。 一个内容区域和一个输入区域内容区域进行划分 直接使用flex布局会更快一点。 js代码 我们利用一下模块化思想直接把获得时间这个功能写成一个函数。方便后续的调用
function getTime() {const date new Date()return 今年是${date.getFullYear()}年${date.getMonth()1}月${date.getDate()}日}document.querySelector(.contain-top).innerHTML getTime()然后将输入框中的事件给加载进去注意格式的划分。使用基本的时间算法
const input document.querySelector(input)function dateChat() {const nowdate new Date()let enddate new Date()let time 0const date1 new Date()enddate new Date(${date1.getFullYear()}-${date1.getMonth()1}-${date1.getDate()} ${input.value})time (enddate - nowdate) / 1000let h parseInt(time / 60 / 60 % 24)h h 10 ? 0 h : h let m parseInt(time / 60 % 60)m m 10 ? 0 m : m let s parseInt(time % 60)s s 10 ? 0 s : sdocument.querySelector(.hour).innerHTML hdocument.querySelector(.min).innerHTML mdocument.querySelector(.second).innerHTML s}设置回车监听和按钮监听
input.addEventListener(keyup, function (e) {if (e.key Enter) {if (input.value.length 8) {alert(输入有误)} else {document.querySelector(.timeout).innerHTML input.valuedateChat()setInterval(dateChat, 1000)}}})const button document.querySelector(button)button.addEventListener(click, function () {if (input.value.length 8) {alert(输入有误)} else {document.querySelector(.timeout).innerHTML input.valuedateChat()setInterval(dateChat, 1000)}})完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title倒计时/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}.contain {width: 300px;height: 300px;background-color: rgb(174, 10, 42);margin: 0 auto;}.contain-top {text-align: center;color: white;padding-top: 20px;margin-bottom: 20px;}.font {text-align: center;color: white;font-size: 25px;}.contain-middle-time {display: flex;justify-content: center;}.contain-middle-time div {text-align: center;margin-top: 40px;width: 40px;line-height: 40px;height: 40px;color: white;background-color: rgb(50, 44, 44);border-radius: 5px;}.contain-middle-time .word {width: 20px;height: 20px;color: white;background-color: rgb(174, 10, 42);}.timeout {margin-top: 60px;font-size: 20px;color: white;text-align: center;}.timeout::after {content: 下课;}.timechoice {margin-top: 10px;text-align: center;}input {outline: none;text-align: center;width: 100px;height: 20px;border: 1px solid black;border-radius: 3px;}button {background-color: white;height: 20px;border: none;color: black;border-radius: 2px;}button:active {color: red;}/style
/headbodydiv classcontaindiv classcontain-top今年是2222年2月22日/divdiv classfont下班倒计时/divdiv classcontain-middle-timediv classhour12/divdiv classword:/divdiv classmin12/divdiv classword:/divdiv classsecond12/div/divdiv classtimeout18 : 30 : 00/div/divdiv classtimechoiceinput typetext placeholder18:00:00button提交/button/divscript//加载上边的时间function getTime() {const date new Date()return 今年是${date.getFullYear()}年${date.getMonth()1}月${date.getDate()}日}document.querySelector(.contain-top).innerHTML getTime()// 加载定义的下课时间const input document.querySelector(input)function dateChat() {const nowdate new Date()let enddate new Date()let time 0const date1 new Date()enddate new Date(${date1.getFullYear()}-${date1.getMonth()1}-${date1.getDate()} ${input.value})time (enddate - nowdate) / 1000let h parseInt(time / 60 / 60 % 24)h h 10 ? 0 h : h let m parseInt(time / 60 % 60)m m 10 ? 0 m : m let s parseInt(time % 60)s s 10 ? 0 s : sdocument.querySelector(.hour).innerHTML hdocument.querySelector(.min).innerHTML mdocument.querySelector(.second).innerHTML s}input.addEventListener(keyup, function (e) {if (e.key Enter) {if (input.value.length 8) {alert(输入有误)} else {document.querySelector(.timeout).innerHTML input.valuedateChat()setInterval(dateChat, 1000)}}})const button document.querySelector(button)button.addEventListener(click, function () {if (input.value.length 8) {alert(输入有误)} else {document.querySelector(.timeout).innerHTML input.valuedateChat()setInterval(dateChat, 1000)}})// 倒计时模块/script
/body/html
