0
0

Html+Css+js实现春节倒计时效果（移动端和PC端）

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 新的一年就要到了 可否写一个春节的倒计时呢 我想看看哪天可以过春节

效果预览

html部分

  1. <!DOCTYPE html>
  2. <!--geyao-->
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="css/style.css">
  8.     <link rel="stylesheet" href="css/mobile.css">
  9.     <title>春节倒计时</title>
  10.   </head>
  11.   <body>
  12.     <div class="container">
  13.       <h2><span id="title">春节倒计时</span>2022</h2>
  14.       <div class="countdown">
  15.         <div id="day">--</div>
  16.         <div id="hour">--</div>
  17.         <div id="minute">--</div>
  18.         <div id="second">--</div>
  19.       </div>
  20.       <!-- 手动切换不好看 直接加定时器切换 微信公众号关注前端小歌谣
  21.        -->
  22.       <!-- <div id="btn">切换背景</div> -->
  23.     </div>
  24.       <script  src="js/script.js"></script>
  25.  
  26.   </body>
  27. </html>

移动端样式（mobile.css）

  1. @media screen and (max-width: 1025px) {
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     body {
  7.         background: rgb(129, 155, 190) url(../image/geyao1.jpg);
  8.         background-size: cover;
  9.         background-position: center center;
  10.         height: 100%;
  11.     }
  12.     .container {
  13.         margin: 0;
  14.         color: #fff;
  15.         line-height: normal;
  16.         position: absolute;
  17.         align-items: center;
  18.         left: 5%;
  19.         right: 5%;
  20.     }
  21.     .container h2 {
  22.         font-size: 6em;
  23.         text-align: center;
  24.         margin: 10% 0;
  25.         color: #fff;
  26.     }
  27.     .container h2 span {
  28.         color: #fff;
  29.         display: block;
  30.         text-align: center;
  31.         font-size: 0.3em;
  32.         font-weight: 300;
  33.         letter-spacing: 2px;
  34.     }
  35.     .countdown {
  36.         display: flex;
  37.         justify-content: space-around;
  38.         margin: 0;
  39.     }
  40.     .countdown div {
  41.         width: 20%;
  42.         height: 13vw;
  43.         margin: 0 10px;
  44.         line-height: 13vw;
  45.         font-size: 2em;
  46.         position: relative;
  47.         text-align: center;
  48.         background: #333333;
  49.         color: #ffffff;
  50.         font-weight: 500;
  51.         border-radius: 10px 10px 0 0;
  52.     }
  53.     .countdown div:before {
  54.         content: '';
  55.         position: absolute;
  56.         bottom: -30px;
  57.         left: 0;
  58.         width: 100%;
  59.         height: 30px;
  60.         background: #b00000;
  61.         color: #ffffff;
  62.         font-size: 0.4em;
  63.         line-height: 35px;
  64.         font-weight: 300;
  65.         border-radius: 0 0 10px 10px;
  66.     }
  67.     .countdown #day:before {
  68.         content: '天';
  69.     }
  70.     .countdown #hour:before {
  71.         content: '时';
  72.     }
  73.     .countdown #minute:before {
  74.         content: '分';
  75.     }
  76.     .countdown #second:before {
  77.         content: '秒';
  78.     }
  79. }

pc端样式（style.css）

  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     font-family: 'Poppins', sans-serif;
  6. }
  7. @media screen and (min-width: 1025px) {
  8.     body {
  9.         background: rgb(129, 155, 190) url(../image/geyao1.jpg);
  10.         background-attachment: fixed;
  11.         background-size: cover;
  12.         -webkit-background-size: cover;
  13.         -o-background-size: cover;
  14.     }
  15.     .container {
  16.         position: absolute;
  17.         top: 80px;
  18.         left: 100px;
  19.         right: 100px;
  20.         bottom: 80px;
  21.         background-size: cover;
  22.         -webkit-background-size: cover;
  23.         -o-background-size: cover;
  24.         display: flex;
  25.         justify-content: center;
  26.         align-items: center;
  27.         flex-direction: column;
  28.         box-shadow: 0 50px 50px rgba(0, 0, 0, 0.8),
  29.             0 0 0 100px rgba(0, 0, 0, 0.3);
  30.     }
  31.     .container h2 {
  32.         text-align: center;
  33.         font-size: 10em;
  34.         line-height: 0.7em;
  35.         color: #ffffff;
  36.         margin-top: -80px;
  37.     }
  38.     .container h2 span {
  39.         display: block;
  40.         font-weight: 300;
  41.         letter-spacing: 6px;
  42.         font-size: 0.2em;
  43.     }
  44.     .countdown {
  45.         display: flex;
  46.         margin-top: 50px;
  47.     }
  48.     .countdown div {
  49.         position: relative;
  50.         width: 100px;
  51.         height: 100px;
  52.         line-height: 100px;
  53.         text-align: center;
  54.         background: #333;
  55.         color: #fff;
  56.         margin: 0 15px;
  57.         font-size: 3em;
  58.         font-weight: 500;
  59.         border-radius: 10px 10px 0 0;
  60.     }
  61.     .countdown div:before {
  62.         content: '';
  63.         position: absolute;
  64.         bottom: -30px;
  65.         left: 0;
  66.         width: 100%;
  67.         height: 35px;
  68.         background: #b00000;
  69.         color: #ffffff;
  70.         font-size: 0.35em;
  71.         line-height: 35px;
  72.         font-weight: 300;
  73.         border-radius: 0 0 10px 10px;
  74.     }
  75.     .countdown #day:before {
  76.         content: '天';
  77.     }
  78.     .countdown #hour:before {
  79.         content: '时';
  80.     }
  81.     .countdown #minute:before {
  82.         content: '分';
  83.     }
  84.     .countdown #second:before {
  85.         content: '秒';
  86.     }
  87. }
  88. canvas {
  89.     width: 100%;
  90.     height: 100%;
  91. }
  92. ::-webkit-scrollbar {
  93.     display: none;
  94. }
  95. #btn{
  96.   margin: 40px;
  97.   width: 100px;
  98.   height: 30px;
  99.   background: pink;
  100.   text-align: center;
  101.   color: darkred;
  102.   line-height: 30px;
  103. }

