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

目录
  • 效果预览
  • html部分
  • 移动端样式(mobile.css)
  • pc端样式(style.css)
  • js部分
  • 效果演示
    • 移动端
    • pc端

效果预览

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">
      <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;

效果演示

移动端

pc端

以上就是利用JavaScript实现春节倒计时效果(移动端和PC端)的详细内容,更多关于JavaScript倒计时效果的资料请关注我们其它相关文章!

时间: 2022-01-12

javascript实现倒计时提示框

本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

JavaScript实现网页跨年倒计时

JavaScript网页–跨年倒计时,供大家参考,具体内容如下 最近学弟在追一个学妹,我在帮学弟出谋划策. 学妹告诉学弟,我怕我们之间是因为这段时间接触多了你才喜欢我的.等跨年的时候,如果你还喜欢我,那个时候我再给你答案. 于是今天我帮学弟做了一个跨年倒计时的网页,希望他能够坚持下去. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> &

javascript实现发送短信倒计时

本文实例为大家分享了javascript实现发送短信倒计时的具体代码,供大家参考,具体内容如下 实现思路: 1.js获取发送按钮元素对象 2.设置一个发送间隔时间(全局变量) 3.给发送按钮元素对象绑定点击事件- - -onclick, 点击事件处理程序: ① 点击后俺按钮设置成禁用-disabled:true; ② 使用定时函数,时间间隔为1秒, 定时函数调用的函数处理程序: 判断时间是否为0 不为0- - -按钮里的描述内容变为:剩余多少秒,且时间减1 为0- - -则恢复按钮可以点击状态,

用javascript实现倒计时效果

用Javascript实现倒计时效果,供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 在某些商城网站中,我们常常可以看见其网站或者app上有一个区域放的是倒计时,来用来提醒用户还有多少时间将会发生什么事情,下面我们用代码来对其进行实现 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

javascript实现简单页面倒计时

本文实例为大家分享了javascript实现简单页面倒计时的具体代码,供大家参考,具体内容如下 话不多说,直接贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { color:red; text-align: center; } .one{ color:black; text-align

JavaScript实现前端网页版倒计时

使用原生JavaScript简单实现倒计时,供大家参考,具体内容如下 效果 代码 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css样式 --> <style type="text/css"> * { margin: 0;

javascript实现简单倒计时效果

本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1.页面创建好天.小时.分.秒的标签元素,定义好样式 2.js获取天.小时.分.秒的元素对象,方便后面给它们赋值- - -剩余时间 3.定义一个计算当前时间和设定时间- - -时间差的函数,将剩余天数.小时.分.秒分别计算计算出来,并赋值给相应的与元素内容 4.使用setInterval()函数,设置每隔1秒执行一次时间差函数, 5.注意setInterval()函数之前,先调用一次时间差函数

javaScript实现支付10秒倒计时

本文实例为大家分享了javaScript实现支付10秒倒计时的具体代码,供大家参考,具体内容如下 效果图如下: 这个案例其实很简单,只要掌握了js基础中的onclick函数以及定时器的使用,就能快速的做出这样的效果,让我们一起来看看怎么做吧~ 首先需要两个html文件,在两个文件中利用html和css分别写好初始页面效果,在这里就不多说啦,具体可以看下面的代码 让我们来谈谈js需要做出的效果: 1.在页面1中点击支付要跳转到另一个文件中 2.刚进入页面2时要开始计时10秒,计时结束后返回页面1

JavaScript输入分钟、秒倒计时技巧总结(附代码)

代码如下: <div class="container-fluid"> <div class="main-content-inner"> <div class="page-content"> <div class="page-header"> <form class="form-inline" id="searchform">

javascript实现5秒倒计时并跳转功能

本文实例为大家分享了js实现5秒倒计时并跳转功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时五秒</title> <script> //使用匿名函数方法 function countDown(){ var time = document.getElementById("Tim

JavaScript实现的商品抢购倒计时功能示例

本文实例讲述了JavaScript实现的商品抢购倒计时功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS抢购倒计时</title> </head> <body> <span id="times" > <SCRIPT LANGUAGE="JavaScript">

jQuery实现发送验证码并60秒倒计时功能

本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

js代码实现点击按钮出现60秒倒计时

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

AngularJS 验证码60秒倒计时功能的实现

最近在做AngularJS 项目,这是写的一个60秒倒计时,  angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval .$timeout与$interval 可使绑定数据直接更新. html <a href="javascript:" rel="external nofollow" ng-click="sendphone

点击按钮出现60秒倒计时的简单js代码(推荐)

点击按钮出现60秒倒计时的简单js代码(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

js实现n秒倒计时后才可以点击的效果

在我们进行注册用户时经常遇到点击按钮后,60秒倒计时后才能继续可以点击,按钮上还能显示倒计时,这60秒时间就是为大家提供"细阅读协议"做准备的,这种功能是如何实现的,下面为大家分享详细代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时然后才可以点击效果代码</title> <script type=&quo

javascript电商网站抢购倒计时效果实现

本文实例讲述了javascript电商网站抢购倒计时效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>团购--限时抢</title> </head> &

JavaScript实现页面5秒后自动跳转的方法

这个JavaScript控制页面5秒后自动跳转的代码在很多开发中经常需要用到,感兴趣的朋友可以收藏一下! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>JavaScript控制页面5秒后自动跳转的代码</title> <script type="text/j