Html+Css+js实现春节倒计时效果

效果图
Html+Css+js实现春节倒计时效果_第1张图片

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">
    <title>春节倒计时title>
  head>
  <body>
    <div class="container">
      <h2><span id="title">春节倒计时span>2022h2>
      <div class="countdown">
        <div id="day">--div>
        <div id="hour">--div>
        <div id="minute">--div>
        <div id="second">--div>
      div>
    div>
  body>
html>

css样式

* {
	margin: 0;
	padding: 0;
}
body {
	background: rgb(129, 155, 190) url(../image/image.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: '秒';
}

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 Countdown{
  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;

你可能感兴趣的:(html,css,javascript)