js部分

  1. class Snowflake {
  2.   constructor() {
  3.     this.x = 0;
  4.     this.y = 0;
  5.     this.vx = 0;
  6.     this.vy = 0;
  7.     this.radius = 0;
  8.     this.alpha = 0;
  9.     this.reset();
  10.   }
  11.   reset() {
  12.     this.x = this.randBetween(0, window.innerWidth);
  13.     this.y = this.randBetween(0, -window.innerHeight);
  14.     this.vx = this.randBetween(-3, 3);
  15.     this.vy = this.randBetween(2, 5);
  16.     this.radius = this.randBetween(1, 4);
  17.     this.alpha = this.randBetween(0.1, 0.9);
  18.   }
  19.   randBetween(min, max) {
  20.     return min + Math.random() * (max - min);
  21.   }
  22.   update() {
  23.     this.x += this.vx;
  24.     this.y += this.vy;
  25.     if (this.y + this.radius > window.innerHeight) {
  26.       this.reset();
  27.     }
  28.   }
  29. }
  30. class Snow {
  31.   constructor() {
  32.     this.canvas = document.createElement('canvas');
  33.     this.ctx = this.canvas.getContext('2d');
  34.     document.body.appendChild(this.canvas);
  35.     window.addEventListener('resize', () => this.onResize());
  36.     this.onResize();
  37.     this.updateBound = this.update.bind(this);
  38.     requestAnimationFrame(this.updateBound);
  39.     this.createSnowflakes();
  40.   }
  41.   onResize() {
  42.     this.width = window.innerWidth;
  43.     this.height = window.innerHeight;
  44.     this.canvas.width = this.width;
  45.     this.canvas.height = this.height;
  46.   }
  47.   createSnowflakes() {
  48.     const flakes = window.innerWidth / 4;
  49.     this.snowflakes = [];
  50.     for (let s = 0; s < flakes; s++) {
  51.       this.snowflakes.push(new Snowflake());
  52.     }
  53.   }
  54.   update() {
  55.     this.ctx.clearRect(0, 0, this.width, this.height);
  56.     for (let flake of this.snowflakes) {
  57.       flake.update();
  58.       this.ctx.save();
  59.       this.ctx.fillStyle = '#FFF';
  60.       this.ctx.beginPath();
  61.       this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
  62.       this.ctx.closePath();
  63.       this.ctx.globalAlpha = flake.alpha;
  64.       this.ctx.fill();
  65.       this.ctx.restore();
  66.     }
  67.     requestAnimationFrame(this.updateBound);
  68.   }
  69. }
  70. new Snow();
  71. var stop = false;
  72. function show_runtime() {
  73.   var newDay = '2022/2/1 00:00:00';
  74.   var countDate = new Date(newDay);
  75.   var now = new Date().getTime();
  76.   gap = countDate - now;
  77.   var second = 1000;
  78.   var minute = second * 60;
  79.   var hour = minute * 60;
  80.   var day = hour * 24;
  81.   var d = Math.floor(gap / day);
  82.   var h = Math.floor((gap % day) / hour);
  83.   var m = Math.floor((gap % hour) / minute);
  84.   var s = Math.floor((gap % minute) / second);
  85.   if ((d, h, m, s < 0)) {
  86.     stop = true;
  87.   } else {
  88.     document.getElementById('day').innerText = d;
  89.     document.getElementById('hour').innerText = h;
  90.     document.getElementById('minute').innerText = m;
  91.     document.getElementById('second').innerText = s;
  92.   }
  93. }
  94. function newyear() {
  95.   document.getElementById('title').innerText = 'Happy Spring Festival';
  96.   document.getElementById('day').innerText = '春';
  97.   document.getElementById('hour').innerText = '节';
  98.   document.getElementById('minute').innerText = '快';
  99.   document.getElementById('second').innerText = '乐';
  100. }
  101. var time = setInterval(() => {
  102.   show_runtime();
  103.   if (stop === true) {
  104.     newyear();
  105.     clearInterval(time);
  106.   }
  107. }, 1000);
  108. // 定时器 控制图片自动切换
  109. function downTime() {
  110.   let item = 1;
  111.   setInterval(() => {
  112.     item++;
  113.     if (item === 4) {
  114.       item = 1;
  115.     }
  116.     console.log(item, 'item');
  117.     document.body.style.backgroundImage = `url(./image/geyao${item}.jpg)`;
  118.     return item;
  119.     e.stopPropagation(); //取消事件冒泡
  120.   }, 2000);
  121. }
  122. window.onload = downTime;

效果演示

移动端

pc端

总结

在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。 有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连 喜欢请一键三连 谢谢~

标签： html css javascript
本文转载自: https://blog.csdn.net/geyaoisnice/article/details/122460313
版权归原作者 前端大歌谣 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Html+Css+js实现春节倒计时效果（移动端和PC端）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？