154 lines
4.0 KiB
JavaScript
154 lines
4.0 KiB
JavaScript
//Clock
|
|
function getTime() {
|
|
var date = new Date();
|
|
var h = date.getHours() <= 9 ? "0" + date.getHours() : date.getHours();
|
|
var m = date.getMinutes() <= 9 ? "0" + date.getMinutes() : date.getMinutes();
|
|
var s = date.getSeconds() <= 9 ? "0" + date.getSeconds() : date.getSeconds();
|
|
$("#time").text(`${h}:${m}:${s}`);
|
|
}
|
|
setInterval(getTime, 1000);
|
|
getTime();
|
|
|
|
//Colored Text
|
|
let colorsArr = ["red", "cyan", "purple", "orange"];
|
|
let colori = 0;
|
|
setInterval(() => {
|
|
document.documentElement.style.setProperty("--color", colorsArr[colori]);
|
|
if (colori == colorsArr.length - 1) {
|
|
colori = 0;
|
|
} else {
|
|
colori++;
|
|
}
|
|
}, 2000);
|
|
|
|
//Video volume
|
|
document.getElementById("vid").volume = 0.6;
|
|
|
|
//Main Function
|
|
mainActive = false;
|
|
setTimeout(() => {
|
|
if (document.getElementById("vid").paused) {
|
|
$("#clickToPlay").css("opacity", "1");
|
|
} else {
|
|
main();
|
|
}
|
|
}, 1000);
|
|
function main() {
|
|
if (mainActive) return;
|
|
mainActive = true;
|
|
$("#clickToPlay").css("opacity", "0");
|
|
$("#main").css("opacity", "1");
|
|
$("#widgetContainer").css("opacity", "1");
|
|
$(".hitCount").css("opacity", "1");
|
|
setTimeout(() => {
|
|
$("#clickToPlay").css("display", "none");
|
|
}, 1050);
|
|
document.getElementById("vid").play();
|
|
//Border
|
|
borderTop = 0;
|
|
borderRight = 0;
|
|
borderBottom = 0;
|
|
borderLeft = 0;
|
|
function topBorder() {
|
|
let int = setInterval(() => {
|
|
borderTop++;
|
|
if (borderTop <= 100) {
|
|
$("#borderTop").css("width", borderTop + "%");
|
|
} else {
|
|
rightBorder();
|
|
clearInterval(int);
|
|
$("#borderTop").css({ left: "", right: "0" });
|
|
setTimeout(() => {
|
|
let int = setInterval(() => {
|
|
borderTop--;
|
|
if (borderTop >= 0) {
|
|
$("#borderTop").css("width", borderTop + "%");
|
|
} else {
|
|
$("#borderTop").css({ right: "", left: "0" });
|
|
clearInterval(int);
|
|
}
|
|
}, 7);
|
|
}, 250);
|
|
}
|
|
}, 7);
|
|
}
|
|
function rightBorder() {
|
|
let int = setInterval(() => {
|
|
borderRight++;
|
|
if (borderRight <= 100) {
|
|
$("#borderRight").css("height", borderRight + "%");
|
|
} else {
|
|
bottomBorder();
|
|
clearInterval(int);
|
|
$("#borderRight").css({ top: "", bottom: "0" });
|
|
|
|
setTimeout(() => {
|
|
let int = setInterval(() => {
|
|
borderRight--;
|
|
if (borderRight >= 0) {
|
|
$("#borderRight").css("height", borderRight + "%");
|
|
} else {
|
|
$("#borderRight").css({ bottom: "", top: "0" });
|
|
clearInterval(int);
|
|
}
|
|
}, 5);
|
|
}, 450);
|
|
}
|
|
}, 5);
|
|
}
|
|
function bottomBorder() {
|
|
let int = setInterval(() => {
|
|
borderBottom++;
|
|
if (borderBottom <= 100) {
|
|
$("#borderBottom").css("width", borderBottom + "%");
|
|
} else {
|
|
leftBorder();
|
|
clearInterval(int);
|
|
$("#borderBottom").css({ right: "", left: "0" });
|
|
|
|
setTimeout(() => {
|
|
let int = setInterval(() => {
|
|
borderBottom--;
|
|
if (borderBottom >= 0) {
|
|
$("#borderBottom").css("width", borderBottom + "%");
|
|
} else {
|
|
$("#borderBottom").css({ left: "", right: "0" });
|
|
clearInterval(int);
|
|
}
|
|
}, 7);
|
|
}, 250);
|
|
}
|
|
}, 7);
|
|
}
|
|
function leftBorder() {
|
|
let int = setInterval(() => {
|
|
borderLeft++;
|
|
if (borderLeft <= 100) {
|
|
$("#borderLeft").css("height", borderLeft + "%");
|
|
} else {
|
|
topBorder();
|
|
clearInterval(int);
|
|
$("#borderLeft").css({ bottom: "", top: "0" });
|
|
|
|
setTimeout(() => {
|
|
let int = setInterval(() => {
|
|
borderLeft--;
|
|
if (borderLeft >= 0) {
|
|
$("#borderLeft").css("height", borderLeft + "%");
|
|
} else {
|
|
$("#borderLeft").css({ top: "", bottom: "0" });
|
|
clearInterval(int);
|
|
}
|
|
}, 5);
|
|
}, 450);
|
|
}
|
|
}, 5);
|
|
}
|
|
topBorder();
|
|
}
|
|
|
|
//Start Main Function
|
|
$("#clickToPlay").click(() => {
|
|
main();
|
|
});
|