Homepage-imsyy/js/main.js

338 lines
10 KiB
JavaScript
Raw Normal View History

//加载动画
window.addEventListener('load', function () {
$('#loading-box').attr('class', 'loaded');
$('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important");
}, false)
2021-09-25 14:57:18 +00:00
//弹窗样式
iziToast.settings({
timeout: 10000,
2022-01-14 09:35:16 +00:00
//icon: 'Fontawesome',
2021-09-25 14:57:18 +00:00
closeOnEscape: 'true',
position: 'topLeft',
transitionIn: 'bounceInRight',
transitionOut: 'fadeOutLeft',
2021-09-27 13:07:24 +00:00
displayMode: 'replace',
2021-09-25 14:57:18 +00:00
layout: '2',
titleColor: '#efefef',
messageColor: '#efefef',
iconColor: '#efefef',
});
//获取一言
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 => {
const hitokoto = document.getElementById('hitokoto_text')
const from = document.getElementById('from_text')
hitokoto.innerText = data.hitokoto
from.innerText = data.from
})
.catch(console.error)
//获取天气
2021-11-17 08:29:00 +00:00
fetch('https://www.tianqiapi.com/free/day?appid=43986679&appsecret=TksqGZT7&unescape=1')
2021-09-25 14:57:18 +00:00
.then(response => response.json())
.then(data => {
const wea = document.getElementById('wea_text')
const city = document.getElementById('city_text')
const tem_night = document.getElementById('tem_night')
const tem_day = document.getElementById('tem_day')
const win = document.getElementById('win_text')
const win_speed = document.getElementById('win_speed')
wea.innerText = data.wea
city.innerText = data.city
tem_night.innerText = data.tem_night
tem_day.innerText = data.tem_day
win.innerText = data.win
win_speed.innerText = data.win_speed
})
.catch(console.error)
//获取时间
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;
}
document.getElementById("time").innerHTML = y + "&nbsp;年&nbsp;" + mm + "&nbsp;月&nbsp;" + d + "&nbsp;日&nbsp;" + "<span class='weekday'>" + weekday[day] + "</span><br>" + "<span class='time-text'>" + h + ":" + m + ":" + s + "</span>";
t = setTimeout(time, 1000);
}
//必应壁纸
/*
2021-09-25 14:57:18 +00:00
var url = 'https://bird.ioliu.cn/v1/?url=https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=8';
var imgUrls = JSON.parse(sessionStorage.getItem("imgUrls"));
var index = sessionStorage.getItem("index");
var $section = $('#section');
if (imgUrls == null) {
imgUrls = new Array();
index = 0;
$.get(url, function (result) {
images = result.images;
for (let i = 0; i < images.length; i++) {
const item = images[i];
imgUrls.push(item.url);
}
var imgUrl = imgUrls[index];
var url = "https://www.bing.com" + imgUrl;
$section.css("background", "url('" + url + "') center center no-repeat #666");
$section.css("background-size", "cover");
sessionStorage.setItem("imgUrls", JSON.stringify(imgUrls));
sessionStorage.setItem("index", index);
});
} else {
if (index == 7)
index = 0;
else
index++;
var imgUrl = imgUrls[index];
var url = "https://www.bing.com" + imgUrl;
$section.css("background", "url('" + url + "') center center no-repeat #666");
$section.css("background-size", "cover");
sessionStorage.setItem("index", index);
}
*/
//临时更换图片 api
2021-11-17 08:29:00 +00:00
/*
var $section = $('#section');
2021-11-17 07:35:51 +00:00
var url = "https://api.ixiaowai.cn/gqapi/gqapi.php";
$section.css("background", "url('" + url + "') center center no-repeat #666");
$section.css("background-size", "cover");
2021-11-17 08:29:00 +00:00
*/
2021-09-25 14:57:18 +00:00
//链接提示文字
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
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');
$("#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');
$("#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 () {
$('#container').attr('class', 'container');
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
});
//菜单栏切换
var switchmenu = false;
$('#switchmenu').on('click', function () {
switchmenu = !switchmenu;
if (switchmenu) {
$('#row').attr('class', 'row menus');
2022-01-13 06:48:37 +00:00
$("#menu").html("<i class='iconfont icon-times'></i>");
2021-09-25 14:57:18 +00:00
} else {
2021-10-03 09:03:31 +00:00
$('#row').attr('class', 'row');
2022-01-13 06:48:37 +00:00
$("#menu").html("<i class='iconfont icon-bars'>");
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-01-13 06:48:37 +00:00
$("#menu").html("<i class='iconfont icon-bars'>");
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');
$("#change").html("Hello&nbsp;World&nbsp;!");
$("#change1").html("一个建立于 21 世纪的小站,存活于互联网的边缘");
//移动端隐藏弹窗页面
$('#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
})
2021-10-13 10:16:29 +00:00
/*
document.getElementById("theme-toggle").addEventListener("click", () => {
document.body.className.includes("dark") ? (document.body.classList.remove('dark'),
localStorage.setItem("pref-theme", 'light')) : (document.body.classList.add('dark'),
localStorage.setItem("pref-theme", 'dark'))
})
*/
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 () {
2021-09-27 13:07:24 +00:00
iziToast.info({
2022-01-14 09:35:16 +00:00
//icon: 'fad fa-do-not-enter',
iconUrl: './img/warn.png',
2021-09-27 13:07:24 +00:00
title: '温馨提醒',
message: '为了浏览体验,本站禁用右键'
});
return false;
2021-12-13 06:43:50 +00:00
}
//自动变灰
var myDate = new Date;
2022-01-16 02:28:16 +00:00
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) {
2021-12-13 06:43:50 +00:00
var d = day.split('.');
if (mon == d[0] && date == d[1]) {
2022-01-16 02:28:16 +00:00
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("今天是国家纪念日,全站已切换为黑白模式");
iziToast.info({
timeout: 14000,
2022-01-16 03:37:34 +00:00
//icon: 'fad fa-candle-holder',
iconUrl: './img/candle.png',
2022-01-16 02:28:16 +00:00
title: '今天是国家纪念日',
message: '历史不会忘记,人民永远铭记!'
});
2021-12-13 06:43:50 +00:00
}
}
//控制台输出
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 = `
1.5.2
更新日期2022-01-20
更新说明
1. 新增 音乐播放器
2. 新增 开屏载入动画
3. 修复 部分边距不一致
4. 优化 移动端动画及细节
5. 优化 页面加载缓慢
6. 修复 时光胶囊显示错误
主页: https://imsyy.top
Github: https://github.com/imsyy/home
`
console.log(`%c${title1} %c${title2}
%c${content}`, styleTitle1, styleTitle2, styleContent)