微件:CodeLoadingUI - 版本历史

2025年3月2日 (日) 01:34 Banmad3n

2025-03-02T01:34:03Z

←上一版本		2025年3月2日 (日) 09:34的版本
第87行：		第87行：
	</div>		</div>
	<div id="codeDisplay">		<div id="codeDisplay">
	~~{{{code\|~~Loading system...~~}}}~~		Loading system...
	</div>		</div>
	</div>		</div>

2025年3月2日 (日) 01:32 Banmad3n

2025-03-02T01:32:59Z

@@ 第62行： / 第62行： @@
+   }
 </style>
 <!-- JavaScript 逻辑 -->
@@ 第90行： / 第79行： @@
    });
 </script>

2025年3月2日 (日) 01:30 Banmad3n

2025-03-02T01:30:37Z

@@ 第62行： / 第62行： @@
+   }
 </style>
 <!-- JavaScript 逻辑 -->
 <script>

2025年3月2日 (日) 01:29 Banmad3n

2025-03-02T01:29:00Z

@@ 第62行： / 第62行： @@
+   }
 </style>
 <!-- JavaScript 逻辑 -->
 <script>

2025年3月2日 (日) 01:27 Banmad3n

2025-03-02T01:27:20Z

←上一版本		2025年3月2日 (日) 09:27的版本
第62行：		第62行：
	}		}
	</style>		</style>

			<!-- HTML 结构 -->
			<div id="loadingOverlay">
			<div class="loader"></div>
			<div id="progressBar">
			<div></div>
			</div>
			<div id="codeDisplay">
			Loading system...
			</div>
			</div>

	<!-- JavaScript 逻辑 -->		<!-- JavaScript 逻辑 -->
	<script>		<script>
	// ~~模拟加载进度~~		// 确保DOM加载完成后再执行脚本
	var progress = 0;		document.addEventListener('DOMContentLoaded', function () {
	var progressBar = document.getElementById('progressBar').querySelector('div');		var progress = 0;
	var interval = setInterval(function () {		var progressBar = document.getElementById('progressBar').querySelector('div');
	progress += 10;		var interval = setInterval(function () {
	progressBar.style.width = progress + '%';		progress += 10;
	if (progress >= 100) {		progressBar.style.width = progress + '%';
	clearInterval(interval);		if (progress >= 100) {
	document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面		clearInterval(interval);
	}		document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
	}~~, 300~~);		}
			}, 300);
			});
	</script>		</script>

2025年3月2日 (日) 01:17 Banmad3n

2025-03-02T01:17:53Z

←上一版本		2025年3月2日 (日) 09:17的版本
第1行：		第1行：
	<~~title>CodeLoadingUI</title>~~		<!-- CSS 样式 -->
	~~<description>Displays a full~~-~~screen digital code loading animation with customizable code.</description>~~		<style>
	~~<parameters>~~		/* 全屏覆盖层 */
	~~<parameter name="code" required="true">The code to display in the loading animation.</parameter>~~		#loadingOverlay {
	~~<parameter name="speed" default="1">Animation speed (1 = normal, 2 = fast, 0.5 = slow).</parameter>~~		position: fixed;
	~~<parameter name="color" default="#00ff00">Color of the code text (hex or~~ CSS ~~color).</parameter~~>		top: 0;
	<~~parameter name="background" default="#000000">Background color of the loading screen (hex or CSS color).</parameter~~>		left: 0;
	~~</parameters>~~		width: 100%;
	~~<content>~~		height: 100%;
	~~<![CDATA[~~		background: #000;
	~~<style>~~		display: flex;
	/* ~~Full-screen styling~~ */		justify-content: center;
	~~.code-loading-ui~~ {		align-items: center;
	position: fixed;		flex-direction: column;
	top: 0;		z-index: 1000;
	left: 0;		color: #fff;
	width: 100%;		font-family: monospace;
	height: 100%;		}
	background~~-color~~: ~~{{{background}}}~~;
	~~color~~: ~~{{{color}}}~~;		/* 加载动画 */
	~~font~~-~~family~~: ~~monospace~~;		.loader {
	~~font~~-~~size~~: ~~24px~~;		border: 5px solid #f3f3f3;
	~~display:~~ flex;		border-top: 5px solid #3498db;
	~~align~~-~~items~~: ~~center~~;		border-radius: 50%;
	~~justify~~-~~content~~: ~~center~~;		width: 50px;
	~~overflow~~: ~~hidden~~;		height: 50px;
	z-~~index~~: ~~9999~~;		animation: spin 1s linear infinite;
	}		}
	.~~code~~-~~loading~~-~~ui .code {~~
	~~white-space~~: ~~pre~~;		@keyframes spin {
	animation: ~~code-loading calc(~~1s ~~/ {{{speed}}})~~ infinite;		0% { transform: rotate(0deg); }
	}		100% { transform: rotate(360deg); }
	@keyframes ~~code-loading~~ {		}
	0% { ~~opacity~~: ~~0.5~~; }
	50% { ~~opacity~~: 1; }		/* 进度条 */
	100% ~~{ opacity~~: 0.5; }		#progressBar {
	}		width: 200px;
	</style>		height: 10px;
	<~~div class="code~~-~~loading~~-~~ui"~~>		background: #444;
	<div ~~class~~=~~"code"~~>{~~{{code}}}<~~/~~div>~~		margin-top: 20px;
	</~~div>~~		border-radius: 5px;
	~~]]>~~		overflow: hidden;
	</~~content~~>		}

			#progressBar div {
			height: 100%;
			width: 0;
			background: #3498db;
			transition: width 0.5s ease;
			}

			/* 模拟代码样式 */
			#codeDisplay {
			margin-top: 20px;
			background: #222;
			padding: 10px;
			border-radius: 5px;
			width: 80%;
			max-width: 600px;
			overflow: auto;
			white-space: pre-wrap;
			}
			</style>
			<!-- JavaScript 逻辑 -->
			<script>
			// 模拟加载进度
			var progress = 0;
			var progressBar = document.getElementById('progressBar').querySelector('div');
			var interval = setInterval(function () {
			progress += 10;
			progressBar.style.width = progress + '%';
			if (progress >= 100) {
			clearInterval(interval);
			document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面
			}
			}, 300);
			</script>

