温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何利用JavaScript实现春节倒计时效果

发布时间:2022-01-14 11:22:33 阅读:167 作者:小新 栏目:开发技术
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家分享的是有关如何利用JavaScript实现春节倒计时效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

效果预览

如何利用JavaScript实现春节倒计时效果

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" rel="external nofollow" >
    <link rel="stylesheet" href="css/mobile.css" rel="external nofollow" >
    <title>春节倒计时</title>
  </head>
  <body>
    <div class="container">
      <h3><span id="title">春节倒计时</span>2022</h3>
      <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-width1025px) {
	* {
		margin0;
		padding0;
	}
	body {
		backgroundrgb(129155190url(../image/geyao1.jpg);
		background-size: cover;
		background-position: center center;
		height100%;
	}
	.container {
		margin0;
		color#fff;
		line-height: normal;
		position: absolute;
		align-items: center;
		left5%;
		right5%;
	}
	.container h3 {
		font-size6em;
		text-align: center;
		margin10% 0;
		color#fff;
	}
	.container h3 span {
		color#fff;
		display: block;
		text-align: center;
		font-size0.3em;
		font-weight300;
		letter-spacing2px;
	}
	.countdown {
		display: flex;
		justify-content: space-around;
		margin0;
	}
	.countdown div {
		width20%;
		height13vw;
		margin0 10px;
		line-height13vw;
		font-size2em;
		position: relative;
		text-align: center;
		background#333333;
		color#ffffff;
		font-weight500;
		border-radius10px 10px 0 0;
	}
	.countdown div:before {
		content'';
		position: absolute;
		bottom: -30px;
		left0;
		width100%;
		height30px;
		background#b00000;
		color#ffffff;
		font-size0.4em;
		line-height35px;
		font-weight300;
		border-radius0 0 10px 10px;
	}
	.countdown #day:before {
		content'天';
	}
	.countdown #hour:before {
		content'时';
	}
	.countdown #minute:before {
		content'分';
	}
	.countdown #second:before {
		content'秒';
	}
}

pc端样式(style.css)

 * {
	margin0;
	padding0;
	font-family'Poppins', sans-serif;
}
@media screen and (min-width1025px) {
	body {
		backgroundrgb(129155190url(../image/geyao1.jpg);
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
	}
	.container {
		position: absolute;
		top80px;
		left100px;
		right100px;
		bottom80px;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		box-shadow0 50px 50px rgba(0000.8),
			0 0 0 100px rgba(0000.3);
	}
	.container h3 {
		text-align: center;
		font-size10em;
		line-height0.7em;
		color#ffffff;
		margin-top: -80px;
	}
	.container h3 span {
		display: block;
		font-weight300;
		letter-spacing6px;
		font-size0.2em;
	}
	.countdown {
		display: flex;
		margin-top50px;
	}
	.countdown div {
		position: relative;
		width100px;
		height100px;
		line-height100px;
		text-align: center;
		background#333;
		color#fff;
		margin0 15px;
		font-size3em;
		font-weight500;
		border-radius10px 10px 0 0;
	}
	.countdown div:before {
		content'';
		position: absolute;
		bottom: -30px;
		left0;
		width100%;
		height35px;
		background#b00000;
		color#ffffff;
		font-size0.35em;
		line-height35px;
		font-weight300;
		border-radius0 0 10px 10px;
	}
	.countdown #day:before {
		content'天';
	}
	.countdown #hour:before {
		content'时';
	}
	.countdown #minute:before {
		content'分';
	}
	.countdown #second:before {
		content'秒';
	}
}
canvas {
	width100%;
	height100%;
}
::-webkit-scrollbar {
	display: none;
}
#btn{
  margin40px;
  width100px;
  height30px;
  background: pink;
  text-align: center;
  color: darkred;
  line-height30px;
}

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(-33);
    this.vy = this.randBetween(25);
    this.radius = this.randBetween(14);
    this.alpha = this.randBetween(0.10.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(00this.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;

效果演示

移动端

如何利用JavaScript实现春节倒计时效果

如何利用JavaScript实现春节倒计时效果

如何利用JavaScript实现春节倒计时效果

pc端

如何利用JavaScript实现春节倒计时效果

如何利用JavaScript实现春节倒计时效果

如何利用JavaScript实现春节倒计时效果

感谢各位的阅读!关于“如何利用JavaScript实现春节倒计时效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×