- Đã chỉnh sửa
code này mình code còn hơi rối mọi người nếu ai có kiến thức về js và css thì có thể biến tấu nó đẹp hơn.
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>sự kiện</title>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
<div style="background-color: #08090e; position: relative; width: 100%;">
<div id="particles-js"></div>
<div style="color: white; font-size: 21px; padding-top: 30px; text-align: center;"><strong class="myblue">HÔM NAY</strong>: Thứ Bảy <span style="color: #ffd300; font-size: 24px;">18/12/2021</span> (dương lịch) | <span style="color: #ffd300; font-size: 24px;">15/11/2021</span> (âm lịch)</div>
<div style="color: white; font-size: 24px; padding-top: 5px; text-align: center;">Sắp đến <strong style="color: #e40b03;">LỄ GIÁNG SINH 2021</strong> rồi! Chỉ còn...</div>
<div class="countdown" id="js-countdown">
<div class="countdown__item countdown__item--large">
<div aria-labelledby="day-countdown" class="countdown__timer js-countdown-days" style="color: #ffd300;">
</div>
<div class="countdown__label" id="day-countdown" style="color: #ffd300;"><strong>NGÀY</strong>
</div>
</div>
<div class="countdown__item">
<div aria-labelledby="hour-countdown" class="countdown__timer js-countdown-hours myblue">
</div>
<div class="countdown__label myblue" id="hour-countdown">Giờ</div>
</div>
<div class="countdown__item">
<div aria-labelledby="minute-countdown" class="countdown__timer js-countdown-minutes myblue">
</div>
<div class="countdown__label myblue" id="minute-countdown">Phút</div>
</div>
<div class="countdown__item">
<div aria-labelledby="second-countdown" class="countdown__timer js-countdown-seconds myblue">
</div>
<div class="countdown__label myblue" id="second-countdown">Giây</div>
</div>
</div>
<div style="color: #336699; font-size: 18px; text-align: center; width: 100%;"><i class="fas fa-hourglass-end"></i>
<br /> Ngày Diễn Ra:
<script>
var today = new Date("Dec 25, 2021");
var weekday = new Array(7);
weekday[0] = "Chủ Nhật";
weekday[1] = "Thứ Hai";
weekday[2] = "Thứ Ba";
weekday[3] = "Thứ Tư";
weekday[4] = "Thứ Năm";
weekday[5] = "Thứ Sáu";
weekday[6] = "Thứ Bảy";
var wd = weekday[today.getDay()];
var dd = String(today.getDate()).padStart(1, '0');
var mm = String(today.getMonth() + 1).padStart(1, '0'); //January is 0!
var yyyy = today.getFullYear();
today = '<span style="color:#ffd300; font-size: 21px;">' + wd + ', ' + dd + '/' + mm + '/' + yyyy + '</span>';
document.write(today);
</script>
(Dương Lịch)
</div>
</div>
<script>
// ========================== //
// Countdown JS
// ========================== //
const countdown = new Date("Dec 25, 2021");
function getRemainingTime(endtime) {
const milliseconds = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((milliseconds / 1000) % 60);
const minutes = Math.floor((milliseconds / 1000 / 60) % 60);
const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
return {
'total': milliseconds,
'seconds': seconds,
'minutes': minutes,
'hours': hours,
'days': days,
};
}
function initClock(id, endtime) {
const counter = document.getElementById(id);
const daysItem = counter.querySelector('.js-countdown-days');
const hoursItem = counter.querySelector('.js-countdown-hours');
const minutesItem = counter.querySelector('.js-countdown-minutes');
const secondsItem = counter.querySelector('.js-countdown-seconds');
function updateClock() {
const time = getRemainingTime(endtime);
daysItem.innerHTML = time.days;
hoursItem.innerHTML = ('0' + time.hours).slice(-2);
minutesItem.innerHTML = ('0' + time.minutes).slice(-2);
secondsItem.innerHTML = ('0' + time.seconds).slice(-2);
if (time.total <= 0) {
daysItem.innerHTML = '<div style="font-size:15px; color:#336699;">(SỰ KIỆN ĐANG DIỄN RA)</div> 0';
hoursItem.innerHTML = '0';
minutesItem.innerHTML = '0';
secondsItem.innerHTML = '0';
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
initClock('js-countdown', countdown);
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);;
</script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.countdown {
display: flex;
align-items: center;
justify-content: center;
}
.countdown__item {
text-align: center;
margin: 20px 10px;
color: #fff;
font-size: 25px;
}
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
/* ---- stats.js ---- */
.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1.1em;
}
#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
</style>
<b>{fullwidth}</b>
</body>
</html>
