【快捷指令案例】天气节假日提醒

最新推荐文章于 2024-10-31 11:46:23 发布

小溪彼岸

最新推荐文章于 2024-10-31 11:46:23 发布

阅读量345

点赞数

分类专栏：快捷指令文章标签：快捷指令苹果快捷指令

原文链接：https://mp.weixin.qq.com/s?__biz=MzU5Njg3ODUzOA==&mid=2247484603&idx=1&sn=7db82090a3c1915de1077aa229dc8411&chksm=fe5ab11ec92d3808eb20dbaf4173cc542b6f453ab936e51849e6fcc57e359777f846f69e9b44&token=386079687&lang=zh_CN#rd

版权

快捷指令专栏收录该内容

29 篇文章

订阅专栏

前言

本次实现的是每天天气及节假日信息提醒，再也不用同时查看天气和日历📅了，末尾附上快捷指令口令体验。

设计思路

查看今天是否有节日信息，如果没有查看未来半年最近的一个节假日
提示信息处理
今天是节假日，提示“今天是某年某月某日，周几，今天是节日，天气信息”
今天不是节假日，提示“今天是某年某月某日，周几，距离节日还有多少天，天气信息”
卡片美化信息展示

实现

1.节假日信息处理

使用【查找日历日程】查看今天的节日信息

在这里插入图片描述

如果今天有节日信息使用【设定变量】将节日信息存入“节假日”变量

在这里插入图片描述

如果今天不是节日，使用【查找日历日程】查找未来半年的节假日信息，使用【设定变量】将节日信息存入“节假日”变量，并计算当前距离节假日的天数间隔使用【设定变量】将日期时长存入“距离下一个节日”变量

在这里插入图片描述

根据今天是否为节假日处理节日信息展示

在这里插入图片描述

2.处理日期

日期格式“yyyy年MM月dd日”将日期格式化为如“2024年10月21日”
日期格式“EEE”将日期格式化为如“周日”

在这里插入图片描述

3.获取天气信息

使用【获取当前天气】获取当前天气信息，使用【获取位置的详细消息】从天气消息中获取当前城市，使用【获取天气状况的详细信息】分别获取最低温、最高温和降水概率。

在这里插入图片描述

3.美化展示

使用HTML模版美化节假日及天气信息，模版如下。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期与节假日提醒</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }
        .container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 40px;
            text-align: center;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            width: 300px;
        }
        .container:hover {
            transform: rotateX(5deg) rotateY(5deg);
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            transform: translateZ(30px);
        }
        p {
            color: #34495e;
            margin: 10px 0;
            transform: translateZ(20px);
        }
        #holiday-reminder {
            font-weight: bold;
            color: #e74c3c;
            transform: translateZ(40px);
        }
        #emoji-container {
            font-size: 100px;
            height: 100px;
            width: 100px;
            line-height: 100px;
            overflow: hidden;
            transform: translateZ(50px);
            margin: 20px auto;
            text-align: center;
        }
        #emoji-scroll {
            animation: scroll 12s steps(12, end) infinite;
        }
        @keyframes scroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-1200px); }
        }
        #weather {
            margin-top: 20px;
            font-size: 18px;
            color: #3498db;
            transform: translateZ(30px);
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
</style>
</head>
<body>
    <div class="container">
        <h1 id="current-date">格式化后的日期</h1>
        <h1 id="current-day">星期几</h1>
        <p id="holiday-reminder">如果的结果</p>
        <div id="emoji-container">
            <div id="emoji-scroll">
                😀😎🥳🤩😊🤗🌈🌞🌻🍀🎉🎈
            </div>
        </div>
        <p id="weather">天气</p>
    </div>
</body>
</html>

将模板粘贴到【文本】中并填入指定变量信息，使用【从HTML制作多信息文本】展示信息

在这里插入图片描述