利用JavaScript实现春节倒计时效果(移动端和PC端)

更新时间:2023-04-04 14:33:51 阅读：评论：0

效果预览

html部分

<!doctype html><!--geyao-->  <head>    <meta chart="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" rel="external nofollow" >    <link rel="stylesheet" href="css/mobile.css" rel="external nofollow" >    <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="cond">--</div>      </div>      <!-- 手动切换不好看 直接加定时器切换 微信公众号关注前端小歌谣       -->      <!-- <div id="btn">切换背景</div> -->    </div>      <script  src="js/script.js"></script>   </bod机器人s6天赋y></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 #cond:before {content: '秒';}}

pc端样式（style.css）

 * {margin: 0;padding: 0;font-family: 'poppins', sans-rif;}@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: bl中秋节灯谜及答案ock;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 #cond: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.ret();  }  ret() {    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.ret();    }  }}class snow {  constructor() {    this.canvas = document.createelement('canvas');    this.ctx = this.canvas.getcontext('2d');    document.body.appendchild(this.canva适合年会表演的舞蹈s);    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.clopath();      this.ctx.globalalpha = flake.alpha;      this.ctx.fill();      this.ctx.restore();    }    requestanimationframe(this.updatebound);  }}new snow();var stop = fal;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 cond = 1000;  var minute = cond * 60;  var hour = minute * 60;  var day = hour * 24;  var d = math.flo七月图片唯美or(gap / day);  var h = math.floor((gap % day) / hour);  var m = math.floor((gap % hour) / minute);  var s = math.floor((gap % minute) / cond);  if ((d, h, m, s < 0)) {    stop = true;  } el {    document.getelementbyid('day').innertext = d;    document.getelementbyid('hour').innertext = h;    document.getelementbyid('minute').innertext = m;    document.getelementbyid('cond').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('cond').innertext = '乐';}var time = tinterval(() => {  show_runtime();  if (stop === true) {    newyear();    clearinterval(time);  }}, 1000);// 定时器 控制图片自动切换function downtime() {  let item = 1;  tinterval(() => {    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;