2025年3月2日 (日) 01:16 Banmad3n

2025-03-02T01:16:13Z

←上一版本		2025年3月2日 (日) 09:16的版本
第1行：		第1行：
	~~<widget>~~
	<title>CodeLoadingUI</title>		<title>CodeLoadingUI</title>
	<description>Displays a full-screen digital code loading animation with customizable code.</description>		<description>Displays a full-screen digital code loading animation with customizable code.</description>
第43行：		第42行：
	]]>		]]>
	</content>		</content>
	~~</widget>~~

2025年3月2日 (日) 01:15 Banmad3n

2025-03-02T01:15:55Z

显示更改

2025年3月2日 (日) 01:12 Banmad3n

2025-03-02T01:12:22Z

←上一版本		2025年3月2日 (日) 09:12的版本
第110行：		第110行：
	loadingOverlay.setAttribute('aria-busy', 'false');		loadingOverlay.setAttribute('aria-busy', 'false');
	} else {		} else {
	~~requestAnimationFrame~~(updateProgress);		setTimeout(updateProgress, 300); // 使用 setTimeout 替代 setInterval
	}		}
	}		}

	~~requestAnimationFrame~~(updateProgress);		// 启动进度条
			setTimeout(updateProgress, 300);

	// 动态填充代码内容		// 动态填充代码内容
第120行：		第121行：
	var code = codeDisplay.getAttribute('data-code');		var code = codeDisplay.getAttribute('data-code');

	if (code) {		if (code && code.trim() !== '') {
	codeDisplay.textContent = code;		codeDisplay.textContent = code;
	} else {		} else {

2025年3月2日 (日) 01:10 Banmad3n

2025-03-02T01:10:21Z

←上一版本		2025年3月2日 (日) 09:10的版本
第90行：		第90行：
	<div></div>		<div></div>
	</div>		</div>
	<div id="codeDisplay" aria-label="Code Display">{{{code}}}</div>		<div id="codeDisplay" aria-label="Code Display" data-code="{{{code}}}"></div>
	</div>		</div>

第96行：		第96行：
	<script>		<script>
	(function() {		(function() {
			// 模拟加载进度
	var progress = 0;		var progress = 0;
	var progressBar = document.getElementById('progressBar').querySelector('div');		var progressBar = document.getElementById('progressBar').querySelector('div');
第114行：		第115行：

	requestAnimationFrame(updateProgress);		requestAnimationFrame(updateProgress);

			// 动态填充代码内容
			var codeDisplay = document.getElementById('codeDisplay');
			var code = codeDisplay.getAttribute('data-code');

			if (code) {
			codeDisplay.textContent = code;
			} else {
			codeDisplay.textContent = 'No code provided';
			}
	})();		})();
	</script>		</script>