Skip to content

Instantly share code, notes, and snippets.

@SummonHIM

SummonHIM/YouthStudy-FinishPage.html

Last active March 13, 2023 09:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SummonHIM/ea2dfe06c97c3d2f0147f791a7b95e6d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SummonHIM/ea2dfe06c97c3d2f0147f791a7b95e6d to your computer and use it in GitHub Desktop.
Download ZIP
JS实现的青年大学习完成页 - 想法来源：https://finishpage.dgstu.tk/
Raw
YouthStudy-FinishPage.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title">“青年大学习”</title>
<style>
/* 大学习图片 */
.youthstudy-bg {
position: absolute;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/* 文字水印 */
.mark {
font-size: 300%;
color: white;
margin-top: auto;
text-align: center;
text-shadow: #000 2px 0 0, #000 0 2px 0, #000 -2px 0 0, #000 0 -2px 0;
overflow: hidden;
}
</style>
</head>
<body style="margin: 0">
<div class="youthstudy-bg" id="youthstudy-bg">
<div class="mark" id="mark"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
const host = location.protocol + "//" + location.host + location.pathname;
const useage = '<h2 style="margin: auto 10%;">使用方法：</h2><p style="margin: auto 10%;">' + host + "?id=&lt;imgID&gt;&title=&lt;pageTitle&gt;&mark=&lt;mark&gt;&marksize=&lt;markSize&gt;&markpos=&lt;markPosition&gt;<br><br>imgID = 当期大学习 ID。若值为 latest 则自动获取最新的大学习 ID。<br>pageTitle = 网页标题。若值为 latest 则自动获取最新的大学习标题，若不存在则为“青年大学习”（可选）。<br>mark = 文字水印（可选）。<br>markSize = 文字水印大小，按照 CSS font-size 属性配置（可选）。<br>markPosition = 文字水印位置，按照 CSS margin-top 属性配置（可选）。<br><br>&lt;xxx&gt;中间的内容需要手动填入</p>";
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var imgID = urlParams.get("id");
var pageTitle = urlParams.get("title");
var mark = urlParams.get("mark");
var markSize = urlParams.get("marksize");
var markPosition = urlParams.get("markpos");
// 处理图片id, 若值为 latest 则通过 jquery 获取最新id。
if (imgID == "latest") {
$.ajaxSetup({ headers: { "X-Litemall-IdentiFication": "young" } });
$.getJSON("https://youthstudy.12355.net/saomah5/api/young/chapter/new", function (data) {
document.getElementById("youthstudy-bg").style.backgroundImage = "url(https://h5.cyol.com/special/daxuexi/" + data.data.entity.url.split("/")[5] + "/images/end.jpg)";
});
} else if (imgID) {
document.getElementById("youthstudy-bg").style.backgroundImage = "url(https://h5.cyol.com/special/daxuexi/" + imgID + "/images/end.jpg)";
} else {
document.getElementById("youthstudy-bg").innerHTML = '<h1 style="text-align: center;">错误：键 "ID" 不得为空</h1>' + useage;
}
// 处理标题，若值不存在则返回“青年大学习”
if (!pageTitle) {
document.getElementById("title").innerHTML = "“青年大学习”";
} else if (pageTitle == "latest") {
$.ajaxSetup({ headers: { "X-Litemall-IdentiFication": "young" } });
$.getJSON("https://youthstudy.12355.net/saomah5/api/young/chapter/new", function (data) {
document.getElementById("title").innerHTML = data.data.entity.name;
});
} else {
document.getElementById("title").innerHTML = pageTitle;
}
// 处理水印
if (mark) {
document.getElementById("mark").innerHTML = mark;
}
// 处理水印字体
if (markSize) {
document.getElementById("mark").style.fontSize = markSize;
}
if (markPosition) {
document.getElementById("mark").style.marginTop = markPosition;
}
</script>
</body>
</html>
Raw
YouthStudy-FinishPage.min.html
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title id="title">“青年大学习”</title><style>.youthstudy-bg{position:absolute;background-size:100% 100%;width:100%;height:100%}.mark{font-size:300%;color:#fff;margin-top:auto;text-align:center;text-shadow:#000 2px 0 0,#000 0 2px 0,#000 -2px 0 0,#000 0 -2px 0;overflow:hidden}</style></head><body style="margin:0"><div class="youthstudy-bg" id="youthstudy-bg"><div class="mark" id="mark"></div></div><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><script>const host=location.protocol+"//"+location.host+location.pathname,useage='<h2 style="margin: auto 10%;">使用方法：</h2><p style="margin: auto 10%;">'+host+"?id=&lt;imgID&gt;&title=&lt;pageTitle&gt;&mark=&lt;mark&gt;&marksize=&lt;markSize&gt;&markpos=&lt;markPosition&gt;<br><br>imgID = 当期大学习 ID。若值为 latest 则自动获取最新的大学习 ID。<br>pageTitle = 网页标题。若值为 latest 则自动获取最新的大学习标题，若不存在则为“青年大学习”（可选）。<br>mark = 文字水印（可选）。<br>markSize = 文字水印大小，按照 CSS font-size 属性配置（可选）。<br>markPosition = 文字水印位置，按照 CSS margin-top 属性配置（可选）。<br><br>&lt;xxx&gt;中间的内容需要手动填入</p>",queryString=window.location.search,urlParams=new URLSearchParams(queryString);var imgID=urlParams.get("id"),pageTitle=urlParams.get("title"),mark=urlParams.get("mark"),markSize=urlParams.get("marksize"),markPosition=urlParams.get("markpos");"latest"==imgID?($.ajaxSetup({headers:{"X-Litemall-IdentiFication":"young"}}),$.getJSON("https://youthstudy.12355.net/saomah5/api/young/chapter/new",function(t){document.getElementById("youthstudy-bg").style.backgroundImage="url(https://h5.cyol.com/special/daxuexi/"+t.data.entity.url.split("/")[5]+"/images/end.jpg)"})):imgID?document.getElementById("youthstudy-bg").style.backgroundImage="url(https://h5.cyol.com/special/daxuexi/"+imgID+"/images/end.jpg)":document.getElementById("youthstudy-bg").innerHTML='<h1 style="text-align: center;">错误：键 "ID" 不得为空</h1>'+useage,pageTitle?"latest"==pageTitle?($.ajaxSetup({headers:{"X-Litemall-IdentiFication":"young"}}),$.getJSON("https://youthstudy.12355.net/saomah5/api/young/chapter/new",function(t){document.getElementById("title").innerHTML=t.data.entity.name})):document.getElementById("title").innerHTML=pageTitle:document.getElementById("title").innerHTML="“青年大学习”",mark&&(document.getElementById("mark").innerHTML=mark),markSize&&(document.getElementById("mark").style.fontSize=markSize),markPosition&&(document.getElementById("mark").style.marginTop=markPosition);</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment