#yyds干货盘点# Html+Css+js实现春节倒计时效果(移动端和PC端)

简介: #yyds干货盘点# Html+Css+js实现春节倒计时效果(移动端和PC端)

前言


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


导语


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


效果预览

003.gif

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;


效果演示

移动端

图片.png图片.png图片.png

pc端

图片.png图片.png

总结


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






相关文章
|
15天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
21 6
|
2天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
9天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
21 1
|
14天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
15天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
17 0
|
15天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
16 1
|
15天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
28 1
|
15天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
15天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
15天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。