Homepage-imsyy/js/main.js

440 lines
13 KiB
JavaScript
Raw Normal View History

2022-06-20 13:20:45 +00:00
/*
作者: imsyy
主页https://www.imsyy.top/
GitHubhttps://github.com/imsyy/home
版权所有请勿删除
*/
2022-03-04 10:52:51 +00:00
//弹窗样式
iziToast.settings({
timeout: 10000,
progressBar: false,
close: false,
closeOnEscape: true,
position: 'topCenter',
transitionIn: 'bounceInDown',
transitionOut: 'flipOutX',
displayMode: 'replace',
layout: '1',
backgroundColor: '#00000040',
titleColor: '#efefef',
messageColor: '#efefef',
2022-05-24 06:30:14 +00:00
icon: 'Fontawesome',
2022-03-04 10:52:51 +00:00
iconColor: '#efefef',
});
2022-06-30 03:58:43 +00:00
/* 鼠标样式 */
const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;
function setPosition(x, y) {
element2.style.transform = `translate(${x - halfAlementWidth2 + 1}px, ${y - halfAlementWidth2 + 1}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function () {
setPosition(e.clientX, e.clientY);
});
});
//移动端去除鼠标样式
switch (true) {
case navigator.userAgent.indexOf('Mobile') > 0:
2022-07-07 13:42:10 +00:00
$('#g-pointer-2').css("display", "none");
}
2022-03-04 10:52:51 +00:00
//加载完成后执行
window.addEventListener('load', function () {
2022-03-04 10:52:51 +00:00
//载入动画
$('#loading-box').attr('class', 'loaded');
2022-04-14 08:47:10 +00:00
$('#bg').css("cssText", "transform: scale(1);filter: blur(0px);transition: ease 1.5s;");
$('.cover').css("cssText", "opacity: 1;transition: ease 1.5s;");
2022-01-20 13:56:06 +00:00
$('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important");
2022-03-04 10:52:51 +00:00
//用户欢迎
setTimeout(function () {
iziToast.show({
timeout: 2500,
2022-05-24 06:30:14 +00:00
icon: false,
2022-03-04 10:52:51 +00:00
title: hello,
message: '欢迎来到我的主页'
});
}, 800);
2022-06-20 13:20:45 +00:00
//延迟加载音乐播放器
var element = document.createElement("script");
element.src = "./js/music.js";
document.body.appendChild(element);
2022-06-21 07:30:02 +00:00
//中文字体缓加载-此处写入字体源文件
2022-06-21 04:02:27 +00:00
//先行加载简体中文子集,后续补全字集
2022-06-21 07:30:02 +00:00
//由于压缩过后的中文字体仍旧过大,可转移至对象存储或 CDN 加载
2022-06-20 13:20:45 +00:00
const font = new FontFace(
"MiSans",
2022-06-21 07:30:02 +00:00
"url(" + "./font/MiSans-Regular.woff2" + ")"
2022-06-20 13:20:45 +00:00
);
document.fonts.add(font);
}, false)
2022-01-21 05:39:47 +00:00
setTimeout(function () {
$('#loading-text').html("字体及文件加载可能需要一定时间")
2022-02-10 08:09:09 +00:00
}, 3000);
2022-01-21 05:39:47 +00:00
2022-02-03 08:05:44 +00:00
//新春灯笼 需要时取消注释
/*
new_element=document.createElement("link");
new_element.setAttribute("rel","stylesheet");
new_element.setAttribute("type","text/css");
new_element.setAttribute("href","./css/lantern.css");
2022-02-03 08:05:44 +00:00
document.body.appendChild(new_element);
new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","./js/lantern.js");
2022-02-03 08:05:44 +00:00
document.body.appendChild(new_element);
*/
2022-01-29 08:46:29 +00:00
//火狐浏览器独立样式
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = './css/firefox.css';
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
2022-02-03 08:05:44 +00:00
window.addEventListener('load', function () {
2022-05-16 11:03:47 +00:00
setTimeout(function () {
iziToast.show({
timeout: 8000,
2022-05-24 06:30:14 +00:00
icon: "fa-solid fa-circle-exclamation",
2022-05-16 11:03:47 +00:00
message: '您正在使用火狐浏览器,部分功能可能不支持'
});
}, 3800);
2022-02-03 08:05:44 +00:00
}, false)
2022-01-29 08:46:29 +00:00
}
2021-09-25 14:57:18 +00:00
//获取一言
2022-01-13 06:48:37 +00:00
fetch('https://v1.hitokoto.cn?max_length=24')
2021-09-25 14:57:18 +00:00
.then(response => response.json())
.then(data => {
2022-03-21 09:29:30 +00:00
$('#hitokoto_text').html(data.hitokoto)
$('#from_text').html(data.from)
2021-09-25 14:57:18 +00:00
})
.catch(console.error)
2022-05-23 12:58:51 +00:00
var times = 0;
2022-05-22 05:50:08 +00:00
$('#hitokoto').click(function () {
2022-05-23 12:58:51 +00:00
if (times == 0) {
times = 1;
2022-05-22 05:50:08 +00:00
var index = setInterval(function () {
2022-05-23 12:58:51 +00:00
times--;
2022-05-23 12:59:22 +00:00
if (times == 0) {
2022-05-22 05:50:08 +00:00
clearInterval(index);
}
}, 1000);
fetch('https://v1.hitokoto.cn?max_length=24')
.then(response => response.json())
.then(data => {
$('#hitokoto_text').html(data.hitokoto)
$('#from_text').html(data.from)
})
.catch(console.error)
} else {
iziToast.show({
2022-07-07 13:42:10 +00:00
timeout: 1000,
2022-05-24 06:30:14 +00:00
icon: "fa-solid fa-circle-exclamation",
2022-05-22 05:50:08 +00:00
message: '你点太快了吧'
});
}
});
2021-09-25 14:57:18 +00:00
//获取天气
2022-07-07 13:42:10 +00:00
//请前往 https://www.mxnzp.com/doc/list 申请 app_id 和 app_secret
//请前往 https://dev.qweather.com/ 申请 key
const add_id = "wrknltonr0foslhs"; // app_id
const app_secret = "Nlh1c0F6d0ZDU2pDR0J3YVBVbkhudz09"; // app_secret
const key = "433f0c48615a48dfaf2f2b2444297e79" // key
function getWeather() {
fetch("https://www.mxnzp.com/api/ip/self?app_id=" + add_id + "&app_secret=" + app_secret)
.then(response => response.json())
.then(data => {
let str = data.data.city
let city = str.replace(/市/g, '')
$('#city_text').html(city);
fetch("https://geoapi.qweather.com/v2/city/lookup?location=" + city + "&number=1&key=" + key)
.then(response => response.json())
.then(location => {
let id = location.location[0].id
fetch("https://devapi.qweather.com/v7/weather/now?location=" + id + "&key=" + key)
.then(response => response.json())
.then(weather => {
$('#wea_text').html(weather.now.text)
2022-07-08 01:42:15 +00:00
$('#tem_text').html(weather.now.temp+"°C ")
2022-07-07 13:42:10 +00:00
$('#win_text').html(weather.now.windDir)
2022-07-08 01:42:15 +00:00
$('#win_speed').html(weather.now.windScale+"级")
2022-07-07 13:42:10 +00:00
})
})
})
.catch(console.error);
}
getWeather();
2022-07-09 03:04:34 +00:00
var wea = 0;
2022-07-07 13:42:10 +00:00
$('#upWeather').click(function () {
2022-07-09 03:00:45 +00:00
if (wea == 0) {
wea = 1;
2022-07-07 13:42:10 +00:00
var index = setInterval(function () {
2022-07-09 03:00:45 +00:00
wea--;
if (wea == 0) {
2022-07-07 13:42:10 +00:00
clearInterval(index);
}
}, 60000);
getWeather();
iziToast.show({
timeout: 2000,
icon: "fa-solid fa-cloud-sun",
message: '实时天气已更新'
});
} else {
iziToast.show({
timeout: 1000,
icon: "fa-solid fa-circle-exclamation",
message: '请稍后再更新哦'
});
}
});
2021-09-25 14:57:18 +00:00
//获取时间
var t = null;
t = setTimeout(time, 1000);
function time() {
clearTimeout(t);
dt = new Date();
var y = dt.getYear() + 1900;
var mm = dt.getMonth() + 1;
var d = dt.getDate();
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var day = dt.getDay();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
2022-01-20 13:56:06 +00:00
$("#time").html(y + "&nbsp;年&nbsp;" + mm + "&nbsp;月&nbsp;" + d + "&nbsp;日&nbsp;" + "<span class='weekday'>" + weekday[day] + "</span><br>" + "<span class='time-text'>" + h + ":" + m + ":" + s + "</span>");
2021-09-25 14:57:18 +00:00
t = setTimeout(time, 1000);
}
//链接提示文字
2021-10-03 09:03:31 +00:00
$("#social").mouseover(function () {
$("#social").css({
"background": "rgb(0 0 0 / 25%)",
'border-radius': '6px',
"backdrop-filter": "blur(5px)"
});
$("#link-text").css({
"display": "block",
});
}).mouseout(function () {
$("#social").css({
"background": "none",
"border-radius": "6px",
"backdrop-filter": "none"
});
$("#link-text").css({
"display": "none"
});
});
2021-09-25 14:57:18 +00:00
2021-10-03 09:03:31 +00:00
$("#github").mouseover(function () {
$("#link-text").html("去 Github 看看");
}).mouseout(function () {
$("#link-text").html("通过这里联系我");
});
$("#qq").mouseover(function () {
$("#link-text").html("有什么事吗");
}).mouseout(function () {
$("#link-text").html("通过这里联系我");
});
$("#email").mouseover(function () {
$("#link-text").html("来封 Email");
}).mouseout(function () {
$("#link-text").html("通过这里联系我");
});
$("#telegram").mouseover(function () {
$("#link-text").html("你懂的 ~");
}).mouseout(function () {
$("#link-text").html("通过这里联系我");
});
$("#twitter").mouseover(function () {
$("#link-text").html("你懂的 ~");
}).mouseout(function () {
$("#link-text").html("通过这里联系我");
});
2021-09-25 14:57:18 +00:00
2022-07-07 13:42:10 +00:00
//自动变灰
var myDate = new Date;
var mon = myDate.getMonth() + 1;
var date = myDate.getDate();
var days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
for (var day of days) {
var d = day.split('.');
if (mon == d[0] && date == d[1]) {
document.write(
'<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}</style>'
)
$("#change").html("Silence&nbsp;in&nbsp;silence");
$("#change1").html("今天是中国国家纪念日,全站已切换为黑白模式");
window.addEventListener('load', function () {
iziToast.show({
timeout: 14000,
icon: "fa-solid fa-clock",
message: '今天是中国国家纪念日'
});
}, false);
}
}
2021-10-03 09:03:31 +00:00
//更多页面切换
var shoemore = false;
$('#switchmore').on('click', function () {
shoemore = !shoemore;
if (shoemore && $(document).width() >= 990) {
$('#container').attr('class', 'container mores');
2022-07-07 13:42:10 +00:00
$("#change").html("Oops&nbsp;!");
$("#change1").html("哎呀,这都被你发现了( 再点击一次可关闭 ");
2021-09-25 14:57:18 +00:00
} else {
2021-10-03 09:03:31 +00:00
$('#container').attr('class', 'container');
2022-07-07 13:42:10 +00:00
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
2021-09-25 14:57:18 +00:00
}
2021-10-03 09:03:31 +00:00
});
2021-09-25 14:57:18 +00:00
2021-10-03 09:03:31 +00:00
//更多页面关闭按钮
$('#close').on('click', function () {
2022-02-03 08:05:44 +00:00
$('#switchmore').click();
2021-10-03 09:03:31 +00:00
});
2022-02-03 08:05:44 +00:00
//移动端菜单栏切换
2021-10-03 09:03:31 +00:00
var switchmenu = false;
$('#switchmenu').on('click', function () {
switchmenu = !switchmenu;
if (switchmenu) {
$('#row').attr('class', 'row menus');
2022-05-24 06:30:14 +00:00
$("#menu").html("<i class='fa-solid fa-xmark'></i>");
2021-09-25 14:57:18 +00:00
} else {
2021-10-03 09:03:31 +00:00
$('#row').attr('class', 'row');
2022-05-24 06:30:14 +00:00
$("#menu").html("<i class='fa-solid fa-bars'></i>");
2021-09-25 14:57:18 +00:00
}
2021-10-03 09:03:31 +00:00
});
2021-09-25 14:57:18 +00:00
2021-09-27 13:07:24 +00:00
//更多弹窗页面
2021-10-03 09:03:31 +00:00
$('#openmore').on('click', function () {
$('#box').css("display", "block");
$('#row').css("display", "none");
$('#more').css("cssText", "display:none !important");
});
$('#closemore').on('click', function () {
$('#box').css("display", "none");
$('#row').css("display", "flex");
$('#more').css("display", "flex");
});
2021-09-27 13:07:24 +00:00
2021-09-25 14:57:18 +00:00
//监听网页宽度
window.addEventListener('load', function () {
window.addEventListener('resize', function () {
//关闭移动端样式
if (window.innerWidth >= 600) {
2021-10-03 09:03:31 +00:00
$('#row').attr('class', 'row');
2022-05-24 06:30:14 +00:00
$("#menu").html("<i class='fa-solid fa-bars'></i>");
2021-09-28 12:56:14 +00:00
//移除移动端切换功能区
2021-10-03 09:03:31 +00:00
$('#rightone').attr('class', 'row rightone');
2021-09-25 14:57:18 +00:00
}
2021-10-03 09:03:31 +00:00
2021-09-26 12:21:22 +00:00
if (window.innerWidth <= 990) {
2021-10-03 09:03:31 +00:00
//移动端隐藏更多页面
$('#container').attr('class', 'container');
2022-07-07 13:42:10 +00:00
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
2021-10-03 09:03:31 +00:00
//移动端隐藏弹窗页面
$('#box').css("display", "none");
$('#row').css("display", "flex");
$('#more').css("display", "flex");
2021-09-25 14:57:18 +00:00
}
})
2021-09-26 13:30:38 +00:00
})
2022-01-20 12:50:55 +00:00
2021-09-28 12:56:14 +00:00
//移动端切换功能区
2021-10-03 09:03:31 +00:00
var changemore = false;
$('#changemore').on('click', function () {
changemore = !changemore;
if (changemore) {
$('#rightone').attr('class', 'row menus mobile');
2021-09-28 12:56:14 +00:00
} else {
2021-10-03 09:03:31 +00:00
$('#rightone').attr('class', 'row menus');
2021-09-28 12:56:14 +00:00
}
2021-10-03 09:03:31 +00:00
});
2021-09-28 12:56:14 +00:00
2021-09-26 13:30:38 +00:00
//更多页面显示关闭按钮
2021-09-28 12:56:14 +00:00
$("#more").hover(function () {
2021-10-03 09:03:31 +00:00
$('#close').css("display", "block");
2021-09-28 12:56:14 +00:00
}, function () {
2021-10-03 09:03:31 +00:00
$('#close').css("display", "none");
2021-09-27 13:07:24 +00:00
})
//屏蔽右键
2021-09-28 12:56:14 +00:00
document.oncontextmenu = function () {
2022-03-04 10:52:51 +00:00
iziToast.show({
timeout: 2000,
2022-05-24 06:30:14 +00:00
icon: "fa-solid fa-circle-exclamation",
2021-09-27 13:07:24 +00:00
message: '为了浏览体验,本站禁用右键'
});
return false;
2021-12-13 06:43:50 +00:00
}
//控制台输出
2022-06-20 13:20:45 +00:00
console.clear();
var styleTitle1 = `
font-size: 20px;
font-weight: 600;
color: rgb(244,167,89);
`
var styleTitle2 = `
font-size:12px;
color: rgb(244,167,89);
`
var styleContent = `
color: rgb(30,152,255);
`
var title1 = '無名の主页'
var title2 = `
_____ __ __ _______ ____ __
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
| | | |\\/| |\\___ \\ \\ / \\ /
_| |_| | | |____) | | | | |
|_____|_| |_|_____/ |_| |_|
`
var content = `
2022-07-07 13:42:10 +00:00
3.3
更新日期2022-07-06
2022-01-29 05:09:21 +00:00
主页: https://www.imsyy.top
Github: https://github.com/imsyy/home
`
console.log(`%c${title1} %c${title2}
2022-07-07 13:42:10 +00:00
%c${content}`, styleTitle1, styleTitle2, styleContent)