v1.3

2021-10-03 17:03:31 +08:00 · 2021-10-03 17:03:31 +08:00 · cfae7cc61b
commit cfae7cc61b
parent 2a6eabac95
5 changed files with 169 additions and 152 deletions
--- a/css/mobile.css
+++ b/css/mobile.css
@ -1,14 +1,7 @@
@charset"utf-8";

 /*小于1400px时*/
-@media (max-width: 1400px) {
-
-    /*时钟显示*/
-    span#win_text,
-    span#win_speed {
-        display: none;
-    }
-}
+@media (max-width: 1400px) {}

 /*小于1200px时*/
@media (max-width: 1200px) {
@ -21,11 +14,6 @@
        max-width: 1100px !important;
    }

-    /*天气模块*/
-    .weather {
-        display: none;
-    }
-
    .weekday {
        display: none;
    }
@ -34,10 +22,11 @@
 /*小于992px时*/
@media (max-width: 992px) {

-    /*简介不可点击*/
+    /*简介不可点击
    .message {
        pointer-events: none;
    }
+    */

    /*一言*/
    .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时*/
@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 {
        display: flex;
@ -144,6 +138,11 @@
        border-radius: 6px;
        font-size: 1.25rem;
        transition: 0.5s;
+        width: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
    }

    /*页脚文字*/
@ -157,6 +156,12 @@
    .menu {
        display: none !important;
    }
+
+    /*时钟显示*/
+    span#win_text,
+    span#win_speed {
+        display: none;
+    }
 }

 /*小于390px时*/
