随机二级域名引导页HTML源码详解：点击即跳转的动态页面

本文链接：https://blog.youkuaiyun.com/huayula/article/details/146780869

随机二级域名引导页HTML源码详解：点击即跳转的动态页面

在互联网应用中，随机生成的二级域名常用于临时链接、测试环境或避免浏览器缓存问题。本文介绍的随机二级域名引导页HTML源码，通过HTML、CSS和JavaScript实现“每次点击生成新域名”的功能，并支持本地运行和自定义修改。

一、源码技术组成

该页面由三部分代码组成：

1. HTML结构

定义页面基础布局，包含标题、按钮和提示信息：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>随机二级域名引导页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到随机二级域名引导页</h1>
        <button id="goButton">立即前往</button>
        <div id="notice">
            <p>每次打开都是新网址，需重新登录哦~</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

美化页面，包括居中布局、按钮样式和提示框设计：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
}

#goButton {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

#notice {
    border: 1px solid #ff69b4;
    padding: 10px;
    margin-top: 20px;
}

3. JavaScript逻辑

核心功能代码，生成随机前缀并跳转：

document.getElementById('goButton').addEventListener('click', function() {
    // 修改跳转域名在第350行代码
    const domainPrefix = generateRandomDomainPrefix();
    const targetUrl = `https://${domainPrefix}.example.com`;
    window.location.href = targetUrl;
});

function generateRandomDomainPrefix() {
    const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < 8; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
}

二、自定义与修改方法

源码免费下载

随机2级域名引导页HTML源码

1. 修改文字内容

使用记事本或文本编辑器（如VS Code）打开index.html文件；
直接编辑<h1>、<p>等标签中的文字内容（例如修改标题或提示语）。

2. 修改跳转域名

打开script.js文件，找到第350行代码（通常为const targetUrl = ...）；
将example.com替换为目标域名（如yourdomain.com），并保存文件。

3. 调整样式参数

在styles.css中修改颜色、字体、间距等样式变量（如background-color、font-family）。

三、本地运行方式

准备文件
- 将HTML、CSS、JS文件保存在同一目录（如random-domain/）；
- 确保文件名与代码中的引用路径一致（如<link rel="stylesheet" href="styles.css">）。
运行页面
- 双击index.html文件，浏览器将自动加载页面；
- 点击“立即前往”按钮，观察生成的随机二级域名（如abcd1234.example.com）。