【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,一经查实,立即删除!

相关文章

Linux的学习之路:4、权限

一、Linux权限的概念 权限我们都熟悉&#xff0c;最常见的就是在看电视时需要vip这个就是权限&#xff0c;然后在Linux就是有两个权限&#xff0c;就是管理员也就是超级用户和普通的用户 命令&#xff1a;su [用户名] 功能&#xff1a;切换用户。 例如&#xff0c;要从root用户…

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;无默认…

notepad++主题One Dark

<?xml version"1.0" encoding"Windows-1252" ?> <!--// # Style Name: One Dark for Notepad (Npp-1-Dark) # Author: https://60ss.github.io # Description: A close replica of the Atom "One Dark" syntax theme in Notepad. # L…

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

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

禁用@RabbitAutoConfiguration后 @RabbitListener注解失效

最近遇到一个问题,我的@RabbitListener注解失效了,原因是底层组件原因 @SpringBootApplication(exclude = org.springframework.boot.autoconfigure.amqp.RabbitAutoConfiguration.class)在排除掉自动配置之后,在代码里声明queue和exchange其实是不会自动被创建的,需要自己…

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

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

Matlab学习书籍分享

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

突破编程_C++_查找算法(红黑树查找)

1 算法题 &#xff1a;使用红黑树的数据结构在无序数组中查找指定元素 1.1 题目含义 这个题目要求实现一个红黑树&#xff08;Red-Black Tree&#xff09;&#xff0c;这是一种自平衡的二叉查找树&#xff0c;它通过颜色和一系列的调整规则来确保树的大致平衡&#xff0c;从而…

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

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

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

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

[xboard]real6410-5.2 移植kernel网络驱动

文章目录 硬件电路 核心板,使用DM9000A [图片] 软件配置 问题1 / # / # ifconfig ifconfig: /proc/net/dev: No such file or directory ifconfig: socket: Function not implemented 参考https://blog.csdn.net/u011011827/article/details/115479707 问题2 / # ifconfig i…

Spring Boot程序中@JsonIgnoreProperties与@JsonIgnore的基本使用

问题由来&#xff1a; springboot项目中定义了很多类&#xff0c;我们在rest返回中直接返回或者在返回对象中使用这些类&#xff0c;spring已经使用jackson自动帮我们完成这些的to json。但是有时候自动转的json内容太多&#xff0c;或者格式不符合我们的期望&#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. …

《Effective C++》《构造/析构/赋值运算——11、在operator=中处理“自我赋值”》

文章目录 1、Terms11:Handle assignment to self in operator类中自我赋值问题及如何解决自我赋值问题解决&#xff1a;异常处理问题解决使用“copy and swap”技术来处理自我赋值 2、面试相关2.1 什么是自我赋值&#xff1f;为什么它是个问题&#xff1f;2.2 在重载赋值操作符…

Vuex的模块化管理

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