去除配置文件 & 天气 API 更换

Author: 底层用户

README.md

@@ -9,8 +9,6 @@
 
 >主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf)
 
->天气 API 每日限量100次，需 [自行申请](https://www.tianqiapi.com/)，或更换其他 API
-
 ### Demo
 >由于 CDN 缓存原因，查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存
 
@@ -28,7 +26,17 @@
 - [x] 移动端适配
 * [ ] 还没想好呢
 
-### 配置
+
+### 天气
+
+由于原天气 API 不稳定，已更换天气 API，现需要前往以下网站获取 key
+
+- 前往 [ROLL](https://www.mxnzp.com/doc/list) 获取 app_id 和 app_secret，用于获取城市信息
+- 前往 [和风天气](https://dev.qweather.com/) 获取 key，用于获取天气信息
+
+也可自行更换其他方式
+
+<!-- ### 配置
 
 本项目采用 `json` 文件来配置站点内容，该配置不受版本更新影响，可将自定义配置写入 `setting.json` 以更改页面内容
 
@@ -79,7 +87,7 @@
 }
 ```
 
-</details>
+</details> -->
 
 ### 音乐
 
@@ -137,7 +145,8 @@ make clean all
 
 * [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
 * [小歪 API](https://api.ixiaowai.cn/)
-* [天气 API](https://www.tianqiapi.com/)
+* [和风天气](https://dev.qweather.com/)
+* [ROLL](https://www.mxnzp.com/doc/list)
 * [Hitokoto 一言](https://hitokoto.cn/)
 
 <a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a>

README_EN.md

@@ -9,8 +9,6 @@ Simple little homepage, had enough of the original one and made a new one
 
 >The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.imsyy.top/font/Pacifico-Regular.ttf)  
 
->Weather API is limited to 100 times per day, must [Apply on your own](https://www.tianqiapi.com/), or change to another api
-
 ### Demo
 >Due to CDN caching, you may need `Ctrl` + `F5` to force a browser cache refresh to see the latest results
 
@@ -28,7 +26,17 @@ Simple little homepage, had enough of the original one and made a new one
 - [x] Mobile adaptation
 * [ ] Haven't thought about it yet
 
-### Configuration
+### Weather
+
+Because the original weather API is unstable, the weather API has been replaced. Now you need to go to the following website to obtain the key  
+
+- to [ROLL] (https://www.mxnzp.com/doc/list) for app_id and app_secret, used to capture the city  
+
+- to [and wind weather] (https://dev.qweather.com/) to obtain the key, is used to get the weather information  
+
+It can also be replaced by other methods
+
+<!-- ### Configuration
 
 This project uses `json` file to configure the site content, the configuration is not affected by version updates, you can write custom configuration to `setting.json` to change the page content
 
@@ -79,7 +87,7 @@ This project uses `json` file to configure the site content, the configuration i
 }
 ```
 
-</details>
+</details> -->
 
 ### Music
 
@@ -137,7 +145,8 @@ make clean all
 
 * [MetingAPI By wuenci](https://api.wuenci.com/meting/api/)
 * [小歪 API](https://api.ixiaowai.cn/)
-* [天气 API](https://www.tianqiapi.com/)
+* [和风天气](https://dev.qweather.com/)
+* [ROLL](https://www.mxnzp.com/doc/list)
 * [Hitokoto 一言](https://hitokoto.cn/)
 
 <a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a>

font/Pacifico-Regular.ttf

@@ -181,18 +181,17 @@
                                 </div>
                                 <div class="col times">
                                     <!--时间-->
-                                    <div class="time cards">
+                                    <div class="time cards" id="upWeather">
                                         <div class="timeshow" id="time">
                                             2000&nbsp;年&nbsp;0&nbsp;月&nbsp;00&nbsp;日&nbsp;<span
                                                 class="weekday">星期一</span><br><span class="time-text">00:00:00</span>
                                         </div>
                                         <div class="weather">
                                             <span id="city_text">天气</span>&nbsp;
                                             <span id="wea_text">加载失败</span>&nbsp;
-                                            <span id="tem_night"></span>°C~
-                                            <span id="tem_day"></span>°C&nbsp;
+                                            <span id="tem_text">*</span>°C&nbsp;
                                             <span id="win_text"></span>
-                                            <span id="win_speed"></span>
+                                            <span id="win_speed">*</span>级
                                         </div>
                                     </div>
                                 </div>
@@ -370,7 +369,7 @@
                             <div class="img-title">
                                 <span class="img-title-big" id="logo-title-other">imsyy</span>
                                 <span class="img-text" id="logo-title-other-small">.top</span><br />
-                                <span class="img-text">&nbsp;v&nbsp;3.2</span>
+                                <span class="img-text">&nbsp;v&nbsp;3.3</span>
                                 <a href="https://github.com/imsyy/home" target="_blank">
                                     <i class="fa-brands fa-github"></i>
                                 </a>
@@ -438,9 +437,14 @@ <h2 class="accordion-header" id="headingTwo">
                                                     <i class="fa-solid fa-circle-plus"></i>&nbsp;音乐播放器支持音量控制
                                                 </span>
                                                 <span class="uptext">
-                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;时光胶囊显示错误</span>
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;修复天气 API
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;时光胶囊显示错误
+                                                </span>
                                                 <span class="uptext">
-                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;移动端动画及细节</span>
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;移动端动画及细节
+                                                </span>
                                                 <span class="uptext">
                                                     <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;图标更换为 Font
                                                     Awesome</span>

index.html

@@ -43,7 +43,7 @@ body.addEventListener('mousemove', (e) => {
 //移动端去除鼠标样式
 switch (true) {
     case navigator.userAgent.indexOf('Mobile') > 0:
-    $('#g-pointer-2').css("display", "none");
+        $('#g-pointer-2').css("display", "none");
 }
 
 //加载完成后执行
@@ -146,27 +146,68 @@ $('#hitokoto').click(function () {
             .catch(console.error)
     } else {
         iziToast.show({
-            timeout: 2000,
+            timeout: 1000,
             icon: "fa-solid fa-circle-exclamation",
             message: '你点太快了吧'
         });
     }
 });
 
 //获取天气
-//每日限量 100 次
-//请前往 https://www.tianqiapi.com/ 申请（免费）
-fetch(localStorage.getItem('weather_api'))
-    .then(response => response.json())
-    .then(data => {
-        $('#wea_text').html(data.wea)
-        $('#city_text').html(data.city)
-        $('#tem_night').html(data.tem_night)
-        $('#tem_day').html(data.tem_day)
-        $('#win_text').html(data.win)
-        $('#win_speed').html(data.win_speed)
-    })
-    .catch(console.error)
+//请前往 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)
+                            $('#tem_text').html(weather.now.temp)
+                            $('#win_text').html(weather.now.windDir)
+                            $('#win_speed').html(weather.now.windScale)
+                        })
+                })
+        })
+        .catch(console.error);
+}
+
+getWeather();
+
+$('#upWeather').click(function () {
+    if (times == 0) {
+        times = 1;
+        var index = setInterval(function () {
+            times--;
+            if (times == 0) {
+                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: '请稍后再更新哦'
+        });
+    }
+});
 
 //获取时间
 var t = null;
@@ -243,18 +284,41 @@ $("#twitter").mouseover(function () {
     $("#link-text").html("通过这里联系我");
 });
 
+//自动变灰
+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);
+    }
+}
+
 //更多页面切换
 var shoemore = false;
 $('#switchmore').on('click', function () {
     shoemore = !shoemore;
     if (shoemore && $(document).width() >= 990) {
         $('#container').attr('class', 'container mores');
-        $("#change").html(localStorage.getItem('des_tip_change'));
-        $("#change1").html(localStorage.getItem('des_title_change'));
+        $("#change").html("Oops&nbsp;!");
+        $("#change1").html("哎呀，这都被你发现了（ 再点击一次可关闭 ）");
     } else {
         $('#container').attr('class', 'container');
-        $("#change").html(localStorage.getItem('des_tip'));
-        $("#change1").html(localStorage.getItem('des_title'));
+        $("#change").html("Hello&nbsp;World&nbsp;!");
+        $("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
     }
 });
 
@@ -302,8 +366,8 @@ window.addEventListener('load', function () {
         if (window.innerWidth <= 990) {
             //移动端隐藏更多页面
             $('#container').attr('class', 'container');
-            $("#change").html(localStorage.getItem('des_tip'));
-            $("#change1").html(localStorage.getItem('des_title'));
+            $("#change").html("Hello&nbsp;World&nbsp;!");
+            $("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
 
             //移动端隐藏弹窗页面
             $('#box').css("display", "none");
@@ -341,29 +405,6 @@ document.oncontextmenu = function () {
     return false;
 }
 
-//自动变灰
-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-candle-holder",
-                message: '今天是中国国家纪念日'
-            });
-        }, false);
-    }
-}
-
 //控制台输出
 console.clear();
 var styleTitle1 = `
@@ -388,11 +429,11 @@ var title2 = `
 |_____|_|  |_|_____/   |_|      |_|                                                     
 `
 var content = `
-版 本 号：3.2
-更新日期：2022-06-28
+版 本 号：3.3
+更新日期：2022-07-06
 
 主页:  https://www.imsyy.top
 Github:  https://github.com/imsyy/home
 `
 console.log(`%c${title1} %c${title2}
-%c${content}`, styleTitle1, styleTitle2, styleContent)
+%c${content}`, styleTitle1, styleTitle2, styleContent)

js/main.js

@@ -14,7 +14,7 @@ var type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
 var id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
 
 $.ajax({
-    url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id, //json文件位置，文件名
+    url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
     type: "GET",
     dataType: "JSON",
     success: function (data) {