@ -200,6 +205,7 @@

 .menus .logo {
    display: inline !important;
+    text-align: center;
    position: fixed;
    top: 8%;
    font-family: 'Pacifico-Regular';
--- a/css/style.css
+++ b/css/style.css
@ -60,6 +60,7 @@ main {

 .row {
    align-items: center;
+    justify-content: center;
    width: 100%;
 }

--- a/index.html
+++ b/index.html
@ -83,7 +83,7 @@
                                </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>
                                    <p class="des-title"><span id="change">Hello&nbsp;World&nbsp;!</span><br /><span
                                            id="change1">一个建立于 21 世纪的小站，存活于互联网的边缘</span></p>
@ -112,6 +112,10 @@
                            </div>
                        </div>
                    </div>
+                    <!--第二屏 Logo-->
+                    <div class="logo cards" style="display: none" id="changemore">
+                        <a>imsyy.top</a>
+                    </div>
                    <div class="col right">
                        <div class="main-right">
                            <!--功能区-->
@ -194,10 +198,10 @@
                                        </a>
                                    </div>
                                    <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">
-                                                <i class="fad fa-info-circle"></i>
-                                                <span class="link-name">关于</span>
+                                                <i class="fad fa-image"></i>
+                                                <span class="link-name">相册</span>
                                            </div>
                                        </a>
                                    </div>
@ -207,17 +211,14 @@
                    </div>
                </div>
                <!--展开菜单按钮-->
-                <div class="menu">
-                    <a class="munu-button cards" id="menu" onclick="switchMenu()"><i class="fad fa-bars"></i></a>
-                </div>
-                <!--第二屏 Logo-->
-                <div class="logo cards" style="display: none" onclick="changeMore()">
-                    <a>imsyy.top</a>
+                <div class="menu" id="switchmenu">
+                    <a class="munu-button cards" id="menu"><i class="fad fa-bars"></i></a>
                </div>
                <!--更多内容-->
                <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 class="line" style="margin-top: 1rem;">
                        <i class="fad fa-grip-lines-vertical"></i>
@ -279,7 +280,7 @@
                            </a>
                        </div>
                        <div class="col">
-                            <a onclick="openBox()">
+                            <a id="openmore">
                                <div class="link-card cards">
                                    <span class="link-name">更多</span>
                                </div>
@ -291,21 +292,22 @@
                <div class="box" id="box" style="display: none">
                    <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>
                        </div>
                        <!--更新日志-->
                        <div class="img-title">
                            <span class="img-title">imsyy</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 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;Js&nbsp;文件优化</span>
                        </div>
                    </div>
                </div>
--- a/js/main.js
+++ b/js/main.js
@ -46,14 +46,15 @@ color: rgb(30,152,255);
 var title1 = '無名の主页'
 var title2 = 'imsyy.top'
 var content = `
-版 本 号：1.2.0
-更新日期：2021-09-27 19:39:21
+版 本 号：1.3.0
+更新日期：2021-10-02 14:26:31

 更新说明：
 1. 新增 点击左侧简介弹出更多页面
-2. 新增 时间胶囊 （ 时光进度条 ）
+2. 修复 时间胶囊（ 时光进度条 ）
 3. 优化 移动端动画及细节
-4. 修复 星期进度条显示错误
+4. 优化 Js 文件优化
+5. 修复 星期进度条显示错误

 主页:  https://imsyy.top
 Github:  https://github.com/imsyy/home
@ -159,133 +160,140 @@ window.addEventListener('load', function () {
 }, false)

 //链接提示文字
-window.onload = function () {
-    var link = document.getElementById("social");
-    link.onmouseover = function () {
-        document.getElementById("social").style.cssText = "background: rgb(0 0 0 / 25%);backdrop-filter: blur(5px);border-radius: 6px;transition: all 0.5s";
-        document.getElementById("link-text").style.cssText = "display: block;transition: all 0.5s";
-    };
-    link.onmouseout = function () {
-        document.getElementById("social").style.cssText = "background: none;backdrop-filter: none;border-radius: 6px;transition: all 0.5s";
-        document.getElementById("link-text").style.cssText = "display: none;transition: all 0.5s";
-    }
+$("#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"
+    });
+});

-    var link = document.getElementById("github");
-    link.onmouseover = function () {
-        document.getElementById("link-text").innerHTML = "去 Github 看看";
-    };
-    link.onmouseout = function () {
-        document.getElementById("link-text").innerHTML = "通过这里联系我";
-    }
-    var link1 = document.getElementById("qq");
-    link1.onmouseover = function () {
-        document.getElementById("link-text").innerHTML = "有什么事吗";
-    };
-    link1.onmouseout = function () {
-        document.getElementById("link-text").innerHTML = "通过这里联系我";
-    }
-    var link2 = document.getElementById("email");
-    link2.onmouseover = function () {
-        document.getElementById("link-text").innerHTML = "来封 Email";
-    };
-    link2.onmouseout = function () {
-        document.getElementById("link-text").innerHTML = "通过这里联系我";
-    }
-    var link3 = document.getElementById("telegram");
-    link3.onmouseover = function () {
-        document.getElementById("link-text").innerHTML = "你懂的 ~";
-    };
-    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=/";
-    }
-}
+$("#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("通过这里联系我");
+});

 //更多页面切换
-function switchMore() {
-    var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
-    if (more == '0') {
-        document.getElementById("container").classList.add('mores');
-        document.getElementById("change").innerHTML = "Oops&nbsp;!";
-        document.getElementById("change1").innerHTML = "哎呀，这都被你发现了（ 再点击一次可关闭 ）";
-        document.cookie = "more=1;path=/";
+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("哎呀，这都被你发现了（ 再点击一次可关闭 ）");
    } else {
-        document.getElementById("container").classList.remove('mores');
-        document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!";
-        document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘";
-        document.cookie = "more=0;path=/";
+        $('#container').attr('class', 'container');
+        $("#change").html("Hello&nbsp;World&nbsp;!");
+        $("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
    }
-}
+});
+
+//更多页面关闭按钮
+$('#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() {
-    document.getElementById("box").style.cssText = "display: block";
-    document.getElementById("row").style.cssText = "display: none";
-    document.getElementById("more").style.cssText = "display: none!important";
-}
-
-function closeBox() {
-    document.getElementById("box").style.cssText = "display: none";
-    document.getElementById("row").style.cssText = "display: flex";
-    document.getElementById("more").style.cssText = "display: flex";
-}
+$('#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");
+});

 //监听网页宽度
 window.addEventListener('load', function () {
    window.addEventListener('resize', function () {
        //关闭移动端样式
        if (window.innerWidth >= 600) {
-            document.getElementById("container").classList.remove('menus');
-            document.getElementById("menu").innerHTML = "<i class='fad fa-bars'></i>";
+            $('#row').attr('class', 'row');
+            $("#menu").html("<i class='fad fa-bars'></i>");
            //移除移动端切换功能区
-            document.getElementById("rightone").classList.remove('mobile');
+            $('#rightone').attr('class', 'row rightone');
        }
-        //移动端隐藏更多页面
+
        if (window.innerWidth <= 990) {
-            document.getElementById("container").classList.remove('mores');
-            document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!";
-            document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘";
+            //移动端隐藏更多页面
+            $('#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");
        }
    })
 })

 //移动端切换功能区
-function changeMore() {
-    var more = document.cookie.replace(/(?:(?:^|.*;\s*)more\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
-    if (more == '0') {
-        document.getElementById("rightone").classList.add('mobile');
-        document.cookie = "more=1;path=/";
+var changemore = false;
+$('#changemore').on('click', function () {
+    changemore = !changemore;
+    if (changemore) {
+        $('#rightone').attr('class', 'row menus mobile');
    } else {
-        document.getElementById("rightone").classList.remove('mobile');
-        document.cookie = "more=0;path=/";
+        $('#rightone').attr('class', 'row menus');
    }
-}
+});

 //更多页面显示关闭按钮
 $("#more").hover(function () {
-    document.getElementById("close").style.cssText = "display: block";
+    $('#close').css("display", "block");
 }, function () {
-    document.getElementById("close").style.cssText = "display: none";
+    $('#close').css("display", "none");
 })

 //屏蔽右键
--- a/js/time.js
+++ b/js/time.js
@ -22,15 +22,15 @@ var vm = new Vue({
            var myHours = myDate.getHours(); // 获取当前小时(0-23)
            var myMinu = myDate.getMinutes(); // 获取当前分钟(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.year = myYear;
            this.month = myMonth - 1;
            this.day = myDay - 1;
            this.curday = myDay;
-            this.week = myWeek;
-            this.curweek = myWeek +1;
+            this.week = myWeek + 6;
+            this.curweek = myWeek + 7;
            this.minute = myMinu;
            this.age = myYear - this.yearForYour;
        },