|
|
AIWROKÈí¼þ·ÖÏíÒ»¸öÌØÐ§Æ»¹ûH5Ò³Ãæ
- //🍎½»Á÷QQȺ711841924Ⱥһ£¬Æ»¹ûÄÚ²âȺ£¬528816639
- // ´´½¨Ò»¸ö»ÆÉ«Ö÷Ìâ·ç¸ñµÄ WebView ʾÀý
- function createYellowThemedWebViewExample() {
- // ´´½¨ 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">
- <title>×ÔÊÊÓ¦TabView</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-color: #f0f0f5;
- color: #333;
- }
-
- .container {
- max-width: 600px;
- margin: 0 auto;
- background-color: #fff;
- min-height: 100vh;
- position: relative;
- overflow: hidden;
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
- border-radius: 10px;
- transform: scale(0.95);
- animation: entrance 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
- }
-
- @keyframes entrance {
- from {
- transform: scale(0.8) translateY(50px);
- opacity: 0;
- }
- to {
- transform: scale(0.95) translateY(0);
- opacity: 1;
- }
- }
-
- /* TabÑùʽ */
- .tab-header {
- display: flex;
- background: linear-gradient(90deg, #ff9800, #ff5722);
- position: sticky;
- top: 0;
- z-index: 100;
- padding-top: 20px;
- }
-
- .tab-item {
- flex: 1;
- text-align: center;
- padding: 12px 0;
- color: #fff;
- font-size: 16px;
- cursor: pointer;
- position: relative;
- transition: all 0.3s ease;
- }
-
- .tab-item:hover {
- background-color: rgba(255, 255, 255, 0.1);
- }
-
- .tab-item.active {
- font-weight: bold;
- background-color: rgba(255, 255, 255, 0.2);
- }
-
- .tab-item.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 25%;
- width: 50%;
- height: 3px;
- background-color: #fff;
- border-radius: 3px;
- animation: tabIndicator 0.3s ease-out;
- }
-
- @keyframes tabIndicator {
- from {
- width: 0;
- left: 50%;
- }
- to {
- width: 50%;
- left: 25%;
- }
- }
-
- /* ÄÚÈÝÇøÓòÑùʽ */
- .tab-content {
- display: none;
- padding: 16px;
- animation: fadeIn 0.5s ease-out;
- }
-
- .tab-content.active {
- display: block;
- }
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* ±êÌâÑùʽ */
- .title-header {
- text-align: center;
- margin-bottom: 16px;
- }
-
- .title-label {
- font-size: 22px;
- color: #ff9800;
- font-weight: bold;
- position: relative;
- display: inline-block;
- }
-
- .title-label::after {
- content: '';
- position: absolute;
- bottom: -5px;
- left: 0;
- width: 100%;
- height: 3px;
- background: linear-gradient(90deg, #ff9800, #ffca28);
- border-radius: 3px;
- transform: scaleX(0);
- transform-origin: right;
- transition: transform 0.3s ease;
- }
-
- .title-label:hover::after {
- transform: scaleX(1);
- transform-origin: left;
- }
-
- /* ·Ö¸ôÏß */
- .divider {
- height: 1px;
- background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
- margin: 16px 0;
- }
-
- /* °´Å¥ÈÝÆ÷ */
- .button-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 20px;
- margin-bottom: 30px;
- width: 100%;
- }
-
- .button {
- padding: 20px 48px;
- border: none;
- border-radius: 12px;
- color: white;
- font-size: 24px;
- cursor: pointer;
- width: 100%;
- max-width: 300px;
- height: 80px;
- font-weight: bold;
- position: relative;
- overflow: hidden;
- transition: all 0.3s ease;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
- }
-
- .button::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: 0.5s;
- }
-
- .button:hover::before {
- left: 100%;
- }
-
- .button:active {
- transform: scale(0.95);
- }
-
- .button.start {
- background: linear-gradient(135deg, #ff9800, #ffc107);
- }
-
- .button.back {
- background: linear-gradient(135deg, #ff5722, #ff9800);
- }
-
- /* ÄÚÈݱêÌâ */
- .content-title {
- font-size: 18px;
- color: #ff5722;
- margin-bottom: 12px;
- font-weight: bold;
- animation: slideInLeft 0.5s ease-out;
- }
-
- @keyframes slideInLeft {
- from {
- transform: translateX(-20px);
- opacity: 0;
- }
- to {
- transform: translateX(0);
- opacity: 1;
- }
- }
-
- /* ÈÎÎñ·ÖÀà */
- .category-label {
- font-size: 18px;
- color: #ff5722;
- margin-top: 16px;
- margin-bottom: 8px;
- font-weight: bold;
- position: relative;
- padding-left: 15px;
- }
-
- .category-label::before {
- content: '';
- position: absolute;
- left: 0;
- top: 2px;
- width: 8px;
- height: 8px;
- background-color: #ff5722;
- border-radius: 50%;
- animation: pulse 2s infinite;
- }
-
- @keyframes pulse {
- 0% {
- transform: scale(1);
- box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7);
- }
- 70% {
- transform: scale(1.2);
- box-shadow: 0 0 0 10px rgba(255, 87, 34, 0);
- }
- 100% {
- transform: scale(1);
- box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
- }
- }
-
- /* ÈÎÎñÏî */
- .task-container {
- background-color: #fff;
- padding: 12px 0;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #f0f0f0;
- transition: all 0.3s ease;
- transform: translateX(0);
- }
-
- .task-container:hover {
- background-color: #f9f9f9;
- transform: translateX(5px);
- }
-
- .task-checkbox {
- display: flex;
- align-items: center;
- width: 200px;
- }
-
- .task-checkbox input[type="checkbox"] {
- width: 20px;
- height: 20px;
- margin-right: 10px;
- cursor: pointer;
- accent-color: #ff9800;
- }
-
- .task-checkbox label {
- font-size: 16px;
- cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .task-checkbox input[type="checkbox"]:checked + label {
- color: #ff9800;
- font-weight: bold;
- }
-
- /* ÉèÖÃÏî */
- .settings-container {
- background-color: #fff;
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
- }
-
- /* ÔËÐÐÌØÐ§ */
- .running-effect {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.7);
- z-index: 1000;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.3s ease;
- }
-
- .running-effect.active {
- opacity: 1;
- pointer-events: all;
- }
-
- .effect-content {
- background: linear-gradient(135deg, #ff9800, #ffc107);
- padding: 30px;
- border-radius: 20px;
- text-align: center;
- color: white;
- max-width: 80%;
- transform: scale(0.8);
- animation: effectEntrance 0.5s ease-out forwards;
- }
-
- @keyframes effectEntrance {
- to {
- transform: scale(1);
- }
- }
-
- .effect-spinner {
- width: 60px;
- height: 60px;
- border: 5px solid rgba(255, 255, 255, 0.3);
- border-radius: 50%;
- border-top-color: white;
- animation: spin 1s linear infinite;
- margin: 0 auto 20px;
- }
-
- @keyframes spin {
- to {
- transform: rotate(360deg);
- }
- }
-
- .effect-text {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 20px;
- }
-
- .effect-subtext {
- font-size: 16px;
- opacity: 0.9;
- }
-
- /* Æ»¹û·ç¸ñ²¨ÎÆÐ§¹û */
- .ripple {
- position: absolute;
- border-radius: 50%;
- background-color: rgba(255, 255, 255, 0.7);
- transform: scale(0);
- animation: ripple 0.6s linear;
- pointer-events: none;
- }
-
- @keyframes ripple {
- to {
- transform: scale(2.5);
- opacity: 0;
- }
- }
- </style>
- </head>
- <body>
- <div class="container">
- <!-- TabÍ·²¿ -->
- <div class="tab-header">
- <div class="tab-item active" data-tab="0">Èí¼þ</div>
- <div class="tab-item" data-tab="1">ͨÓÃ</div>
- <div class="tab-item" data-tab="2">ÈÕ³£</div>
- <div class="tab-item" data-tab="3">¸¨Öú</div>
- <div class="tab-item" data-tab="4">ÉèÖÃ</div>
- </div>
-
- <!-- Èí¼þTabÄÚÈÝ -->
- <div class="tab-content active" id="tab-0">
- <div class="title-header">
- <div class="title-label">Èí¼þ¹¦ÄÜ</div>
- </div>
-
- <div class="divider"></div>
-
- <div class="button-container">
- <button class="button start" onclick="runScriptEffect()">¿ªÊ¼</button>
- <button class="button back" onclick="handleBack()">·µ»Ø</button>
- </div>
-
- <div class="content-title">Èí¼þÒ³ÃæÄÚÈÝ</div>
-
- <div class="category-label">ϲ·¬ÈÎÎñ</div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-0-0">
- <label for="task-0-0">ϲ·¬</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-0-1">
- <label for="task-0-1">¿ìÊÖ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-0-2">
- <label for="task-0-2">Õýʽ</label>
- </div>
- </div>
-
- <div class="divider"></div>
-
- <div class="category-label">¶¶¼«ÈÎÎñ</div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-1-0">
- <label for="task-1-0">¿ì¼«ËÙ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-1-1">
- <label for="task-1-1">¶¶Òô¼«ËÙ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-1-2">
- <label for="task-1-2">Î÷¹ÏÆûË®</label>
- </div>
- </div>
-
- <div class="divider"></div>
-
- <div class="category-label">ºì¹ûÈÎÎñ</div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-2-0">
- <label for="task-2-0">ºì¹û</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-2-1">
- <label for="task-2-1">Îò¿Õ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-2-2">
- <label for="task-2-2">·¬Çѳ©ÌýÒôÀÖ</label>
- </div>
- </div>
- </div>
-
- <!-- ͨÓÃTabÄÚÈÝ -->
- <div class="tab-content" id="tab-1">
- <div class="title-header">
- <div class="title-label">ͨÓù¦ÄÜ</div>
- </div>
-
- <div class="divider"></div>
-
- <div class="button-container">
- <button class="button start" onclick="runScriptEffect()">¿ªÊ¼</button>
- <button class="button back" onclick="handleBack()">·µ»Ø</button>
- </div>
-
- <div class="content-title">ͨÓÃÒ³ÃæÄÚÈÝ</div>
-
- <div class="category-label">ͨÓÃÈÎÎñ</div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-3-0">
- <label for="task-3-0">·¬ÇÑС˵</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-3-1">
- <label for="task-3-1">·¬Çѳ©Ìý</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-3-2">
- <label for="task-3-2">¶¶Òô¼«ËÙ</label>
- </div>
- </div>
- </div>
-
- <!-- ÈÕ³£TabÄÚÈÝ -->
- <div class="tab-content" id="tab-2">
- <div class="title-header">
- <div class="title-label">ÈÕ³£¹¦ÄÜ</div>
- </div>
-
- <div class="divider"></div>
-
- <div class="button-container">
- <button class="button start" onclick="runScriptEffect()">¿ªÊ¼</button>
- <button class="button back" onclick="handleBack()">·µ»Ø</button>
- </div>
-
- <div class="content-title">ÈÕ³£Ò³ÃæÄÚÈÝ</div>
-
- <div class="category-label">ÈÕ³£ÈÎÎñ</div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-4-0">
- <label for="task-4-0">Î÷¹ÏÆûË®ÐÂÊÖģʽ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-4-1">
- <label for="task-4-1">ºì¹û</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-4-2">
- <label for="task-4-2">Îò¿Õ</label>
- </div>
- </div>
- </div>
-
- <!-- ¸¨ÖúTabÄÚÈÝ -->
- <div class="tab-content" id="tab-3">
- <div class="title-header">
- <div class="title-label">¸¨Öú¹¦ÄÜ</div>
- </div>
-
- <div class="divider"></div>
-
- <div class="button-container">
- <button class="button start" onclick="runScriptEffect()">¿ªÊ¼</button>
- <button class="button back" onclick="handleBack()">·µ»Ø</button>
- </div>
-
- <div class="content-title">¸¨ÖúÒ³ÃæÄÚÈÝ</div>
-
- <div class="category-label">¸¨Öú¹¦ÄÜ</div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-5-0">
- <label for="task-5-0">·¬Çѳ©ÌýÒôÀÖ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-5-1">
- <label for="task-5-1">·¬ÇÑС˵</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="task-5-2">
- <label for="task-5-2">·¬Çѳ©ÌýÐÂÊÖģʽ</label>
- </div>
- </div>
- </div>
-
- <!-- ÉèÖÃTabÄÚÈÝ -->
- <div class="tab-content" id="tab-4">
- <div class="title-header">
- <div class="title-label">ÉèÖù¦ÄÜ</div>
- </div>
-
- <div class="divider"></div>
-
- <div class="button-container">
- <button class="button start" onclick="runScriptEffect()">¿ªÊ¼</button>
- <button class="button back" onclick="handleBack()">·µ»Ø</button>
- </div>
-
- <div class="content-title">ÉèÖÃÑ¡Ïî</div>
-
- <div class="settings-container">
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-0">
- <label for="settings-0">ϲ·¬</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-1">
- <label for="settings-1">¿ìÊÖ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-2">
- <label for="settings-2">Õýʽ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-3">
- <label for="settings-3">¿ì¼«ËÙÐÂÊÖģʽ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-4">
- <label for="settings-4">ϲ·¬</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-5">
- <label for="settings-5">¿ìÊÖ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-6">
- <label for="settings-6">Õýʽ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-7">
- <label for="settings-7">¿ì¼«ËÙÖÜÆÚ</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-8">
- <label for="settings-8">¶¶ÒôϵÖÜÆÚ</label>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- ÔËÐÐÌØÐ§ÕÚÕÖ²ã -->
- <div class="running-effect" id="runningEffect">
- <div class="effect-content">
- <div class="effect-spinner"></div>
- <div class="effect-text">ÕýÔÚÔËÐÐAIWROKÆ»¹û½Å±¾</div>
- <div class="effect-subtext">ÇëÉÔºò...</div>
- </div>
- </div>
-
- <script>
- // Ä£ÄâÔÉú»·¾³µÄ½»»¥·½·¨
- // ÔÚʵ¼Ê»·¾³ÖУ¬ÕâЩ·½·¨ÓÉÔÉúÓ¦ÓÃÌṩ
- if (typeof setConfig === 'undefined') {
- function setConfig(key, value) {
- printl('ÉèÖÃÅäÖÃ:', key, '=', value);
- try {
- // ³¢ÊÔʹÓÃlocalStorage
- localStorage.setItem(key, value);
- printl('localStorageÉèÖóɹ¦:', key, '=', value);
- // ÓÅ»¯ÌáʾÄÚÈÝ
- if (key && key.startsWith('last_')) {
- showToast('²Ù×÷ÒѼǼ');
- } else {
- showToast('ÅäÖÃÒÑÉèÖÃ');
- }
- } catch (e) {
- printl('localStorage²»¿ÉÓã¬Ê¹ÓÃÄÚ´æ´æ´¢Ìæ´ú:', e.message);
- // ʹÓÃÄÚ´æ¶ÔÏó´æ´¢×÷Ϊ½µ¼¶·½°¸
- if (!window._memoryStorage) {
- window._memoryStorage = {};
- }
- window._memoryStorage[key] = value;
- // Ö»ÏÔʾ²Ù×÷Ãû³Æ£¬±ÜÃâÏÔʾÍêÕûʱ¼ä´Á
- if (key && key.startsWith('last_')) {
- showToast('²Ù×÷ÒѼǼ');
- } else {
- showToast('ÅäÖÃÒѼǼ');
- }
- }
- }
- }
-
- if (typeof getConfig === 'undefined') {
- function getConfig(key, callback) {
- var value = 'δÉèÖÃ';
- try {
- // ÓÅÏȳ¢ÊÔlocalStorage
- value = localStorage.getItem(key) || 'δÉèÖÃ';
- printl('´ÓlocalStorage»ñÈ¡ÅäÖÃ:', { key: key, value: value });
- } catch (e) {
- // ½µ¼¶µ½ÄÚ´æ´æ´¢
- printl('localStorage²»¿ÉÓ㬳¢ÊÔ´ÓÄÚ´æ»ñÈ¡:', e.message);
- if (window._memoryStorage && window._memoryStorage[key] !== undefined) {
- value = window._memoryStorage[key];
- }
- }
-
- if (typeof callback === 'function') {
- callback(value);
- }
- }
- }
- if (typeof toast === 'undefined') {
- function toast(message) {
- printl('ÏÔʾÌáʾ:', message);
- showToast(message);
- }
- }
-
- if (typeof runJS === 'undefined') {
- function runJS(func) {
- printl('ÔËÐÐJS´úÂë');
- try {
- func();
- showToast('JS´úÂëÖ´Ðгɹ¦');
- } catch (e) {
- showToast('JS´úÂëÖ´ÐÐʧ°Ü: ' + e.message);
- }
- }
- }
-
- if (typeof printl === 'undefined') {
- function printl(message) {
- console.log('ÔÉúÈÕÖ¾:', message);
- }
- }
-
- if (typeof dismiss === 'undefined') {
- function dismiss() {
- printl('¹Ø±Õ½çÃæ');
- showToast('¹Ø±Õ½çÃæ²Ù×÷');
- }
- }
-
- if (typeof runFile === 'undefined') {
- function runFile(filePath) {
- printl('ÔËÐнű¾Îļþ:', filePath);
- showToast('ÔËÐнű¾Îļþ: ' + filePath);
- }
- }
-
- // ±£´æÓû§²Ù×÷µ½ÅäÖÃ
- function saveUserAction(action, value) {
- var timestamp = new Date().toISOString();
- printl('±£´æÓû§²Ù×÷:', action, 'ʱ¼ä´Á:', timestamp);
- setConfig('last_' + action, timestamp);
- if (value) {
- printl('±£´æ²Ù×÷Öµ:', action, '=', value);
- // ÓÅ»¯ÌáʾÄÚÈÝ£¬Ö»ÏÔʾ²Ù×÷ÃûºÍ¼ò¶ÌÐÅÏ¢
- setConfig(action, value);
- }
- }
-
- // ×Ô¶¨ÒåToastÌáʾ - ÓÅ»¯°æ±¾
- function showToast(message) {
- // ´´½¨toastÔªËØ
- var toast = document.getElementById('custom-toast');
-
- // Èç¹û²»´æÔÚÔò´´½¨
- if (!toast) {
- toast = document.createElement('div');
- toast.id = 'custom-toast';
- toast.style.cssText = \`
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgba(0, 0, 0, 0.8);
- color: white;
- padding: 15px 25px;
- border-radius: 25px;
- font-size: 16px;
- z-index: 9999;
- opacity: 0;
- transition: opacity 0.3s, transform 0.3s;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
- backdrop-filter: blur(10px);
- max-width: 80%;
- text-align: center;
- \`;
- document.body.appendChild(toast);
- }
-
- // Çå³ý֮ǰµÄ¶¨Ê±Æ÷
- if (toast.timer) {
- clearTimeout(toast.timer);
- }
-
- // ÉèÖÃÄÚÈݺÍÑùʽ
- toast.textContent = message;
- toast.style.opacity = '1';
- toast.style.transform = 'translate(-50%, -50%) scale(1)';
-
- // 3Ãëºó×Ô¶¯Ïûʧ
- toast.timer = setTimeout(function() {
- toast.style.opacity = '0';
- toast.style.transform = 'translate(-50%, -50%) scale(0.9)';
- }, 3000);
- }
-
- // Ìí¼Ó²¨ÎÆÐ§¹û
- function createRipple(event) {
- const button = event.currentTarget;
- const circle = document.createElement("span");
- const diameter = Math.max(button.clientWidth, button.clientHeight);
- const radius = diameter / 2;
-
- const rect = button.getBoundingClientRect();
- const x = event.clientX - rect.left - radius;
- const y = event.clientY - rect.top - radius;
-
- circle.style.width = circle.style.height = \`\${diameter}px\`;
- circle.style.left = \`\${x}px\`;
- circle.style.top = \`\${y}px\`;
- circle.classList.add("ripple");
-
- const ripple = button.getElementsByClassName("ripple")[0];
- if (ripple) {
- ripple.remove();
- }
-
- button.appendChild(circle);
- }
-
- // °ó¶¨²¨ÎÆÐ§¹ûµ½°´Å¥
- document.querySelectorAll('.button').forEach(button => {
- button.addEventListener('click', createRipple);
- });
-
- // TabÇл»¹¦ÄÜ
- document.querySelectorAll('.tab-item').forEach(tab => {
- tab.addEventListener('click', function() {
- const tabId = this.getAttribute('data-tab');
-
- // ¸ü줻î״̬µÄTab
- document.querySelectorAll('.tab-item').forEach(t => {
- t.classList.remove('active');
- });
- this.classList.add('active');
-
- // ÏÔʾ¶ÔÓ¦µÄÄÚÈÝ
- document.querySelectorAll('.tab-content').forEach(content => {
- content.classList.remove('active');
- });
- document.getElementById(\`tab-\${tabId}\`).classList.add('active');
- });
- });
-
- // ÔËÐнű¾ÌØÐ§
- function runScriptEffect() {
- const effect = document.getElementById('runningEffect');
- effect.classList.add('active');
-
- // Ä£Äâ½Å±¾ÔËÐйý³Ì
- setTimeout(() => {
- effect.classList.remove('active');
- showToast('½Å±¾ÔËÐÐÍê³É£¡');
- }, 3000);
- }
-
- // ·µ»Ø¹¦ÄÜ
- function handleBack() {
- printl('Óû§µã»÷ÁË·µ»Ø°´Å¥');
- saveUserAction('back_button_click');
- toast('ÕýÔÚ·µ»Ø...');
- dismiss();
- }
-
- // Ò³Ãæ¼ÓÔØÍê³Éºó³õʼ»¯
- window.addEventListener('load', function() {
- printl('Ò³Ãæ¼ÓÔØÍê³É£¬³õʼ»¯Íê³É');
- showToast('Ò³Ãæ¼ÓÔØ³É¹¦');
- });
-
- // Ìí¼Ó°´Å¥µã»÷·´À¡
- function addButtonFeedback() {
- var buttons = document.querySelectorAll('.button');
- for (var i = 0; i < buttons.length; i++) {
- (function(button) {
- button.addEventListener('mousedown', function() {
- this.style.transform = 'scale(0.95)';
- });
-
- button.addEventListener('mouseup', function() {
- this.style.transform = 'scale(1)';
- });
-
- button.addEventListener('mouseleave', function() {
- this.style.transform = 'scale(1)';
- });
- })(buttons[i]);
- }
- }
-
- // ³õʼ»¯TabÇл»¹¦ÄÜ
- document.addEventListener('DOMContentLoaded', function() {
- // »ñÈ¡ËùÓÐTabÏîºÍÄÚÈÝ
- var tabItems = document.querySelectorAll('.tab-item');
- var tabContents = document.querySelectorAll('.tab-content');
- var startButtons = document.querySelectorAll('.button.start');
- var backButtons = document.querySelectorAll('.button.back');
-
- // µ÷Óð´Å¥µã»÷·´À¡¹¦ÄÜ
- addButtonFeedback();
- // ³¢ÊÔ»Ö¸´ÉÏ´ÎÑ¡ÔñµÄTab
- getConfig('last_tab', function(lastTabIndex) {
- if (lastTabIndex !== 'δÉèÖÃ' && !isNaN(lastTabIndex)) {
- var tabIndex = parseInt(lastTabIndex);
- if (tabIndex >= 0 && tabIndex < tabItems.length) {
- // ÒÆ³ýËùÓÐactiveÀà
- for (var i = 0; i < tabItems.length; i++) {
- tabItems[i].classList.remove('active');
- }
- for (var j = 0; j < tabContents.length; j++) {
- tabContents[j].classList.remove('active');
- }
-
- // Ìí¼Óµ±Ç°activeÀà
- tabItems[tabIndex].classList.add('active');
- document.getElementById('tab-' + tabIndex).classList.add('active');
- }
- }
- });
-
- // ³¢ÊÔ»Ö¸´ÈÎÎñÑ¡ÖÐ״̬
- var checkboxes = document.querySelectorAll('input[type="checkbox"]');
- for (var k = 0; k < checkboxes.length; k++) {
- (function(checkbox) {
- var taskId = checkbox.id;
- getConfig('task_' + taskId, function(value) {
- if (value === 'true') {
- checkbox.checked = true;
- }
- });
- })(checkboxes[k]);
- }
-
- // TabÇл»¹¦ÄÜ
- for (var l = 0; l < tabItems.length; l++) {
- (function(item) {
- item.addEventListener('click', function() {
- var tabIndex = this.getAttribute('data-tab');
- var tabName = this.textContent;
-
- // ÒÆ³ýËùÓÐactiveÀà
- for (var m = 0; m < tabItems.length; m++) {
- tabItems[m].classList.remove('active');
- }
- for (var n = 0; n < tabContents.length; n++) {
- tabContents[n].classList.remove('active');
- }
-
- // Ìí¼Óµ±Ç°activeÀà
- this.classList.add('active');
- document.getElementById('tab-' + tabIndex).classList.add('active');
-
- // ±£´æµ±Ç°TabÑ¡Ôñ
- saveUserAction('tab', tabIndex);
-
- // ÏÔʾÌáʾ
- toast('Çл»µ½' + tabName + '±êÇ©');
-
- // Ö´ÐÐÔÉúÈÕÖ¾Êä³ö
- runJS(function() {
- printl('Óû§Çл»µ½±êÇ©: ' + tabName);
- });
- });
- })(tabItems[l]);
- }
-
- // ¿ªÊ¼°´Å¥µã»÷ʼþ
- for (var o = 0; o < startButtons.length; o++) {
- (function(button) {
- button.addEventListener('click', function() {
- // »ñÈ¡µ±Ç°¼¤»îµÄ±êÇ©
- var activeTab = document.querySelector('.tab-item.active');
- var tabName = activeTab ? activeTab.textContent : 'δ֪';
-
- // ±£´æ²Ù×÷
- saveUserAction('start_button', tabName);
-
- // ÏÔʾÌáʾ
- toast('¿ªÊ¼' + tabName + 'ÈÎÎñ');
-
- // Ö´ÐÐÔÉú²Ù×÷
- runJS(function() {
- printl('Óû§µã»÷ÁË¿ªÊ¼°´Å¥£¬±êÇ©£º' + tabName);
- toast('¿ªÊ¼Ö´ÐÐ' + tabName + 'Ïà¹ØÈÎÎñ');
- });
- });
- })(startButtons[o]);
- }
-
- // ·µ»Ø°´Å¥µã»÷ʼþ
- for (var p = 0; p < backButtons.length; p++) {
- (function(button) {
- button.addEventListener('click', function() {
- // ±£´æ²Ù×÷
- saveUserAction('back_button');
-
- // ¹Ø±Õ½çÃæ
- if (confirm('È·¶¨Òª·µ»ØÂð£¿')) {
- dismiss();
- }
- });
- })(backButtons[p]);
- }
-
- // ¸´Ñ¡¿òµã»÷ʼþ
- for (var q = 0; q < checkboxes.length; q++) {
- (function(checkbox) {
- checkbox.addEventListener('change', function() {
- var label = this.nextElementSibling.textContent;
- var taskId = this.id;
- var status = this.checked ? 'Íê³É' : 'È¡ÏûÍê³É';
-
- // ±£´æÈÎÎñ״̬
- setConfig('task_' + taskId, this.checked.toString());
-
- // ÏÔʾÌáʾ
- toast(label + ' ÒÑ' + status);
-
- // Ö´ÐÐÔÉúÈÕÖ¾Êä³ö
- runJS(function() {
- printl(label + ' ÈÎÎñ±»±ê¼ÇΪ' + status);
- });
- });
- })(checkboxes[q]);
- }
-
- // Ò³Ãæ¼ÓÔØÍê³ÉÌáʾ
- toast('TabViewÒÑÆô¶¯');
-
- // ¼ÇÂ¼Ò³Ãæ¼ÓÔØÊ±¼äºÍÉ豸ÐÅÏ¢
- setConfig('page_load_time', new Date().toISOString());
- setConfig('app_version', '1.0.0');
-
- // ÑÝʾÅäÖÃÉèÖÃ
- setTimeout(function() {
- setConfig('demo_setting', 'initialized');
- }, 1000);
- });
- </script>
- </body>
- </html>
- `);
-
- return web;
- }
- // ÑÝʾ WebView µÄ¸÷ÖÖ·½·¨
- function demonstrateWebViewMethods() {
- printl('¿ªÊ¼ÑÝʾ WebView ¿Ø¼þµÄ¸÷ÖÖ·½·¨');
-
- // 1. ´´½¨²¢ÏÔʾ WebView
- var webView = createYellowThemedWebViewExample();
- printl('1. WebView ÒÑ´´½¨²¢ÏÔʾ»ÆÉ«Ö÷Ìâ½çÃæ');
-
- // 2. ÑÝʾ loadUrl ·½·¨£¨×¢ÊÍÐÎʽ£¬±ÜÃâʵ¼ÊÌø×ª£©
- // webView.loadUrl('https://www.baidu.com');
- printl('2. loadUrl ·½·¨¿ÉÓÃÓÚ¼ÓÔØÍøÒ³ URL');
-
- // 3. ÑÝʾ loadFile ·½·¨£¨×¢ÊÍÐÎʽ£©
- // webView.loadFile('/sdcard/index.html');
- printl('3. loadFile ·½·¨¿ÉÓÃÓÚ¼ÓÔØ±¾µØÎļþ');
-
- // 4. ÑÝʾ dismiss ·½·¨£¨×¢ÊÍÐÎʽ£¬±ÜÃâʵ¼Ê¹Ø±Õ£©
- // webView.dismiss();
- printl('4. dismiss ·½·¨¿ÉÓÃÓڹرսçÃæ');
-
- printl('WebView ¿Ø¼þ·½·¨ÑÝʾÍê³É');
- }
- // ÔËÐÐʾÀý
- demonstrateWebViewMethods();
¸´ÖÆ´úÂë
|
|