n7模板 帖子页面 右侧用户栏添加一个tips

n7模板 帖子页面 右侧用户栏添加一个tips

/template/discuz_theme_n7/forum/viewthread.php
438处<div id="comiis_viewthread_sidetop_div"></div>上方合适地位

1.     <div class="custom-tip"><p>💡 <strong>Tips：</strong> <span id="random-text"></span></p></div>
   
2.     <script src="https://www.jiubbs.cn/s/js/tips.js"></script>
   
3.     <style>
   
4.     .custom-tip {
   
5.     margin-top: 10px;
   
6.     padding: 5px;
   
7.     /*background-color: #f8f9fa;
   
8.     border: 1px solid #dee2e6;*/
   
9.     border-radius: 5px;
   
10.     font-size: 12px;
    
11.     color: #6c757d;
    
12. }
    
13.      </style>

复制代码

tips.js这个文件路径好像失效了，没有内容显示。

猫大仙 发表于 2025-4-19 21:08
tips.js这个文件路径好像失效了，没有内容显示。

https://www.jiubbs.cn/s/js/tips.js  

1.     // 从/tips.json 文件加载数据
   
2. fetch('//www.jiubbs.cn/s/js/tips.json')
   
3.         .then(response => response.json()) // 解析为 JSON
   
4.         .then(data => {
   
5.             const randomTexts = data.tips; // 获取提示数组
   
6.             let currentIndex = 0; // 当前提示索引
   
7.             
   
8.             // 函数用于更新显示的提示
   
9.             const updateTip = () => {
   
10.                 const selectedText = randomTexts[currentIndex];
    
11.                 const randomTextElement = document.getElementById('random-text');
    
12. 
    
13.                 // 更新提示文本
    
14.                 randomTextElement.textContent = selectedText;
    
15.                 randomTextElement.style.transform = 'translateY(0)'; // 初始化位置
    
16. 
    
17.                 // 设置下一条提示
    
18.                 currentIndex = (currentIndex + 1) % randomTexts.length;
    
19. 
    
20.                 // 动画效果
    
21.                 setTimeout(() => {
    
22.                     randomTextElement.style.transform = 'translateY(-100%)'; // 向上移动
    
23.                 }, 3000); // 3秒后开始移动
    
24. 
    
25.                 // 循环调用更新提示
    
26.                 setTimeout(updateTip, 4000); // 4秒后更新提示（3秒显示 + 1秒移动）
    
27.             };
    
28. 
    
29.             // 初始化提示
    
30.             updateTip();
    
31.         })
    
32.         .catch(error => {
    
33.             console.error('加载数据失败:', error);
    
34.         });
    

复制代码