html编写倒计时这个春节刚刚过去，现在我们用所学的知识来制作一个小案列，利用htmlcssjs来制作一个距离下一个春节还有多少天。首先我们还是准备代码编辑器：给大家介绍我个人比较喜欢的2款免费代码编辑器这款为国产代码编辑器HBuilder此款为国外好用的Sublime编辑器同样免费进入正题分别建立三个文件htmlcssjs第一个是html结构文件：命名为index.html代表首页。第三个是js也就是JavaScript逻辑文件：命名为script.js。
html编写倒计时?这个春节刚刚过去，现在我们用所学的知识来制作一个小案列，利用html css js来制作一个距离下一个春节还有多少天，我来为大家讲解一下关于html编写倒计时?跟着小编一起来看一看吧!
html编写倒计时
这个春节刚刚过去，现在我们用所学的知识来制作一个小案列，利用html css js来制作一个距离下一个春节还有多少天。
首先我们还是准备代码编辑器：
给大家介绍我个人比较喜欢的2款免费代码编辑器这款为国产代码编辑器 HBuilder
此款为国外好用的Sublime编辑器 同样免费
进入正题分别建立三个文件 html css js
第一个是html结构文件：命名为 index.html 代表首页。
第二个是css样式文件：命名为wp_style.css和pc_style.css，两个文件，因为涉及到电脑端运行和手机端运行。
第三个是js也就是JavaScript逻辑文件：命名为script.js。
直接上代码：
这是html页面的代码
<!DOCTYPE html><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/wp_style.css"><link rel="stylesheet" href="css/pc_style.css"><title>2023年春节倒计时</title></head><body><div ><h2><span >癸卯兔年</span>距离2023年春节还有</h2><!-- <h3><span >距离下一年春节还有</span></h3> --><div ><div >--</div><div >--</div><div >--</div><div >--</div></div></div><scriptsrc="js/script.js"></script></body></html>
这是css样式的代码：电脑端
@media screen and (max-width: 1025px) {* {margin: 0;padding: 0;}body {background-color: #CC0033;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: 2em;text-align: center;margin: 10% 0;color: #fff;}.container h2 span {color: #fff;display: block;text-align: center;font-size: 2.3em;font-weight: 800;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: #444444;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: #fff;color: #CC0000;font-size: 0.4em;line-height: 30px;font-weight: 400;border-radius: 0 0 10px 10px;}.countdown #day:before {content: '天';}.countdown #hour:before {content: '时';}.countdown #minute:before {content: '分';}.countdown #second:before {content: '秒';}}
这是css样式的代码：手机端
* {margin: 0;padding: 0;font-family: 'Poppins', sans-serif;}@media screen and (min-width: 1025px) {body {background-color: #CC0033;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: 4em;line-height: 1.5em;color: #ffffff;margin-top: -80px;}.container h2 span {display: block;font-weight: 400;letter-spacing: 6px;font-size: 1em;}.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 minMath.random() * (max - min);}update() {this.x= this.vx;this.y= this.vy;if (this.ythis.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 = '2023/1/21 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);window.onload = downTime;
这是从代码编辑器上运行浏览器
在PC浏览器上运行 倒计时代码 效果
手机浏览器上运行倒计时代码的效果
好了，一个简单的小案列就展示到这，喜欢的同学们可以动手试一下，不懂的同学可以在我的视频课程中去学习，希望能够帮到您们，新的一年相遇就是缘分，很高兴认识你们，祝愿您们新的一年里顺顺利利，好事连连！！！
