AIWROK软件H5脚本执行与进度显示 - B2B网络软件

//🍎交流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>

复制代码