Html+Css+js实现春节倒计时效果（移动端和PC端）
目录
前言
导语
效果预览
html部分
移动端样式（mobile.css）
pc端样式（style.css）
js部分
效果演示
移动端
pc端
总结
下载地址
前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
导语
歌谣 歌谣 新的一年就要到了 可否写一个春节的倒计时呢 我想看看哪天可以过春节 需要源码的同学评论区留下邮箱，我发送给你，谢谢~
效果预览
html部分
<!DOCTYPE html> <!--geyao--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/mobile.css"> <title>春节倒计时</title> </head> <body> <div class="container"> <h2><span id="title">春节倒计时</span>2022</h2> <div class="countdown"> <div id="day">--</div> <div id="hour">--</div> <div id="minute">--</div> <div id="second">--</div> </div> <!-- 手动切换不好看 直接加定时器切换 微信公众号关注前端小歌谣 --> <!-- <div id="btn">切换背景</div> --> </div> <script src="js/script.js"></script> </body> </html>
移动端样式（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;
效果演示
移动端
pc端
总结
在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。 有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连 喜欢请一键三连 谢谢~
下载地址
Html+Css+js实现春节倒计时效果(移动端和PC端)
相关知识
Html+Css+js实现春节倒计时效果（移动端和PC端）
斗南鲜花远程拍卖系统PC端上线
在哪都能拍 斗南花市开辟远程PC端拍卖
基于深度卷积神经网络的移动端花卉识别系统
下列哪项属于移动端交易?
云南：斗南鲜切花实现“线上线下”同步拍卖
斗南鲜切花实现“线上线下”同步拍卖
HTML5移动开发
EfficientNet实现农业病害识别(FastDeploy部署和安卓端部署)
用于马铃薯叶片病害预测的端到端深度学习框架（完整代码）
网址: Html+Css+js实现春节倒计时效果（移动端和PC端） https://m.huajiangbk.com/newsview140172.html
| 上一篇: 花礼网端午节新品：手提式花篮+粽 |
下一篇: python实现元旦倒计时、圣诞 |
