【chrome扩展】简 Tab (SimpTab)‘每日一句名言’样式

背景:最初参考"每日诗词"发现总是那几句,可以更换API接口完成"每日一句名言"

声明:本人不会ajax及ccs样式,非专业人士,借助CHATGPT代码生成完成。请友善交流。

每一句名言API: "https://api.xygeng.cn/openapi/one",

仅供参考:

效果图:

自定义脚本:

javascript 复制代码
var tmpl = '<div class="jinrishici-bg"><div class="jinrishici"><div class="content"></div><div class="desc"><span class="dynasty"></span><span class="author"></span><span class="title"></span></div></div></div>';
$( 'body' ).append( tmpl )

var colaKey = 'e39Xj8x29YZn3k1712034292773hQhK2wGWcr';

$.ajax({
    type: "POST",
    url: "https://api.xygeng.cn/openapi/one",
    dataType: "json",
    success: function(response) {
        if (response.code === 200) {
            var origin = response.data.origin;
            var replacedOrigin = origin.replace(/《/g, "");
            var replacedOrigin = replacedOrigin.replace(/》/g, "");
            $( ".jinrishici .content" ).text( response.data.content );
            $( ".jinrishici .desc .dynasty" ).text('');
            $( ".jinrishici .desc .author" ).text('');
            $( ".jinrishici .desc .title" ).text('《' + replacedOrigin + '》');
            $( ".jinrishici" ).css( 'opacity', 1 );
        } else {
            console.error("一言获取失败:", response.msg);
        }
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error("请求失败:", textStatus, errorThrown);
    }
});

自定义样式:

css 复制代码
.jinrishici-bg {
    position: fixed;
    width: 90%;
    height: 100%;
    left: 0;
    top: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0); /* 添加半透明背景 */
}

.jinrishici {
    color: #fff; /* 改变文字颜色为白色,以便在深色背景上更清晰 */
    opacity: 0;
    transition: all 500ms ease;
}

.jinrishici .content {
    font-size: 2vw; /* 使用视口宽度的百分比来设置字体大小 */
    width: 100%;
    height: 100%;
    padding-right: 5%;
    padding-left: 5%;
}

.jinrishici .desc {
    margin-top: 1em; /* 使用em单位来设置上外边距 */
    font-size: 2vw; /* 使用视口宽度的百分比来设置字体大小 */
    text-align: right;
}

/* 媒体查询:当屏幕宽度小于 600px 时 */
@media (max-width: 600px) {
    .jinrishici {
        opacity: 1;
    }
    .jinrishici .content {
        font-size: 5vw; /* 在小屏幕上进一步减小字体大小 */
    }
    .jinrishici .desc {
        font-size: 3.5vw; /* 在小屏幕上进一步减小字体大小 */
    }
}
相关推荐
水晶浮游几秒前
💥 半夜3点被拉群骂?学会Sentry监控后,现在都是后端背锅了
前端
Olrookie几秒前
若依前后端分离版学习笔记(十九)——导入,导出实现流程及图片,文件组件
前端·vue.js·笔记
浩男孩14 分钟前
🍀终于向常量组件下手了,使用TypeScript 基于 TDesign二次封装常量组件 🚀🚀
前端·vue.js
玲小珑16 分钟前
LangChain.js 完全开发手册(十三)AI Agent 生态系统与工具集成
前端·langchain·ai编程
布列瑟农的星空27 分钟前
什么?sessionStorage可以跨页签?
前端
苏打水com27 分钟前
网易前端业务:内容生态与游戏场景下的「沉浸式体验」与「性能优化」实践
前端·游戏·性能优化
恋猫de小郭30 分钟前
React 和 React Native 不再直接归属 Meta,React 基金会成立
android·前端·ios
掘金安东尼34 分钟前
前端周刊434期(2025年9月29日–10月5日)
前端·javascript·面试
brzhang39 分钟前
当我第一次看到 snapDOM,我想:这玩意儿终于能解决网页「截图」这破事了?
前端·后端·架构
掘金安东尼44 分钟前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github