日志
为了方便在电脑上像手机一样上下滑动看漫画写了个网页
热度 159 |
为了方便在电脑上像手机一样上下滑动看漫画用本地chatgpt跑了个网页
![]()
![]()
![]()
var intervalId = setInterval(function () { if (MtPopUpList) { LanguageMenu = new MtPopUpList(); var langMenu = document.getElementById(LanguageMenu_popupid); var origLangDiv = document.createElement("div"); origLangDiv.id = "OriginalLanguageDiv"; origLangDiv.innerHTML = "ORIGINAL: "; langMenu.appendChild(origLangDiv); LanguageMenu.Init('LanguageMenu', LanguageMenu_keys, LanguageMenu_values, LanguageMenu_callback, LanguageMenu_popupid); window["LanguageMenu"] = LanguageMenu; clearInterval(intervalId); } }, 1);
主要修改这几个数值就能匹配基本所有命名保存规则一致漫画了。
const maxFolders = 14; // 最大文件夹数量
const numberOfImages = 100; // 最大图片加载数量在这里更改，图片超过100张再改
// 基础路径和文件名格式
const basePath = `${currentPage}/赤海 (`;
const fileExtension = ").png";
其实${basePath}${padNumber(i, 2)}${fileExtension}
的意思就是文件：1文件夹下“赤海(1~100).png”的图片
以下的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
background-color: #f0f0f0;
}
.image-container {
display: flex;
flex-direction: column;
align-items: center;
}
.image-container img {
width: 100%; /* 让所有图片的宽度占据其父容器的100% */
max-width: 800px; /* 设置图片的最大宽度，可以根据需要调整 */
height: auto;
margin-bottom: -4px;
}
#changeFolderButton, #selectPage {
margin-top: 10px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
position: fixed;
bottom: 20px;
}
#selectPage {
left: calc(50% - 100px); /* 位置居中 */
}
#changeFolderButton {
right: calc(50% - 100px); /* 位置居中 */
}
</style>
</head>
<body>
<div class="image-container" id="imageContainer">
<!-- 动态添加的图片将显示在这里 -->
</div>
<div>
<!-- 新增的选择页数的下拉菜单 -->
<select id="selectPage" onchange="changePage()">
<!-- 选项将在脚本加载时动态生成 -->
</select>
<!-- 切换文件夹按钮 -->
<button id="changeFolderButton" onclick="changeFolder()">切换文件夹</button>
</div>
<script>
const maxFolders = 14; // 最大文件夹数量
const numberOfImages = 100; // 最大图片加载数量在这里更改，图片超过100张再改
document.addEventListener("DOMContentLoaded", function () {
const imageContainer = document.getElementById("imageContainer");
let currentFolder = 1; // 当前文件夹编号
let currentPage = 1; // 当前页数
// 初始加载图片和页数选择
loadImages();
loadPageOptions();
window.changeFolder = async function () {
// 增加文件夹编号
const currentFolder = (currentPage % maxFolders) + 1;
// 清空当前的图片
imageContainer.innerHTML = '';
// 加载并添加图片到容器
await loadImages(currentFolder);
// 更新页数选择
loadPageOptions();
// 设置当前选择的页数
document.getElementById("selectPage").value = currentFolder;
// 同时调用changePage函数
changePage();
};
// 切换页数的函数
window.changePage = function () {
currentPage = parseInt(document.getElementById("selectPage").value);
// 清空当前的图片
imageContainer.innerHTML = '';
// 加载并添加图片到容器
loadImages();
};
// 根据当前文件夹加载图片的函数
async function loadImages(folderNumber) {
// 基础路径和文件名模式
const basePath = `${currentPage}/赤海 (`;
const fileExtension = ").png";
// 加载并将图片添加到容器
for (let i = 1; i <= numberOfImages; i++) {
const img = document.createElement("img");
img.src = `${basePath}${padNumber(i, 2)}${fileExtension}`;
img.alt = `Image ${i}`;
// 添加onerror事件处理程序
img.onerror = function() {
// 图片加载失败时，只隐藏当前失败的图片
this.style.display = 'none';
};
imageContainer.appendChild(img);
}
}
// 在数字前添加零以实现对齐的函数
function padNumber(number, length) {
let str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}
// 动态生成页数选择的选项
function loadPageOptions() {
const selectPage = document.getElementById("selectPage");
selectPage.innerHTML = '';
for (let i = 1; i <= maxFolders; i++) {
const option = document.createElement("option");
option.value = i;
option.text = `第 ${i} 页`;
selectPage.appendChild(option);
}
}
});
</script>
</body>
</html>
TRANSLATE with ![]()
x
English ![]()
var LanguageMenu; var LanguageMenu_keys=["ar","bg","ca","zh-CHS","zh-CHT","cs","da","nl","en","et","fi","fr","de","el","ht","he","hi","mww","hu","id","it","ja","tlh","ko","lv","lt","ms","mt","no","fa","pl","pt","ro","ru","sk","sl","es","sv","th","tr","uk","ur","vi","cy"]; var LanguageMenu_values=["Arabic","Bulgarian","Catalan","Chinese Simplified","Chinese Traditional","Czech","Danish","Dutch","English","Estonian","Finnish","French","German","Greek","Haitian Creole","Hebrew","Hindi","Hmong Daw","Hungarian","Indonesian","Italian","Japanese","Klingon","Korean","Latvian","Lithuanian","Malay","Maltese","Norwegian","Persian","Polish","Portuguese","Romanian","Russian","Slovak","Slovenian","Spanish","Swedish","Thai","Turkish","Ukrainian","Urdu","Vietnamese","Welsh"]; var LanguageMenu_callback=function(){ }; var LanguageMenu_popupid='__LanguageMenu_popup'; TRANSLATE with ![]()
EMBED THE SNIPPET BELOW IN YOUR SITE Bing Webmaster Portal
GameMale