H5单按钮执行脚本示例

信息发布软件 · 发表于 2025-12-23 09:45:43


	H5单按钮执行脚本示例 //🍎交流QQ群711841924群一，苹果内测群，528816639 // 创建一个最简单的 WebView 示例 Import("主脚本.js") async function createSimpleWebView() { return new Promise((resolve, reject) => { try { // 创建 WebView 实例 var web = new WebView(); // 显示界面 web.show(); // 加载简化的 HTML 内容 web.loadHtml(` <!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 脚本运行器QQ896757558</title> <style> /* 基础样式重置 / { margin: 0; padding: 0; box-sizing: border-box; } /* 全局样式 / body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #333; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 20px; position: relative; overflow: hidden; } / 粒子背景 / #particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; opacity: 0.6; } / 容器样式 / .container { max-width: 480px; margin: 0 auto; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); overflow: hidden; animation: fadeInUp 0.8s ease-out, scaleIn 0.6s ease-out; position: relative; z-index: 1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } / 头部样式 / .header { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 40px 20px; text-align: center; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: rotate 20s linear infinite; } .header h1 { font-size: 28px; font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); letter-spacing: 1px; } .header p { font-size: 16px; opacity: 0.95; font-weight: 500; position: relative; z-index: 1; } / 内容区域 / .content { padding: 40px 25px; } / 状态显示区域 / .status-section { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 16px; padding: 25px; margin-bottom: 32px; border-left: 6px solid #4facfe; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; position: relative; overflow: hidden; } .status-section::after { content: ''; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(79,172,254,0.1) 0%, transparent 70%); border-radius: 50%; } .status-section:hover { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); } .status-title { font-size: 14px; font-weight: 700; color: #666; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 1; } .status-text { font-size: 18px; color: #333; font-weight: 600; position: relative; z-index: 1; transition: all 0.3s ease; animation: pulse 2s ease-in-out infinite; } / 按钮样式 / .run-button { width: 100%; height: 72px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; border-radius: 20px; font-size: 22px; font-weight: 800; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; box-shadow: 0 12px 40px rgba(79, 172, 254, 0.4); text-transform: uppercase; letter-spacing: 1px; perspective: 1000px; } .run-button:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 60px rgba(79, 172, 254, 0.6); } .run-button:active { transform: translateY(-2px) scale(0.98); box-shadow: 0 8px 30px rgba(79, 172, 254, 0.5); } .run-button:disabled { background: linear-gradient(135deg, #a8d8ff 0%, #93e5ff 100%); cursor: not-allowed; transform: none; box-shadow: 0 4px 15px rgba(79, 172, 254, 0.2); } / 加载动画 / .run-button.loading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; } .run-button.loading span { visibility: hidden; } / 底部信息 / .footer { padding: 25px; text-align: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-top: 2px solid rgba(79, 172, 254, 0.2); position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #4facfe, transparent); animation: shimmer 2s ease-in-out infinite; } .footer p { font-size: 14px; color: #6c757d; font-weight: 500; position: relative; z-index: 1; } / Toast 提示 / .toast { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-100px); background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(30, 30, 30, 0.9) 100%); color: white; padding: 16px 32px; border-radius: 50px; font-size: 16px; font-weight: 600; opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 9999; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } / 动画效果 / @keyframes fadeInUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { transform: scale(0.9); } to { transform: scale(1); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } / 波纹效果 / .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple-animation 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; } @keyframes ripple-animation { to { transform: scale(6); opacity: 0; } } / 数字跳动动画 / @keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } / 背景光效 / .container::after { content: ''; position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(79,172,254,0.1) 0%, transparent 70%); border-radius: 50%; top: -100px; right: -100px; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } </style> </head> <body> <!-- 粒子背景 --> <div id="particles-js"></div> <div class="container"> <!-- 头部 --> <div class="header"> <h1>AIWROK 脚本运行器</h1> <p>一键启动您的自动化脚本</p> </div> <!-- 内容区域 --> <div class="content"> <!-- 状态显示 --> <div class="status-section"> <div class="status-title">当前状态</div> <div class="status-text" id="statusText">就绪，等待执行</div> </div> <!-- 运行按钮 --> <button class="run-button" onclick="handleRun()"> <span>点击运行脚本</span> </button> </div> <!-- 底部信息 --> <div class="footer"> <p>AIWROK🍎交流QQ群711841924群一，苹果内测群，528816639\| 自动化脚本运行器</p> </div> </div> <!-- Toast 提示 --> <div class="toast" id="toast"></div> <script> // 粒子背景效果 (function() { var particles = []; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var particleCount = 100; var colors = ['#4facfe', '#00f2fe', '#667eea', '#764ba2']; canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.position = 'absolute'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.zIndex = '0'; canvas.style.pointerEvents = 'none'; document.getElementById('particles-js').appendChild(canvas); // 创建粒子 function createParticles() { for (var i = 0; i < particleCount; i++) { particles.push({ x: Math.random() canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 3 + 1, color: colors[Math.floor(Math.random() * colors.length)], speedX: (Math.random() - 0.5) * 2, speedY: (Math.random() - 0.5) * 2 }); } } // 绘制粒子 function drawParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) { var p = particles[i]; ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fillStyle = p.color; ctx.fill(); // 绘制连接线 for (var j = i + 1; j < particles.length; j++) { var p2 = particles[j]; var dx = p.x - p2.x; var dy = p.y - p2.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < 150) { ctx.beginPath(); ctx.strokeStyle = 'rgba(255, 255, 255, ' + (0.2 - distance / 750) + ')'; ctx.lineWidth = 1; ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); } } } } // 更新粒子位置 function updateParticles() { for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.x += p.speedX; p.y += p.speedY; if (p.x < 0 \|\| p.x > canvas.width) { p.speedX = -1; } if (p.y < 0 \|\| p.y > canvas.height) { p.speedY = -1; } } } // 动画循环 function animate() { updateParticles(); drawParticles(); requestAnimationFrame(animate); } // 窗口大小调整 window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // 初始化 createParticles(); animate(); })(); // Toast 提示函数 function showToast(message, duration = 2000) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, duration); } // 更新状态显示 function updateStatus(status) { const statusText = document.getElementById('statusText'); statusText.style.animation = 'none'; statusText.offsetHeight; // 触发重排 statusText.style.animation = 'fadeInUp 0.5s ease-out'; statusText.textContent = status; } // 运行按钮点击处理 function handleRun() { const button = document.querySelector('.run-button'); // 如果按钮已在运行中，不执行操作 if (button.classList.contains('loading')) { return; } // 添加加载状态 button.classList.add('loading'); button.disabled = true; button.innerHTML = '<span>运行中...</span>'; // 更新状态和提示 updateStatus('脚本正在执行中...'); showToast('脚本开始执行'); console.log('开始执行脚本'); // 模拟执行过程 setTimeout(() => { // 执行脚本函数 if (typeof runJS !== 'undefined') { runJS(function() { console.log('脚本执行完成'); }); } // 恢复按钮状态 button.classList.remove('loading'); button.disabled = false; button.innerHTML = '<span>点击运行脚本</span>'; // 更新状态和提示 updateStatus('执行完成，就绪'); showToast('脚本执行完成'); }, 2000); } // 添加按钮波纹效果 document.addEventListener('DOMContentLoaded', function() { const button = document.querySelector('.run-button'); button.addEventListener('click', function(e) { // 创建波纹效果 const ripple = document.createElement('span'); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.classList.add('ripple'); ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; button.appendChild(ripple); // 移除波纹元素 setTimeout(() => ripple.remove(), 800); }); }); </script> </body> </html> `); // 加载完成后解析Promise resolve(web); } catch (error) { printl('创建WebView时发生错误: ' + error.message); reject(error); } }); } // 执行简化的WebView示例 async function demonstrateSimpleWebView() { printl('开始演示简化的 WebView 示例'); // 创建并显示简化的 WebView var webView = await createSimpleWebView(); printl('WebView 已创建并显示'); } // 直接调用简化的演示函数 demonstrateSimpleWebView(); 复制代码

		自动登录	找回密码
密码			立即注册

[宣传软件网站动态] H5单按钮执行脚本示例

相关帖子