用户:Xp00000000/Sandbox：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

可视化wikitext

2025年7月1日 (二) 21:08的版本

状态A

@@ 第1行： / 第1行： @@
 <html>
-<style>
+<script>
-.normal-style {
+function cycleText(element) {
-     -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
+  const states = ["状态A", "状态B", "状态C"]; // 定义所有状态
+  const currentText = element.textContent.trim();
+  // 获取当前状态的索引
+  let currentIndex = states.indexOf(currentText);
+  if(currentIndex === -1) currentIndex = 0;
+  // 计算下一个状态索引（循环）
+  const nextIndex = (currentIndex + 1) % states.length;
+  // 更新文本
+  element.textContent = states[nextIndex];
+  // 可选：存储当前状态（需要唯一ID）
+  if(element.id) {
+     localStorage.setItem('textState_' + element.id, nextIndex);
+  }
 }
-</style>
-<script>
+// 初始化恢复状态
-function toggleColor(element) {
+document.addEventListener('DOMContentLoaded', function() {
-    element.classList.toggle("clicked-style");
+  const element = document.getElementById('cycleDemo');
-    // 更新文本内容
+  if(element && element.id) {
-    element.textContent = element.classList.contains("clicked-style")
+    const savedIndex = localStorage.getItem('textState_' + element.id);
-        ? "HD 10"
+    if(savedIndex !== null) {
-        : "IN 14";
+      const states = ["状态A", "状态B", "状态C"];
-    // 存储状态
+      element.textContent = states[parseInt(savedIndex)];
-    localStorage.setItem('boxState', element.classList.contains("clicked-style"));
-}
-// 页面加载时恢复状态和文本
-window.onload = function() {
-    var box = document.getElementById('myInteractiveBox');
-    if(box) {
-        var isClicked = localStorage.getItem('boxState') === 'true';
-        box.classList.toggle("clicked-style", isClicked);
-        box.textContent = isClicked
-            ? "HD 10"
-            : "IN 14";
      }
-};
+  }
+});
 </script>
-<div id="myInteractiveBox" class="normal-style" onclick="toggleColor(this)">IN 14</div>
+<div id="cycleDemo" onclick="cycleText(this)"
+     style="cursor:pointer; padding:10px; background:#f0f0f0; display:inline-block;">
+  状态A
+</div>
 </html>