caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.3

Browse Source
This commit is contained in:
底层用户 2021-10-03 17:03:31 +08:00
parent 2a6eabac95
commit cfae7cc61b
5 changed files with 169 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
css/mobile.css
View File

@ -1,14 +1,7 @@
@charset"utf-8"; @charset"utf-8";
/*小于1400px时*/ /*小于1400px时*/
@media (max-width: 1400px) { @media (max-width: 1400px) {}
/*时钟显示*/
span#win_text,
span#win_speed {
display: none;
}
}
/*小于1200px时*/ /*小于1200px时*/
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -21,11 +14,6 @@
max-width: 1100px !important; max-width: 1100px !important;
} }
/*天气模块*/
.weather {
display: none;
}
.weekday { .weekday {
display: none; display: none;
} }
@ -34,10 +22,11 @@
/*小于992px时*/ /*小于992px时*/
@media (max-width: 992px) { @media (max-width: 992px) {
/*简介不可点击*/ /*简介不可点击
.message { .message {
pointer-events: none; pointer-events: none;
} }
*/
/*一言*/ /*一言*/
.col.hitokotos { .col.hitokotos {
@ -63,6 +52,25 @@
} }
} }
/*小于840px时*/
@media (max-width: 840px) {
/*社交链接*/
.social {
max-width: 100%;
justify-content: center;
}
#link-text {
display: none !important;
}
.link i {
margin: 0px 20px;
}
}
/*小于789px时*/ /*小于789px时*/
@media (max-width: 789px) { @media (max-width: 789px) {
@ -115,20 +123,6 @@
} }
*/ */
/*社交链接*/
.social {
max-width: 100%;
justify-content: center;
}
#link-text {
display: none !important;
}
.link i {
margin: 0px 20px;
}
/*菜单栏按钮*/ /*菜单栏按钮*/
.menu { .menu {
display: flex; display: flex;
@ -144,6 +138,11 @@
border-radius: 6px; border-radius: 6px;
font-size: 1.25rem; font-size: 1.25rem;
transition: 0.5s; transition: 0.5s;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
} }
/*页脚文字*/ /*页脚文字*/
@ -157,6 +156,12 @@
.menu { .menu {
display: none !important; display: none !important;
} }
/*时钟显示*/
span#win_text,
span#win_speed {
display: none;
}
} }
/*小于390px时*/ /*小于390px时*/
@ -200,6 +205,7 @@
.menus .logo { .menus .logo {
display: inline !important; display: inline !important;
text-align: center;
position: fixed; position: fixed;
top: 8%; top: 8%;
font-family: 'Pacifico-Regular'; font-family: 'Pacifico-Regular';

1
css/style.css
View File

@ -60,6 +60,7 @@ main {
.row { .row {
align-items: center; align-items: center;
justify-content: center;
width: 100%; width: 100%;
} }

36
index.html
View File

@ -83,7 +83,7 @@
</div> </div>
</div> </div>
<!--介绍信息--> <!--介绍信息-->
<div class="message cards" onclick="switchMore()"> <div class="message cards" id="switchmore">
<div class="des" id="des"><i class="iconfont icon-yinhao-copy-copy"></i> <div class="des" id="des"><i class="iconfont icon-yinhao-copy-copy"></i>
<p class="des-title"><span id="change">Hello&nbsp;World&nbsp;!</span><br /><span <p class="des-title"><span id="change">Hello&nbsp;World&nbsp;!</span><br /><span
id="change1">一个建立于 21 世纪的小站，存活于互联网的边缘</span></p> id="change1">一个建立于 21 世纪的小站，存活于互联网的边缘</span></p>
@ -112,6 +112,10 @@
</div> </div>
</div> </div>
</div> </div>
<!--第二屏 Logo-->
<div class="logo cards" style="display: none" id="changemore">
<a>imsyy.top</a>
</div>
<div class="col right"> <div class="col right">
<div class="main-right"> <div class="main-right">
<!--功能区--> <!--功能区-->
@ -194,10 +198,10 @@
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a href="https://blog.imsyy.top/about/" target="_blank"> <a href="https://photo.imsyy.top/" target="_blank">
<div class="link-card cards"> <div class="link-card cards">
<i class="fad fa-info-circle"></i> <i class="fad fa-image"></i>
<span class="link-name">关于</span> <span class="link-name">相册</span>
</div> </div>
</a> </a>
</div> </div>
@ -207,17 +211,14 @@
</div> </div>
</div> </div>
<!--展开菜单按钮--> <!--展开菜单按钮-->
<div class="menu"> <div class="menu" id="switchmenu">
<a class="munu-button cards" id="menu" onclick="switchMenu()"><i class="fad fa-bars"></i></a> <a class="munu-button cards" id="menu"><i class="fad fa-bars"></i></a>
</div>
<!--第二屏 Logo-->
<div class="logo cards" style="display: none" onclick="changeMore()">
<a>imsyy.top</a>
</div> </div>
<!--更多内容--> <!--更多内容-->
<div class="more cards" id="more"> <div class="more cards" id="more">
<!--关闭按钮--> <!--关闭按钮-->
<div class="close fixed-top" onclick="switchMore()" id="close"><i class="fad fa-times-circle"></i> <div class="close fixed-top" id="close">
<i class="fad fa-times-circle"></i>
</div> </div>
<div class="line" style="margin-top: 1rem;"> <div class="line" style="margin-top: 1rem;">
<i class="fad fa-grip-lines-vertical"></i> <i class="fad fa-grip-lines-vertical"></i>
@ -279,7 +280,7 @@
</a> </a>
</div> </div>
<div class="col"> <div class="col">
<a onclick="openBox()"> <a id="openmore">
<div class="link-card cards"> <div class="link-card cards">
<span class="link-name">更多</span> <span class="link-name">更多</span>
</div> </div>
@ -291,21 +292,22 @@
<div class="box" id="box" style="display: none"> <div class="box" id="box" style="display: none">
<div class="box-wrapper"> <div class="box-wrapper">
<!--关闭按钮--> <!--关闭按钮-->
<div class="closebox fixed-top" onclick="closeBox()"> <div class="closebox fixed-top" id="closemore">
<i class="fad fa-times-circle"></i> <i class="fad fa-times-circle"></i>
</div> </div>
<!--更新日志--> <!--更新日志-->
<div class="img-title"> <div class="img-title">
<span class="img-title">imsyy</span> <span class="img-title">imsyy</span>
<span class="img-text">.top</span> <span class="img-text">.top</span>
<span class="img-text">&nbsp;&nbsp;v&nbsp;1.2</span> <span class="img-text">&nbsp;&nbsp;v&nbsp;1.3</span>
</div> </div>
<div class="upnote"> <div class="upnote">
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;点击左侧简介可弹出隐藏页面</span> <span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;点击左侧简介可弹出更多页面</span>
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;新增时间胶囊（ 时光进度条 ）</span> <span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;修复时间胶囊（ 时光进度条 ）</span>
<span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;隐藏页面新增更多页面弹窗</span> <span class="uptext"><i class="fad fa-plus-circle"></i>&nbsp;隐藏页面新增全屏弹窗</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;星期进度条显示错误</span> <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;星期进度条显示错误</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;移动端动画及细节</span> <span class="uptext"><i class="fad fa-wrench"></i>&nbsp;移动端动画及细节</span>
<span class="uptext"><i class="fad fa-wrench"></i>&nbsp;Js&nbsp;文件优化</span>
</div> </div>
</div> </div>
</div> </div>

216
js/main.js
View File

@ -46,14 +46,15 @@ color: rgb(30,152,255);
var title1 = '無名の主页' var title1 = '無名の主页'
var title2 = 'imsyy.top' var title2 = 'imsyy.top'
var content = ` var content = `
版 本 号：1.2.0 版 本 号：1.3.0
更新日期：2021-09-27 19:39:21 更新日期：2021-10-02 14:26:31
更新说明： 更新说明：
1. 新增 点击左侧简介弹出更多页面 1. 新增 点击左侧简介弹出更多页面
2. 新增 时间胶囊 （ 时光进度条 ） 2. 修复 时间胶囊（ 时光进度条 ）
3. 优化 移动端动画及细节 3. 优化 移动端动画及细节
4. 修复 星期进度条显示错误 4. 优化 Js 文件优化
5. 修复 星期进度条显示错误
主页: https://imsyy.top 主页: https://imsyy.top
Github: https://github.com/imsyy/home Github: https://github.com/imsyy/home
@ -159,133 +160,140 @@ window.addEventListener('load', function () {
}, false) }, false)
//链接提示文字 //链接提示文字
window.onload = function () { $("#social").mouseover(function () {
var link = document.getElementById("social"); $("#social").css({
link.onmouseover = function () { "background": "rgb(0 0 0 / 25%)",
document.getElementById("social").style.cssText = "background: rgb(0 0 0 / 25%);backdrop-filter: blur(5px);border-radius: 6px;transition: all 0.5s"; 'border-radius': '6px',
document.getElementById("link-text").style.cssText = "display: block;transition: all 0.5s"; "backdrop-filter": "blur(5px)"
}; });
link.onmouseout = function () { $("#link-text").css({
document.getElementById("social").style.cssText = "background: none;backdrop-filter: none;border-radius: 6px;transition: all 0.5s"; "display": "block",
document.getElementById("link-text").style.cssText = "display: none;transition: all 0.5s"; });
} }).mouseout(function () {
$("#social").css({
"background": "none",
"border-radius": "6px",
"backdrop-filter": "none"
});
$("#link-text").css({
"display": "none"
});
});
var link = document.getElementById("github"); $("#github").mouseover(function () {
link.onmouseover = function () { $("#link-text").html("去 Github 看看");
document.getElementById("link-text").innerHTML = "去 Github 看看"; }).mouseout(function () {
}; $("#link-text").html("通过这里联系我");
link.onmouseout = function () { });
document.getElementById("link-text").innerHTML = "通过这里联系我"; $("#qq").mouseover(function () {
} $("#link-text").html("有什么事吗");
var link1 = document.getElementById("qq"); }).mouseout(function () {
link1.onmouseover = function () { $("#link-text").html("通过这里联系我");
document.getElementById("link-text").innerHTML = "有什么事吗"; });
}; $("#email").mouseover(function () {
link1.onmouseout = function () { $("#link-text").html("来封 Email");
document.getElementById("link-text").innerHTML = "通过这里联系我"; }).mouseout(function () {
} $("#link-text").html("通过这里联系我");
var link2 = document.getElementById("email"); });
link2.onmouseover = function () { $("#telegram").mouseover(function () {
document.getElementById("link-text").innerHTML = "来封 Email"; $("#link-text").html("你懂的 ~");
}; }).mouseout(function () {
link2.onmouseout = function () { $("#link-text").html("通过这里联系我");
document.getElementById("link-text").innerHTML = "通过这里联系我"; });
} $("#twitter").mouseover(function () {
var link3 = document.getElementById("telegram"); $("#link-text").html("你懂的 ~");
link3.onmouseover = function () { }).mouseout(function () {
document.getElementById("link-text").innerHTML = "你懂的 ~"; $("#link-text").html("通过这里联系我");
}; });
link3.onmouseout = function () {
document.getElementById("link-text").innerHTML = "通过这里联系我";
}
var link4 = document.getElementById("twitter");
link4.onmouseover = function () {
document.getElementById("link-text").innerHTML = "你懂的 ~";
};
link4.onmouseout = function () {
document.getElementById("link-text").innerHTML = "通过这里联系我";
}
};
//菜单栏切换
function switchMenu() {
var menu = document.cookie.replace(/(?:(?:^|.*;\s*)menu\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
if (menu == '0') {
document.getElementById("container").classList.add('menus');
document.getElementById("menu").innerHTML = "<i class='fad fa-times'></i>";
document.cookie = "menu=1;path=/";
} else {
document.getElementById("container").classList.remove('menus');
document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>";
document.cookie = "menu=0;path=/";
}
}
//更多页面切换 //更多页面切换
function switchMore() { var shoemore = false;
var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; $('#switchmore').on('click', function () {
if (more == '0') { shoemore = !shoemore;
document.getElementById("container").classList.add('mores'); if (shoemore && $(document).width() >= 990) {
document.getElementById("change").innerHTML = "Oops&nbsp;!"; $('#container').attr('class', 'container mores');
document.getElementById("change1").innerHTML = "哎呀，这都被你发现了（ 再点击一次可关闭 ）"; $("#change").html("Oops&nbsp;!");
document.cookie = "more=1;path=/"; $("#change1").html("哎呀，这都被你发现了（ 再点击一次可关闭 ）");
} else { } else {
document.getElementById("container").classList.remove('mores'); $('#container').attr('class', 'container');
document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!"; $("#change").html("Hello&nbsp;World&nbsp;!");
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘"; $("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
document.cookie = "more=0;path=/";
} }
} });
//更多页面关闭按钮
$('#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');
$("#menu").html("<i class='fad fa-times'></i>");
} else {
$('#row').attr('class', 'row');
$("#menu").html("<i class='fad fa-bars'></i>");
}
});
//更多弹窗页面 //更多弹窗页面
function openBox() { $('#openmore').on('click', function () {
document.getElementById("box").style.cssText = "display: block"; $('#box').css("display", "block");
document.getElementById("row").style.cssText = "display: none"; $('#row').css("display", "none");
document.getElementById("more").style.cssText = "display: none!important"; $('#more').css("cssText", "display:none !important");
} });
$('#closemore').on('click', function () {
function closeBox() { $('#box').css("display", "none");
document.getElementById("box").style.cssText = "display: none"; $('#row').css("display", "flex");
document.getElementById("row").style.cssText = "display: flex"; $('#more').css("display", "flex");
document.getElementById("more").style.cssText = "display: flex"; });
}
//监听网页宽度 //监听网页宽度
window.addEventListener('load', function () { window.addEventListener('load', function () {
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
//关闭移动端样式 //关闭移动端样式
if (window.innerWidth >= 600) { if (window.innerWidth >= 600) {
document.getElementById("container").classList.remove('menus'); $('#row').attr('class', 'row');
document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>"; $("#menu").html("<i class='fad fa-bars'></i>");
//移除移动端切换功能区 //移除移动端切换功能区
document.getElementById("rightone").classList.remove('mobile'); $('#rightone').attr('class', 'row rightone');
} }
//移动端隐藏更多页面
if (window.innerWidth <= 990) { if (window.innerWidth <= 990) {
document.getElementById("container").classList.remove('mores'); //移动端隐藏更多页面
document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!"; $('#container').attr('class', 'container');
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘"; $("#change").html("Hello&nbsp;World&nbsp;!");
$("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
//移动端隐藏弹窗页面
$('#box').css("display", "none");
$('#row').css("display", "flex");
$('#more').css("display", "flex");
} }
}) })
}) })
//移动端切换功能区 //移动端切换功能区
function changeMore() { var changemore = false;
var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; $('#changemore').on('click', function () {
if (more == '0') { changemore = !changemore;
document.getElementById("rightone").classList.add('mobile'); if (changemore) {
document.cookie = "more=1;path=/"; $('#rightone').attr('class', 'row menus mobile');
} else { } else {
document.getElementById("rightone").classList.remove('mobile'); $('#rightone').attr('class', 'row menus');
document.cookie = "more=0;path=/";
} }
} });
//更多页面显示关闭按钮 //更多页面显示关闭按钮
$("#more").hover(function () { $("#more").hover(function () {
document.getElementById("close").style.cssText = "display: block"; $('#close').css("display", "block");
}, function () { }, function () {
document.getElementById("close").style.cssText = "display: none"; $('#close').css("display", "none");
}) })
//屏蔽右键 //屏蔽右键

6
js/time.js
View File

@ -22,15 +22,15 @@ var vm = new Vue({
var myHours = myDate.getHours(); // 获取当前小时(0-23) var myHours = myDate.getHours(); // 获取当前小时(0-23)
var myMinu = myDate.getMinutes(); // 获取当前分钟(0-59) var myMinu = myDate.getMinutes(); // 获取当前分钟(0-59)
var mySec = myDate.getSeconds(); // 获取当前秒数(0-59) var mySec = myDate.getSeconds(); // 获取当前秒数(0-59)
var myWeek = myDate.getDay() - 1; //获取当前星期几(0-6) var myWeek = myDate.getDay(); //获取当前星期几(0-6)
this.hour = myHours; this.hour = myHours;
this.year = myYear; this.year = myYear;
this.month = myMonth - 1; this.month = myMonth - 1;
this.day = myDay - 1; this.day = myDay - 1;
this.curday = myDay; this.curday = myDay;
this.week = myWeek; this.week = myWeek + 6;
this.curweek = myWeek +1; this.curweek = myWeek + 7;
this.minute = myMinu; this.minute = myMinu;
this.age = myYear - this.yearForYour; this.age = myYear - this.yearForYour;
}, },