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

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

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

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

仅供参考:

效果图:

自定义脚本:

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);}
});

自定义样式:

.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; /* 在小屏幕上进一步减小字体大小 */}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jdk api之WriteAbortedException基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

WPF中通过自定义Panel实现控件拖动

背景 看到趋时软件的公众号文章&#xff08;WPF自定义Panel&#xff1a;让拖拽变得更简单&#xff09;&#xff0c;发现可以不通过Drag的方法来实现ListBox控件的拖动&#xff0c;而是通过对控件的坐标相加减去实现控件的位移等判断&#xff0c;因此根据文章里面的代码,边理解边…

Day80:服务攻防-中间件安全HW2023-WPS分析WeblogicJettyJenkinsCVE

目录 中间件-Jetty-CVE&信息泄漏 CVE-2021-34429(信息泄露) CVE-2021-28169(信息泄露) 中间件-Jenkins-CVE&RCE执行 cve_2017_1000353 CVE-2018-1000861 cve_2019_1003000 中间件-Weblogic-CVE&反序列化&RCE 应用金山WPS-HW2023-RCE&复现&上线…

代码随想录第30天|51. N皇后

51. N皇后 51. N 皇后 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 这就是传说中的N皇后&#xff1f; 回溯算法安排&#xff01;| LeetCode&#xff1a;51.N皇后_哔哩哔哩_bilibili 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行…

element-ui empty 组件源码分享

今日简单分享 empty 组件的源码实现&#xff0c;主要从以下三个方面&#xff1a; 1、empty 组件页面结构 2、empty 组件属性 3、empty 组件 slot 一、empty 组件页面结构 二、empty 组件属性 2.1 image 属性&#xff0c;图片地址&#xff0c;类型 string&#xff0c;无默认…

代码随想录阅读笔记-二叉树【二叉搜索树中的搜索】

题目 给定二叉搜索树&#xff08;BST&#xff09;的根节点和一个值。 你需要在BST中找到节点值等于给定值的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 NULL。 例如&#xff0c; 在上述示例中&#xff0c;如果要找的值是 5&#xff0c;但因为没有节点…

【放假第1天】采购季倒计时 2G 50/年,4G 618/3年 云服务器选购攻略 阿里云 腾讯云 京东云对比 搭建网站、数据分析

更新日期&#xff1a;4月4日&#xff08;阿里云价格回调&#xff0c;京东云采购季持续进行&#xff09; 本文纯原创&#xff0c;侵权必究 【云服务器推荐】价格对比&#xff01;阿里云 京东云 腾讯云 选购指南视频截图 《最新对比表》已更新在文章头部—腾讯云文档&#xff…

Matlab学习书籍分享

一、什么是Matlab​​&#xff1f; Matlab是一种用于数值计算、科学计算、工程设计和数据分析的高级编程语言。它提供了丰富的数学函数库&#xff0c;支持矩阵运算、信号处理、图像处理、机器学习等多种应用领域。Matlab还具有强大的图形界面&#xff0c;可以方便地进行数据可…

uni-app 实现仿微信界面【我的+首页聊天列表+长按菜单功能+添加菜单功能】+ 附源码

目录 【微信首页聊天列表】界面 【我的】界面 源代码&#xff1a; 文后附完整代码&#xff0c;支持一键导入 HBuilderX 示例体验 【微信首页聊天列表】界面 仿造【微信首页聊天列表 长按菜单功能 右上角添加按钮弹窗功能】&#xff0c;使用 uni-app 开发&#xff0c; 一…

深入浅出 -- 系统架构之微服务架构选型参考图

技术选型架构图 是一个用于展示项目中所采用的各种技术和组件之间关系的图表。 它通常包括以下几个部分&#xff1a; 1. 项目名称和描述&#xff1a;简要介绍项目的背景和目标。 2. 技术栈&#xff1a;列出项目中使用的主要技术和工具&#xff0c;如编程语言、框架、数据库…

JVM专题——类文件加载

本文部分内容节选自Java Guide和《深入理解Java虚拟机》, Java Guide地址: https://javaguide.cn/java/jvm/class-loading-process.html &#x1f680; 基础&#xff08;上&#xff09; → &#x1f680; 基础&#xff08;中&#xff09; → &#x1f680;基础&#xff08;下&a…

(免费分享)基于springboot,vue房屋租赁管理系统

功能说明&#xff1a; * 普通用户角色&#xff1a; 1. 寻找房源功能--提供了两种寻找房源的功能&#xff0c;一种是普通用户在平台上搜索、筛选主动寻找房源的功能&#xff0c;另一种是用户填写征集房源的条件&#xff0c;系统会持续将最新符合条件的房源推送给用户。 2. …

Vuex的模块化管理

1&#xff1a;定义一个单独的模块。由于mutation的第二个参数只能提交一个对象&#xff0c;所以这里的ThisLog是个json串。 2&#xff1a;在Vuex中的index.js中引入该模块 3&#xff1a;在别的组件中通过...mapState调用模块保存的State的值。 4&#xff1a;用...mapMutations修…

【番外篇2】统计学-方差分析

方差分析 方差分析&#xff08;ANOVA&#xff09;是一种用于比较三个或三个以上组之间平均值是否有显著差异的统计方法。通俗地说&#xff0c;就是用来确定不同组之间的平均值是否有显著差异。 让我们通过一个简单的例子来解释方差分析&#xff1a; 假设你是一位教育工作者&a…

界面控件Kendo UI for jQuery 2024 Q1亮点 - 新的ToggleButton组件

Telerik & Kendo UI 2024 Q1 版本于2024年初发布&#xff0c;在此版本中将AI集成到了UI组件中&#xff0c;在整个产品组合中引入AI Prompt组件以及10多个新的UI控件、支持Angular 17、多个数据可视化功能增强等。 P.S&#xff1a;Kendo UI for jQuery提供了在短时间内构建…

哲♂学家带你用顺序表实现通讯录

实现通讯录能使我们进一步加深对顺序表的理解&#xff0c;接下来就由本哲♂学家带你手把手实现通信录。 其中需要用到顺序表的知识可以点击下面链接了解&#xff1a;http://t.csdnimg.cn/9SjGd话不多说&#xff0c;我们♂开始吧。 一、通讯录头文件声明 由于我们前面已经写过…

四核8g服务器价格多少钱?

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…

【数据结构】——二叉树的递归实现,看完不再害怕递归

创作不易&#xff0c;感谢三连加支持&#xff1f;&#xff01; 一 递归理解 递归无非就是相信它&#xff0c;只有你相信它&#xff0c;你才能写好递归&#xff01;为什么&#xff1f;请往下看 在进入二叉树的实现之前&#xff0c;我们得先理解一遍递归&#xff0c;可能很多…

Android JNI 调用第三方SO

最近一个项目使用了Go 编译了一个so库&#xff0c;但是这个so里面还需要使用第三方so库pdfium, 首先在Android工程把2个so库都放好 在jni中只能使用dlopen方式&#xff0c;其他的使用函数指针的方式来调用&#xff0c;和windows dll类似&#xff0c;不然虽然编译过了但是会崩溃…

基于H2O AutoML与集成学习策略的房屋售价预测模型研究与实现

项目简述&#xff1a; 本项目采用H2O AutoML工具&#xff0c;针对加州房屋销售价格预测问题进行了深入研究与建模。项目以Kaggle提供的加州房屋 交易数据集为基础&#xff0c;通过数据清洗、特征工程、模型训练与评估等步骤&#xff0c;构建了一种基于集成学习策略的房价预测模…