【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.rhkb.cn/news/301490.html

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

相关文章

libVLC 提取视频帧

在前面的文章中&#xff0c;我们使用libvlc_media_player_set_hwnd设置了视频的显示的窗口。 libvlc_media_player_set_hwnd(vlc_mediaPlayer, (void *)ui.widgetShow->winId()); 如果我们想要提取每一帧数据&#xff0c;将数据保存到本地&#xff0c;该如何操作呢&#x…

OPC UA遇见chatGPT

最近opc 基金会将召开一个会议&#xff0c;主题是”OPC UA meets IT“。由此可见&#xff0c;工业自动化行业也开始研究和评估chatGPT带来的影响了。 本文谈谈本人对OPC UA 与chatGPT结合的初步实验和思考。 构建OPC UA 信息模型 chatGPT 的确非常强大了&#xff0c;使用自然…

用户登录时md5加密源码解析

首先&#xff0c;在登录的时候&#xff0c;将页面提交的密码password加密处理&#xff0c;即password DigestUtils.md5DigestAsHex(password.getBytes()); 接着按ctrl鼠标左键&#xff0c;进入md5DigestAsHex函数中进行查看&#xff1a; 可以发现&#xff0c;md5DigestAsHex函…

Mysql底层原理六:InnoDB 数据页结构

1.行格式 1.1 Compact行格式 1.1.1 示意图 1.1.2 准备一下 1&#xff09;建表 mysql> CREATE TABLE record_format_demo (-> c1 VARCHAR(10),-> c2 VARCHAR(10) NOT NULL,-> c3 CHAR(10),-> c4 VARCHAR(10)-> ) CHARSETascii ROW_FORMATCOM…

积木-蓝桥每日真题

0积木 - 蓝桥云课 (lanqiao.cn) 题目描述 小明用积木搭了一个城堡。 为了方便&#xff0c;小明在搭的时候用的是一样大小的正方体积木&#xff0c;搭在了一个n行m列的方格图上&#xff0c;每个积木正好占据方格图的一个小方格。 当然&#xff0c;小明的城堡并不是平面的&#x…

Discord注册教程:Discord刚注册就被封怎么办?附申诉教程!

Discord如今在海外社交媒体平台中迅速崛起&#xff0c;许多社交媒体营销人员也纷纷利用其社群特性进行推广&#xff0c;Discord注册也就成为社媒营销人员必经之路。然而&#xff0c;很多人注册Discord账号时常常会想&#xff1a;“在国内使用Discord会封号吗&#xff1f;”事实…

个推助力小米汽车APP实现智能用户触达,打造智能出行新体验

4月3日&#xff0c;小米SU7首批交付仪式在北京亦庄的小米汽车工厂总装车间举行&#xff0c;全国28城交付中心也同步开启首批交付。随着小米SU7系列汽车的正式发售和交付&#xff0c;小米汽车APP迎来了用户体量的爆发式增长。 小米汽车APP是小米汽车官方推出的手机应用&#xff…

数据库面试题

文章目录 事务未提交和提交事务的4大特征事务的隔离级别并发事务的问题MVVCundo log 和 redo log记录的隐藏字段readview&#xff08;读视图&#xff09; 事务未提交和提交 事务未提交时数据存在于数据库系统的缓存中&#xff0c;而在事务提交后&#xff0c;数据才会被写入到磁…

多叉树题目:子树中标签相同的结点数

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;子树中标签相同的结点数 出处&#xff1a;1519. 子树中标签相同的结点数 难度 5 级 题目描述 要求 给你一个树&#xff08;即一个连通的无向无环图…

【Canvas技法】图解绘制圆弧的重要函数 arc(x,y,r,startAngle,endAngle,clockWise)

【一图释疑】 【绘制上图用代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>Html5/Canvas中绘制圆弧的重要函数 arc(x,y,r,startA…

虹科Pico汽车示波器 | 免拆诊断案例 | 2019款别克GL8豪华商务车前照灯水平调节故障

一、故障现象 一辆2019款别克GL8豪华商务车&#xff0c;搭载LTG发动机&#xff0c;累计行驶里程约为10.7万km。车主反映&#xff0c;车辆行驶过程中组合仪表提示前照灯水平调节故障。 二、故障诊断 接车后试车&#xff0c;起动发动机&#xff0c;组合仪表上提示“前照灯水平…

CSS常见样式

字体相关的样式 <style>div{/* 斜体 */font-style: italic;/* 加粗 100-900*/font-weight: 900;/* 字体大小 */font-size: 20px;/* 声明字体格式 */font-family: "微软雅黑";}</style> div内部文字垂直居中 只需要将行高设为其height的大小即可。 div{…

git入门教程

Git 1. Git历史 同生活中的许多伟大事件一样&#xff0c;Git 诞生于一个极富纷争大举创新的年代。Linux 内核开源项目有着为数众广的参与者。绝大多数的 Linux 内核维护工作都花在了提交补丁和保存归档的繁琐事务上&#xff08;1991&#xff0d;2002年间&#xff09;。到 2002…

推荐一款很强大的SCADA工业组态软件

可以广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 I官网网站:www.hcy-soft.com |体验地址:http://www.byzt.net:60/sm/ 一、产品简介 BY组态是完全自主研发的集实时数据展示、动态交互等一体的全功能可视化平台。帮助物联网、工业互联网、电力能…

css 实现排行榜向上滚动

使用动画实现无线向上滚动 复制一层dom&#xff0c;使用动画向上滚动&#xff0c;鼠标hover的时候暂停动画 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthd…

wordpress外贸独立站模板

wordpress外贸独立站模板 WordPress Direct Trade 外贸网站模板&#xff0c;适合做跨境电商的外贸公司官方网站使用。 https://www.waimaoyes.com/wangzhan/22.html

分表?分库?分库分表?实践详谈 ShardingSphere-JDBC

如果有不是很了解ShardingSphere的可以先看一下这个文章&#xff1a; 《ShardingSphere JDBC?Sharding JDBC&#xff1f;》基本小白脱坑问题 阿丹&#xff1a; 在很多开发场景下面&#xff0c;很多的技术难题都是出自于&#xff0c;大数据量级或者并发的场景下面的。这里就出…

SSL证书的作用是什么?

SSL证书让网站和用户之间安全传输信息&#xff0c;就像给网络对话加了一把密码锁。它主要做四件事&#xff1a; 1. 证明身份&#xff1a; - 像警察局一样&#xff0c;有个叫“证书颁发机构”的家伙负责检查网站是不是真的。网站要向它证明自己是谁&#xff08;比如&#xff0c;…

基于机器学习的信用卡办卡意愿模型预测项目

基于机器学习的信用卡办卡意愿模型预测项目 在金融领域&#xff0c;了解客户的信用卡办卡意愿对于银行和金融机构至关重要。借助机器学习技术&#xff0c;我们可以根据客户的历史数据和行为模式预测其是否有办理信用卡的倾向。本项目通过Python中的机器学习库&#xff0c;构建…

使用nodejs搭建脚手架工具并发布到npm中

使用nodejs搭建脚手架工具并发布到npm中 一、安装环境依赖及脚手架搭建过程二、搭建Monorepo 风格的脚手架工程三、脚手架的必备模块命令参数模块获取命令参数设置子命令用户交互模块文件拷贝模块脚手架中的路径处理目录守卫文件拷贝模块动态文件生成模块mustache简介自动安装依…