利用JavaScript實(shí)現(xiàn)春節(jié)倒計(jì)時(shí)效果(移動(dòng)端和PC端)
效果預(yù)覽

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>春節(jié)倒計(jì)時(shí)</title>
</head>
<body>
<div class="container">
<h2><span id="title">春節(jié)倒計(jì)時(shí)</span>2022</h2>
<div class="countdown">
<div id="day">--</div>
<div id="hour">--</div>
<div id="minute">--</div>
<div id="second">--</div>
</div>
<!-- 手動(dòng)切換不好看 直接加定時(shí)器切換 微信公眾號關(guān)注前端小歌謠
-->
<!-- <div id="btn">切換背景</div> -->
</div>
<script src="js/script.js"></script>
</body>
</html>移動(dòng)端樣式(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: '時(shí)';
}
.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: '時(shí)';
}
.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 = '節(jié)';
document.getElementById('minute').innerText = '快';
document.getElementById('second').innerText = '樂';
}
var time = setInterval(() => {
show_runtime();
if (stop === true) {
newyear();
clearInterval(time);
}
}, 1000);
// 定時(shí)器 控制圖片自動(dòng)切換
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;效果演示
移動(dòng)端



pc端



以上就是利用JavaScript實(shí)現(xiàn)春節(jié)倒計(jì)時(shí)效果(移動(dòng)端和PC端)的詳細(xì)內(nèi)容,更多關(guān)于JavaScript倒計(jì)時(shí)效果的資料請關(guān)注腳本之家其它相關(guān)文章!
- javaScript實(shí)現(xiàn)支付10秒倒計(jì)時(shí)
- javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)
- javascript實(shí)現(xiàn)簡單倒計(jì)時(shí)效果
- JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計(jì)時(shí)
- javascript實(shí)現(xiàn)簡單頁面倒計(jì)時(shí)
- javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框
- 用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
- JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí)
相關(guān)文章
uniapp?u-picker多列用法以及設(shè)置默認(rèn)選中值
uview組件庫u-picker組件可能很多人不熟悉,下面這篇文章主要給大家介紹了關(guān)于uniapp?u-picker多列用法以及設(shè)置默認(rèn)選中值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Javascript設(shè)計(jì)模式理論與編程實(shí)戰(zhàn)之簡單工廠模式
簡單工廠模式是由一個(gè)方法來決定到底要?jiǎng)?chuàng)建哪個(gè)類的實(shí)例, 而這些實(shí)例經(jīng)常都擁有相同的接口. 這種模式主要用在所實(shí)例化的類型在編譯期并不能確定, 而是在執(zhí)行期決定的情況。 說的通俗點(diǎn),就像公司茶水間的飲料機(jī),要咖啡還是牛奶取決于你按哪個(gè)按鈕2015-11-11
JavaScript中使用Object.prototype.toString判斷是否為數(shù)組
這篇文章主要介紹了JavaScript中使用Object.prototype.toString判斷是否是數(shù)組,本文講解了Object.prototype.toString相關(guān)知識,并給出了判斷數(shù)組的實(shí)現(xiàn)代碼,使用本文方法同樣可以判斷javascrpty的其它數(shù)據(jù)類型,需要的朋友可以參考下2015-04-04
Javascript ES6中對象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
微信小程序使用uni-app和springboot實(shí)現(xiàn)一鍵登錄功能(JWT鑒權(quán))
微信一鍵登錄是指用戶在使用小程序時(shí),可以通過微信賬號進(jìn)行快速登錄,而無需額外的注冊和密碼設(shè)置,這篇文章主要給大家介紹了關(guān)于微信小程序使用uni-app和springboot實(shí)現(xiàn)一鍵登錄功能的相關(guān)資料,需要的朋友可以參考下2023-11-11

