春节倒计时

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：[春节创意投稿大赛](https://juejin.cn/post/7049181546682515464 "https://juejin.cn/post/7049181546682515464") ## 前言 > 我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷 ## 导语 > 歌谣歌谣新的一年就要到了可否写一个春节的倒计时呢我想看看哪天可以过春节 ## 效果预览 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a96e162a4814c728433c356d5301cb9~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") ### html部分 ``` 春节倒计时

春节倒计时2022

``` ![](<> "点击并拖拽以移动") ### 移动端样式（mobile.css） ``` @media screen and (max-width: 1025px) { * { margin: 0; padding: 0; } body { background: rgb(129, 155, 190) url(../image/geyao1.jpg); background-size: cover; background-position: center center; height: 100%; } .container { margin: 0; color: #fff; line-height: normal; position: absolute; align-items: center; left: 5%; right: 5%; } .container h2 { font-size: 6em; text-align: center; margin: 10% 0; color: #fff; } .container h2 span { color: #fff; display: block; text-align: center; font-size: 0.3em; font-weight: 300; letter-spacing: 2px; } .countdown { display: flex; justify-content: space-around; margin: 0; } .countdown div { width: 20%; height: 13vw; margin: 0 10px; line-height: 13vw; font-size: 2em; position: relative; text-align: center; background: #333333; color: #ffffff; font-weight: 500; border-radius: 10px 10px 0 0; } .countdown div:before { content: ''; position: absolute; bottom: -30px; left: 0; width: 100%; height: 30px; background: #b00000; color: #ffffff; font-size: 0.4em; line-height: 35px; font-weight: 300; border-radius: 0 0 10px 10px; } .countdown #day:before { content: '天'; } .countdown #hour:before { content: '时'; } .countdown #minute:before { content: '分'; } .countdown #second:before { content: '秒'; } } ``` ![](<> "点击并拖拽以移动") ### pc端样式（style.css） ``` * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } @media screen and (min-width: 1025px) { body { background: rgb(129, 155, 190) url(../image/geyao1.jpg); background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; } .container { position: absolute; top: 80px; left: 100px; right: 100px; bottom: 80px; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 50px 50px rgba(0, 0, 0, 0.8), 0 0 0 100px rgba(0, 0, 0, 0.3); } .container h2 { text-align: center; font-size: 10em; line-height: 0.7em; color: #ffffff; margin-top: -80px; } .container h2 span { display: block; font-weight: 300; letter-spacing: 6px; font-size: 0.2em; } .countdown { display: flex; margin-top: 50px; } .countdown div { position: relative; width: 100px; height: 100px; line-height: 100px; text-align: center; background: #333; color: #fff; margin: 0 15px; font-size: 3em; font-weight: 500; border-radius: 10px 10px 0 0; } .countdown div:before { content: ''; position: absolute; bottom: -30px; left: 0; width: 100%; height: 35px; background: #b00000; color: #ffffff; font-size: 0.35em; line-height: 35px; font-weight: 300; border-radius: 0 0 10px 10px; } .countdown #day:before { content: '天'; } .countdown #hour:before { content: '时'; } .countdown #minute:before { content: '分'; } .countdown #second:before { content: '秒'; } } canvas { width: 100%; height: 100%; } ::-webkit-scrollbar { display: none; } #btn{ margin: 40px; width: 100px; height: 30px; background: pink; text-align: center; color: darkred; line-height: 30px; } ``` ![](<> "点击并拖拽以移动") ## js部分 ``` class Snowflake { constructor() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.radius = 0; this.alpha = 0; this.reset(); } reset() { this.x = this.randBetween(0, window.innerWidth); this.y = this.randBetween(0, -window.innerHeight); this.vx = this.randBetween(-3, 3); this.vy = this.randBetween(2, 5); this.radius = this.randBetween(1, 4); this.alpha = this.randBetween(0.1, 0.9); } randBetween(min, max) { return min + Math.random() * (max - min); } update() { this.x += this.vx; this.y += this.vy; if (this.y + this.radius > window.innerHeight) { this.reset(); } } } class Snow { constructor() { this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); document.body.appendChild(this.canvas); window.addEventListener('resize', () => this.onResize()); this.onResize(); this.updateBound = this.update.bind(this); requestAnimationFrame(this.updateBound); this.createSnowflakes(); } onResize() { this.width = window.innerWidth; this.height = window.innerHeight; this.canvas.width = this.width; this.canvas.height = this.height; } createSnowflakes() { const flakes = window.innerWidth / 4; this.snowflakes = []; for (let s = 0; s < flakes; s++) { this.snowflakes.push(new Snowflake()); } } update() { this.ctx.clearRect(0, 0, this.width, this.height); for (let flake of this.snowflakes) { flake.update(); this.ctx.save(); this.ctx.fillStyle = '#FFF'; this.ctx.beginPath(); this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2); this.ctx.closePath(); this.ctx.globalAlpha = flake.alpha; this.ctx.fill(); this.ctx.restore(); } requestAnimationFrame(this.updateBound); } } new Snow(); var stop = false; function show_runtime() { var newDay = '2022/2/1 00:00:00'; var countDate = new Date(newDay); var now = new Date().getTime(); gap = countDate - now; var second = 1000; var minute = second * 60; var hour = minute * 60; var day = hour * 24; var d = Math.floor(gap / day); var h = Math.floor((gap % day) / hour); var m = Math.floor((gap % hour) / minute); var s = Math.floor((gap % minute) / second); if ((d, h, m, s < 0)) { stop = true; } else { document.getElementById('day').innerText = d; document.getElementById('hour').innerText = h; document.getElementById('minute').innerText = m; document.getElementById('second').innerText = s; } } function newyear() { document.getElementById('title').innerText = 'Happy Spring Festival'; document.getElementById('day').innerText = '春'; document.getElementById('hour').innerText = '节'; document.getElementById('minute').innerText = '快'; document.getElementById('second').innerText = '乐'; } var time = setInterval(() => { show_runtime(); if (stop === true) { newyear(); clearInterval(time); } }, 1000); // 定时器控制图片自动切换 function downTime() { let item = 1; setInterval(() => { item++; if (item === 4) { item = 1; } console.log(item, 'item'); document.body.style.backgroundImage = `url(./image/geyao${item}.jpg)`; return item; e.stopPropagation(); //取消事件冒泡 }, 2000); } window.onload = downTime; ``` ![](<> "点击并拖拽以移动") ## 效果演示 ### 移动端 ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8e0c5fdb33f46a88f7ed17a0745af24~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8944622b0f1e4a45bdf875597fd1f9ae~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89311d159dd6471398f44ad815466637~tplv-k3u1fbpfcp-watermark.image?) ### pc端 ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a8de107788d42418d588951209799b6~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71c4f34407244da9896db59904060139~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/347b7dcbb20a48779922e305ec198109~tplv-k3u1fbpfcp-watermark.image?) ## 总结 > 在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连喜欢请一键三连谢谢~