节点连接系统总结

这是一个基于网页的节点连接系统，主要功能是让用户通过观看广告获取时长，然后连接到不同的节点进行访问。以下是系统的主要组成部分和功能：

1. 系统架构

前端技术：HTML、CSS、JavaScript

数据存储：使用 localStorage 存储用户数据

广告系统：集成了广告SDK用于奖励时长

2. 核心功能

用户管理

游客账号：自动生成随机ID的游客账号

用户数据：包括ID、头像、剩余时长、广告观看次数等

时长管理

获取时长：通过观看广告获得不同时长的奖励

消耗时长：连接节点时按秒消耗时长

倒计时提示：显示剩余时长，少于5分钟时有警告效果

节点连接

节点列表：提供多个可连接的节点

连接状态：显示连接状态和剩余时长

内嵌浏览：通过iframe加载节点内容

广告系统

广告选择：提供不同数量的广告观看选项

奖励机制：观看不同数量广告获得不同时长

每日限制：设置每日最大广告观看次数

3. 界面组成

主要页面

首页：显示连接按钮和节点列表

个人页面：显示用户信息和剩余时长

网页视图：显示连接的节点内容和倒计时

交互元素

底部导航栏：切换不同页面

对话框：显示提示信息

广告选择弹窗：选择观看广告数量

4. 数据结构

用户数据

userData = {

    id: '',                // 用户ID

    avatar: '',            // 头像URL

    timeRemaining: 0,      // 剩余时长（秒）

    adViewCount: 0,        // 今日已观看广告次数

    lastAdViewDate: null   // 上次观看广告的日期

}

节点数据

nodes = [

    { id: 1, name: '节点1', url: 'https://www.baidu.com/' },

    { id: 2, name: '节点2', url: 'https://example.com/node2' },

    // ...更多节点

]

广告奖励配置

adRewards = {

    1: 5 * 60,      // 1个广告 - 5分钟

    2: 30 * 60,     // 2个广告 - 30分钟

    3: 60 * 60,     // 3个广告 - 60分钟

    5: 6 * 60 * 60  // 5个广告 - 6小时

}

5. 最新功能：倒计时提示

位置：固定在页面顶部右侧

样式：半透明黑色背景，白色文字

格式：显示"剩余时长: 时:分:秒"

警告效果：剩余时间少于5分钟时变红并闪烁

实时更新：每秒更新一次倒计时显示

6. 系统流程

用户首次访问，自动生成游客账号

用户通过观看广告获取时长

用户点击连接按钮，选择节点进行连接

系统开始消耗时长并显示倒计时

时长用完或用户主动断开连接

用户可继续观看广告获取更多时长

这个系统设计简洁，功能完整，通过广告激励机制提供节点连接服务，并通过倒计时提示增强了用户体验。