网站模板

我的主页ANINEGの小屋模板是使用的来自https://html5up.net的免费模板，以下是网页的介绍：

  • Fully Responsive
  • Built on intelligent HTML5 + CSS3
  • Super Customizable
  • 100% Free under the Creative Commons

有需要的同学们可以去自行下载。

源码修改

在原有模板的基础上，我增添了如下功能：

  1. 它会在页面上显示10秒倒计时，结束后后自动跳转到博客页。
  2. 在倒计时这10秒中可以对博客网页进行预加载。
  3. 当用户单击网页任何位置时，倒计时停止，并将显示倒计时的文本替换为“欢迎访问ANINEG的小屋”

以下是实现过程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
    var preloadUrl = "https://blog.anineg.space/"; // 需要预加载的页面地址
    var iframe = document.createElement("iframe"); // 创建一个iframe元素
    iframe.style.display = "none"; // 将iframe元素隐藏
    iframe.src = preloadUrl; // 设置预加载页面的地址
    document.body.appendChild(iframe); // 将iframe元素添加到body中，开始预加载

    var count = 13; // 设置倒计时时间
    var intervalId = setInterval(function() {
        count--;
        document.getElementById("countdown").innerHTML = count; // 更新倒计时数字
        if (count <= 0) {
            clearInterval(intervalId); // 清除计时器
            document.getElementById("countdown-text").innerHTML = "欢迎访问ANINEG的小屋"; // 替换倒计时提示为“欢迎访问”
            window.location.href = "https://blog.anineg.space/"; // 跳转到下一个页面
        }
    }, 1000);

    document.addEventListener("click", function() {
        clearInterval(intervalId); // 清除计时器
        document.getElementById("countdown-text").innerHTML = "欢迎访问ANINEG的小屋"; // 替换倒计时提示为“欢迎访问”
    });
</script>

<p id="countdown-text"><span id="countdown">13</span> 秒后自动前往博客页···</p>

实际上，该模板的入场动画大概耗费3秒左右，因此需要10秒自动跳转的效果就需要将预设调为13秒。

在预加载部分，在倒计时开始时，使用JavaScript动态创建一个<iframe>元素，并将需要预加载的页面设置为该<iframe>的src属性。这样，浏览器就会在倒计时期间开始预加载该页面，从而提高用户体验。

接着，我们创建了一个计时器，每秒减少计数器变量count的值，并更新页面上的倒计时数字。当count的值减少到0时，清除计时器并跳转到下一个页面。最后，在页面上添加了一个事件监听器，当用户单击页面上的任何位置时，清除计时器，停止倒计时。

最后，我们在页面中添加了一个<p>元素，并将其id属性设置为"countdown-text"，用于显示倒计时提示或替换后的新文本。在计时器停止时，我们使用JavaScript修改了该元素的文本内容，将倒计时提示替换为需要显示的新文本。同时在单击事件监听器中补充添加了一行代码，用于在停止计时器时替换倒计时提示为“欢迎访问”文本。这样，无论是计时器正常结束还是被单击事件停止，都会显示“欢迎访问”文本。