天气小组件
// ==UserScript==
// @name 天气小组件
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.6
// @description ctrl + x 呼出或关闭面板；功能： 查询天气（目前就这一个功能）；天气默认显示地区：北京（搜索框内输入地区名称后回车即可更新天气，自动保存最后一次查询的地区信息）
// @author 张仨
// @grant unsafeWindow
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_xmlhttpRequest
// @match *://*/*
// @connect api.szfx.top
// @require https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js
// ==/UserScript==
unsafeWindow.Vue = Vue;
var myapp = document.createElement('div');
document.body.appendChild(myapp)
myapp.id = 'my-app';
unsafeWindow.onkeydown = function (e) {
if (e.ctrlKey && e.key == 'x') {
if (myapp.style.display == 'block') {
myapp.style.display = 'none'
} else {
myapp.style.display = 'block'
}
}
}
myapp.innerHTML = `
<div class="my-box">
<div class="my-search">
<input type="text" class="my-search__input" placeholder="Search..." v-model="search" @keyup.enter="weatherSearch" />
<div class="my-search__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z">
</path>
</svg>
</div>
</div>
<div class="my-icon">
<div class="icon__account">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
<path
d="M12.566,8 L15.611,4.956 C16.031,4.535 16.031,3.853 15.611,3.434 L12.566,0.389 C12.146,-0.031 11.464,-0.031 11.043,0.389 L7.999,3.433 L4.955,0.389 C4.534,-0.031 3.852,-0.031 3.432,0.389 L0.388,3.434 C-0.034,3.854 -0.034,4.536 0.387,4.956 L3.431,8 L0.387,11.044 C-0.034,11.465 -0.034,12.147 0.388,12.567 L3.432,15.611 C3.852,16.032 4.534,16.032 4.955,15.611 L7.999,12.567 L11.043,15.611 C11.464,16.032 12.146,16.032 12.566,15.611 L15.611,12.567 C16.031,12.146 16.031,11.464 15.611,11.044 L12.566,8 L12.566,8 Z">
</path>
</svg>
</div>
</div>
<welcome-words :datetime="datetime" :ganmao="ganmao"></welcome-words>
<my-messages v-for="post in posts" :key="post.id" :id="post.id":time="post.time" :message="post.message"></my-messages>
</div>`
function Ajax(area) {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: "GET",
responseType: "json",
url: "https://api.szfx.top/weather/?city=" + area,
onload: function (xhr) {
console.log(xhr)
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.response.data)
} else {
reject("获取数据失败")
}
}
})
})
}
function getTime() {
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
var week = weekday[time.getDay()];
var hours = time.getHours();
var minutes = time.getMinutes();
if (minutes.toString().length < 2) { minutes = "0" + minutes };
var seconds = time.getSeconds();
if (seconds.toString().length < 2) { seconds = "0" + seconds };
return (`${year}年${month}月${date}日 ${week} ${hours} : ${minutes} : ${seconds}`);
}
const app = Vue.createApp({
data() {
return {
posts: [
{ id: 'weather1', time: '', message: '' },
{ id: 'weather2', time: '', message: '' },
{ id: 'weather3', time: '', message: '' },
{ id: 'weather4', time: '', message: '' },
{ id: 'weather5', time: '', message: '' }
],
search: GM_getValue('newSearch') || '北京',
datetime: '',
ganmao: ''
}
},
mounted() {
this.weatherSearch()
setInterval(() => {
this.datetime = '现在是北京时间：' + getTime()
}, 1000)
},
methods: {
weatherSearch() {
var newAjax = new Ajax(this.search)
newAjax.then(res => {
GM_setValue('newSearch', this.search)
this.ganmao = "温馨提示：" + res.ganmao
for (let i = 0; i < this.posts.length; i++) {
this.posts[i].time = res.forecast[i].date
this.posts[i].message = "天气：" + res.forecast[i].type + "\n" + " 高温：" + res.forecast[i].high + "\n" + " 低温：" + res.forecast[i].low
}
}).catch(error => {
for (let i = 0; i < this.posts.length; i++) {
this.posts[i].message = error
}
})
}
}
})
app.component('welcome-words', {
props: ['datetime', 'ganmao'],
template: `
<div class="words-box">
<span>{{ datetime }}</span>
<span>{{ ganmao }}</span>
</div>`
})
app.component('my-messages', {
props: ['time', 'message', 'id'],
template: `
<div class="my-message" :id="id">
<p>{{ time }}</p>
{{ message }}
</div>`
})
app.mount('#my-app')
var icon__account = document.querySelector('.icon__account')
icon__account.onclick = function () {
myapp.style.display = 'none'
}
GM_addStyle(`
#my-app {
display: none;
}
.my-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 780px !important;
height: 280px !important;
z-index: 9999999;
background: #E4EBF5;
border-radius: 15px;
box-shadow: 0.8rem 0.8rem 1.4rem #c8d0e7, -0.2rem -0.2rem 1.8rem #FFFFFF;
padding: 10px;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.my-search {
position: absolute;
top: 20px;
left: 20px;
cursor: pointer;
display: flex;
align-items: center;
}
.my-search__input {
width: 180px !important;
height: 50px !important;
border: none;
border-radius: 15px;
font-size: 22px;
padding-left: 60px;
box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
background: none;
font-family: inherit;
color: #9baacf;
z-index: 9999999;
}
.my-search__input::-moz-placeholder {
color: #bec8e4;
}
.my-search__input:-ms-input-placeholder {
color: #bec8e4;
}
.my-search__input::placeholder {
color: #bec8e4;
}
.my-search__input:focus {
outline: none;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
}
.my-search__input:focus+.my-search__icon {
fill: #6d5dfc;
}
.my-search__icon {
height: 32px;
position: absolute;
font-size: 36px;
padding: 0 16px;
display: flex;
transition: 0.3s ease;
fill: #bec8e4;
}
.my-icon {
position: absolute;
top: 10px;
right: 10px;
display: flex;
justify-content: space-between;
}
.icon__account,
.icon__home,
.icon__settings {
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50%;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
fill: #9baacf;
transition: all 0.5s ease;
}
.icon__account svg,
.icon__home svg,
.icon__settings svg {
width: 30px;
height: 30px;
}
.icon__account:active,
.icon__home:active,
.icon__settings:active {
box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
fill: #6d5dfc;
}
.icon__account:hover,
.icon__home:hover,
.icon__settings:hover {
fill: #6d5dfc;
}
.words-box {
grid-area: 1 / 2 / 2 / 6;
color: #6d5dfc;
font-size: 14px !important;
padding-left: 80px;
}
.words-box span {
display: block;
margin: 10px;
}
.my-message {
color: #6d5dfc;
width: 140px !important;
height: 160px !important;
font-size: 14px !important;
margin-left: 10px;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
border-radius: 15px;
white-space: pre;
}
#weather1 { grid-area: 3 / 1 / 3 / 2; }
#weather2 { grid-area: 3 / 2 / 3 / 3; }
#weather3 { grid-area: 3 / 3 / 3 / 4; }
#weather4 { grid-area: 3 / 4 / 3 / 5; }
#weather5 { grid-area: 3 / 5 / 3 / 6; }
#weather6 { grid-area: 3 / 6 / 3 / 7; }
#weather7 { grid-area: 3 / 7 / 3 / 8; }
.my-message p {
margin: 10px;
text-align: center;
}
`)