 | |  |  |
AIWROK软件H5脚本执行与进度显示
- //🍎交流QQ群711841924群一,苹果内测群,528816639
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title>AIWROK 任务执行与进度显示</title>
- <style>
- /* 基础样式重置 */
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- -webkit-tap-highlight-color: transparent;
- }
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- background-color: #f5f5f5;
- color: #333;
- line-height: 1.6;
- overflow-x: hidden;
- }
- /* 手机容器 */
- .mobile-container {
- max-width: 414px;
- margin: 0 auto;
- background-color: white;
- min-height: 100vh;
- position: relative;
- overflow: hidden;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
- }
- /* 页面标题 */
- .page-title {
- padding: 20px;
- background-color: #1976d2;
- color: white;
- font-size: 18px;
- font-weight: 600;
- text-align: center;
- }
- /* 主要内容区域 */
- .content {
- padding: 0;
- padding-bottom: 100px;
- min-height: 200px;
- }
- /* 进度条显示区域 */
- .progress-container {
- display: none;
- margin: 10px;
- padding: 15px;
- background-color: #f5f5f5;
- border-radius: 8px;
- border: 1px solid #e0e0e0;
- }
- .progress-container.active {
- display: block;
- }
- /* 整体进度条 */
- .total-progress {
- margin-bottom: 15px;
- }
- .progress-header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 5px;
- font-size: 14px;
- color: #666;
- }
- .progress-bar-container {
- height: 16px;
- background-color: #e0e0e0;
- border-radius: 8px;
- overflow: hidden;
- }
- .progress-bar {
- height: 100%;
- width: 0%;
- transition: width 0.3s ease;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
- .total-progress-bar {
- background-color: #4caf50;
- background-image: linear-gradient(to right, #4caf50, #66bb6a);
- }
- /* 当前任务进度条 */
- .task-progress {
- margin-bottom: 20px;
- }
- .task-progress-bar {
- background-color: #2196f3;
- background-image: linear-gradient(to right, #2196f3, #42a5f5);
- }
- /* 任务列表 */
- .task-list {
- margin: 0;
- background-color: white;
- border-radius: 0;
- overflow: hidden;
- min-height: 100px;
- }
- .task-item {
- padding: 16px 20px;
- border-bottom: 1px solid #e0e0e0;
- cursor: pointer;
- transition: background-color 0.2s ease;
- position: relative;
- display: flex;
- flex-direction: column;
- min-height: 60px;
- }
- .task-item:last-child {
- border-bottom: none;
- }
- .task-item:hover {
- background-color: #f5f5f5;
- }
- .task-item.active {
- background-color: #e3f2fd;
- }
- .task-name {
- font-size: 18px;
- font-weight: 600;
- margin-bottom: 4px;
- color: #333;
- }
- .task-status {
- font-size: 14px;
- color: #999;
- }
- /* 结果显示区域 */
- .result-container {
- margin: 10px;
- padding: 15px;
- background-color: #f5f5f5;
- border-radius: 8px;
- border: 1px solid #e0e0e0;
- max-height: 150px;
- overflow-y: auto;
- }
- .result-title {
- font-weight: bold;
- margin-bottom: 10px;
- color: #333;
- font-size: 16px;
- }
- .result-content {
- font-size: 14px;
- color: #666;
- white-space: pre-wrap;
- line-height: 1.5;
- }
- /* 控制按钮 */
- .control-buttons {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- max-width: 414px;
- margin: 0 auto;
- padding: 15px 10px;
- background-color: white;
- border-top: 1px solid #e0e0e0;
- box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
- }
- .btn {
- width: 100%;
- height: 50px;
- border: none;
- border-radius: 8px;
- font-size: 16px;
- font-weight: 600;
- cursor: pointer;
- margin-bottom: 10px;
- transition: all 0.3s ease;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
- .btn:last-child {
- margin-bottom: 0;
- }
- .btn-primary {
- background-color: #2196f3;
- color: white;
- background-image: linear-gradient(to bottom, #2196f3, #1976d2);
- }
- .btn-primary:hover {
- background-color: #1976d2;
- background-image: linear-gradient(to bottom, #1976d2, #1565c0);
- }
- .btn-primary:active {
- background-color: #1565c0;
- background-image: linear-gradient(to bottom, #1565c0, #0d47a1);
- transform: scale(0.98);
- }
- .btn-primary:disabled {
- background-color: #90caf9;
- background-image: none;
- cursor: not-allowed;
- transform: none;
- }
- .btn-secondary {
- background-color: #f5f5f5;
- color: #333;
- }
- .btn-secondary:hover {
- background-color: #e0e0e0;
- }
- .btn-secondary:active {
- background-color: #bdbdbd;
- transform: scale(0.98);
- }
- /* 加载动画 */
- .loading {
- position: relative;
- pointer-events: none;
- }
- @keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
- }
- .loading::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 24px;
- height: 24px;
- margin-top: -12px;
- margin-left: -12px;
- border: 2px solid rgba(255, 255, 255, 0.3);
- border-top-color: white;
- border-radius: 50%;
- animation: spin 0.8s linear infinite;
- }
- </style>
- </head>
- <body>
- <div class="mobile-container">
- <!-- 页面标题 -->
- <div class="page-title">AIWROK 任务执行系统</div>
- <!-- 进度条显示区域 -->
- <div id="progressContainer" class="progress-container">
- <!-- 整体进度条 -->
- <div class="total-progress">
- <div class="progress-header">
- <span id="totalProgressLabel">总进度: 0%</span>
- <span id="currentTaskLabel">准备开始</span>
- </div>
- <div class="progress-bar-container">
- <div id="totalProgressBar" class="progress-bar total-progress-bar"></div>
- </div>
- </div>
- <!-- 当前任务进度条 -->
- <div class="task-progress">
- <div class="progress-header">
- <span id="taskProgressLabel">当前任务: 0%</span>
- <span id="taskStatusLabel">准备开始</span>
- </div>
- <div class="progress-bar-container">
- <div id="taskProgressBar" class="progress-bar task-progress-bar"></div>
- </div>
- </div>
- </div>
- <!-- 任务列表 -->
- <div class="task-list">
- <div class="task-item" data-task="抖音极速" onclick="selectTask(this)">
- <div class="task-name">抖音极速</div>
- <div class="task-status" id="status_抖音极速">未执行</div>
- </div>
- <div class="task-item" data-task="快手极速" onclick="selectTask(this)">
- <div class="task-name">快手极速</div>
- <div class="task-status" id="status_快手极速">未执行</div>
- </div>
- <div class="task-item" data-task="汽水音乐" onclick="selectTask(this)">
- <div class="task-name">汽水音乐</div>
- <div class="task-status" id="status_汽水音乐">未执行</div>
- </div>
- <div class="task-item" data-task="番茄畅听音乐" onclick="selectTask(this)">
- <div class="task-name">番茄畅听音乐</div>
- <div class="task-status" id="status_番茄畅听音乐">未执行</div>
- </div>
- <div class="task-item" data-task="西瓜视频" onclick="selectTask(this)">
- <div class="task-name">西瓜视频</div>
- <div class="task-status" id="status_西瓜视频">未执行</div>
- </div>
- <div class="task-item" data-task="番茄畅听" onclick="selectTask(this)">
- <div class="task-name">番茄畅听</div>
- <div class="task-status" id="status_番茄畅听">未执行</div>
- </div>
- <div class="task-item" data-task="番茄小说" onclick="selectTask(this)">
- <div class="task-name">番茄小说</div>
- <div class="task-status" id="status_番茄小说">未执行</div>
- </div>
- <div class="task-item" data-task="悟空浏览器" onclick="selectTask(this)">
- <div class="task-name">悟空浏览器</div>
- <div class="task-status" id="status_悟空浏览器">未执行</div>
- </div>
- <div class="task-item" data-task="红果短剧" onclick="selectTask(this)">
- <div class="task-name">红果短剧</div>
- <div class="task-status" id="status_红果短剧">未执行</div>
- </div>
- <div class="task-item" data-task="头条广告单版" onclick="selectTask(this)">
- <div class="task-name">今日头条</div>
- <div class="task-status" id="status_头条广告单版">未执行</div>
- </div>
- <div class="task-item" data-task="头条极速广告单版" onclick="selectTask(this)">
- <div class="task-name">今日头条极速版</div>
- <div class="task-status" id="status_头条极速广告单版">未执行</div>
- </div>
- <div class="task-item" data-task="喜番短剧" onclick="selectTask(this)">
- <div class="task-name">喜番短剧</div>
- <div class="task-status" id="status_喜番短剧">未执行</div>
- </div>
- <div class="task-item" data-task="快手正式" onclick="selectTask(this)">
- <div class="task-name">快手正式版</div>
- <div class="task-status" id="status_快手正式">未执行</div>
- </div>
- <div class="task-item" data-task="苹果删除APP" onclick="selectTask(this)">
- <div class="task-name">卸载APP</div>
- <div class="task-status" id="status_苹果删除APP">未执行</div>
- </div>
- <div class="task-item" data-task="测试函数2" onclick="selectTask(this)">
- <div class="task-name">测试2</div>
- <div class="task-status" id="status_测试函数2">未执行</div>
- </div>
- </div>
- <!-- 结果显示区域 -->
- <div class="result-container">
- <div class="result-title">执行结果</div>
- <div class="result-content" id="resultContent">准备就绪,等待执行任务...</div>
- </div>
- <!-- 控制按钮 -->
- <div class="control-buttons">
- <button class="btn btn-primary" id="runButton" onclick="runSelectedTask()">开始执行</button>
- <button class="btn btn-secondary" onclick="resetTasks()">重置任务</button>
- </div>
- </div>
- <script>
- // 全局变量
- var selectedTask = null;
- var isTaskRunning = false;
- var currentProgress = 0;
- // 显示结果的函数
- function showResult(message) {
- var resultContent = document.getElementById('resultContent');
- if (resultContent) {
- var timestamp = new Date().toLocaleTimeString();
- resultContent.innerHTML += '[' + timestamp + '] ' + message + '\n';
- resultContent.scrollTop = resultContent.scrollHeight;
- }
- }
- // 进度条控制函数
- function showProgress() {
- var progressContainer = document.getElementById('progressContainer');
- if (progressContainer) {
- progressContainer.classList.add('active');
- }
- }
- function hideProgress() {
- var progressContainer = document.getElementById('progressContainer');
- if (progressContainer) {
- progressContainer.classList.remove('active');
- }
- }
- function updateTotalProgress(percentage, currentTask) {
- var totalProgressLabel = document.getElementById('totalProgressLabel');
- var totalProgressBar = document.getElementById('totalProgressBar');
- var currentTaskLabel = document.getElementById('currentTaskLabel');
- if (totalProgressLabel) {
- totalProgressLabel.innerText = '总进度: ' + Math.round(percentage) + '%';
- }
- if (totalProgressBar) {
- totalProgressBar.style.width = percentage + '%';
- }
- if (currentTaskLabel && currentTask) {
- currentTaskLabel.innerText = currentTask;
- }
- }
- function updateTaskProgress(percentage, status) {
- var taskProgressLabel = document.getElementById('taskProgressLabel');
- var taskProgressBar = document.getElementById('taskProgressBar');
- var taskStatusLabel = document.getElementById('taskStatusLabel');
- if (taskProgressLabel) {
- taskProgressLabel.innerText = '当前任务: ' + Math.round(percentage) + '%';
- }
- if (taskProgressBar) {
- taskProgressBar.style.width = percentage + '%';
- }
- if (taskStatusLabel && status) {
- taskStatusLabel.innerText = status;
- }
- }
- // 更新任务状态
- function updateTaskStatus(taskName, status) {
- var statusElement = document.getElementById('status_' + taskName);
- if (statusElement) {
- statusElement.innerText = status;
- }
- }
- // 任务选择函数
- function selectTask(taskElement) {
- if (isTaskRunning) {
- showResult('当前有任务正在执行,请等待完成后再选择');
- return;
- }
- // 移除之前的选中状态
- var allTasks = document.querySelectorAll('.task-item');
- allTasks.forEach(function(task) {
- task.classList.remove('active');
- });
- // 设置新的选中状态
- taskElement.classList.add('active');
- selectedTask = taskElement.getAttribute('data-task');
- showResult('已选择任务: ' + selectedTask);
- }
- // 模拟任务执行进度
- function simulateTaskProgress(taskName, duration, callback) {
- var progress = 0;
- var interval = 100;
- var steps = duration / interval;
- var stepProgress = 100 / steps;
- var progressInterval = setInterval(function() {
- progress += stepProgress;
- if (progress >= 100) {
- progress = 100;
- clearInterval(progressInterval);
- callback();
- }
- updateTaskProgress(progress, '执行中...');
- }, interval);
- }
- // 执行选中的任务
- function runSelectedTask() {
- if (!selectedTask) {
- showResult('请先选择要执行的任务');
- return;
- }
- if (isTaskRunning) {
- showResult('当前有任务正在执行,请等待完成');
- return;
- }
- isTaskRunning = true;
- var runButton = document.getElementById('runButton');
- runButton.disabled = true;
- runButton.classList.add('loading');
- runButton.innerText = '执行中';
- showProgress();
- updateTotalProgress(0, selectedTask);
- updateTaskProgress(0, '准备执行');
- updateTaskStatus(selectedTask, '执行中');
- showResult('开始执行任务: ' + selectedTask);
- // 模拟任务执行过程
- simulateTaskProgress(selectedTask, 3000, function() {
- // 任务执行完成
- updateTaskProgress(100, '执行完成');
- updateTotalProgress(100, selectedTask);
- updateTaskStatus(selectedTask, '已完成');
- try {
- // 尝试调用主脚本中的任务函数
- if (typeof window[selectedTask] === 'function') {
- window[selectedTask]();
- } else {
- // 如果没有对应的函数,直接执行APP代码
- window.at.runJs('function() { ' + selectedTask + '(); }');
- }
- } catch (e) {
- showResult('执行任务失败: ' + e.message);
- }
- showResult('任务执行完成: ' + selectedTask);
- // 恢复按钮状态
- setTimeout(function() {
- runButton.disabled = false;
- runButton.classList.remove('loading');
- runButton.innerText = '开始执行';
- isTaskRunning = false;
- hideProgress();
- }, 1500);
- });
- }
- // 重置任务
- function resetTasks() {
- if (isTaskRunning) {
- showResult('当前有任务正在执行,无法重置');
- return;
- }
- // 移除所有选中状态
- var allTasks = document.querySelectorAll('.task-item');
- allTasks.forEach(function(task) {
- task.classList.remove('active');
- var taskName = task.getAttribute('data-task');
- updateTaskStatus(taskName, '未执行');
- });
- selectedTask = null;
- hideProgress();
- document.getElementById('resultContent').innerText = '准备就绪,等待执行任务...';
- showResult('任务已重置');
- }
- // 初始化AIWROK交互对象
- window.at = window.at || {};
- // 模拟AIWROK原生方法
- if (typeof window.at.runJs === 'undefined') {
- window.at.runJs = function(jsCode) {
- showResult('执行APP代码: ' + jsCode.substring(0, 50) + (jsCode.length > 50 ? '...' : ''));
- return '代码执行成功';
- };
- }
- if (typeof window.at.callFunction === 'undefined') {
- window.at.callFunction = function(functionName, params, callback) {
- showResult('调用原生函数: ' + functionName + ',参数: ' + JSON.stringify(params));
- if (typeof callback === 'function') {
- callback(JSON.stringify({result: '成功', functionName: functionName}));
- }
- };
- }
- // 页面加载完成初始化
- window.onload = function() {
- try {
- showResult('AIWROK任务执行系统加载完成');
- showResult('请选择一个任务,然后点击开始执行按钮');
- // 尝试加载主脚本.js
- try {
- var scriptTag = document.createElement('script');
- scriptTag.src = '主脚本.js';
- scriptTag.onload = function() {
- showResult('主脚本加载完成,可以执行任务');
- };
- scriptTag.onerror = function() {
- showResult('主脚本加载失败,将使用模拟执行');
- };
- document.body.appendChild(scriptTag);
- } catch (e) {
- showResult('加载主脚本时出错: ' + e.message);
- }
- } catch (e) {
- console.error('页面初始化错误:', e);
- if (typeof showResult === 'function') {
- showResult('页面初始化时出错: ' + e.message);
- }
- }
- };
- </script>
- </body>
- </html>
复制代码
| |  | |  |
|