HTML Code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Web Worker square demo</title><style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.6}
h1{margin:0 0 .5rem;font-size:1.25rem;color:#0f172a}p{margin:0 0 1rem;max-width:420px}
button{padding:.55rem 1rem;font-size:.9375rem;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}
button:hover{background:#1d4ed8}button.secondary{background:#64748b}
#status,#result{margin-top:1rem;padding:.75rem 1rem;max-width:420px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem}
#status.ok{border-left:4px solid #22c55e}#status.err{border-left:4px solid #ef4444}
#tick{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:700}</style></head>
<body>
  <h1>Web Worker Example</h1>
  <p>Click to send <b>10</b>. The worker returns <b>100</b> (10&times;10).</p>
  <button type="button" id="start">Start Worker</button>
  <p id="result"></p>
  <script>
    var resultEl = document.getElementById('result');
    if (typeof Worker === 'undefined') {
      resultEl.textContent = 'Web Workers are not supported in this browser.';
    } else {
      var workerCode = 'self.onmessage=function(e){postMessage(e.data*e.data);};';
      var worker = new Worker(URL.createObjectURL(new Blob([workerCode],{type:'application/javascript'})));
      worker.onmessage = function (event) {
        resultEl.textContent = 'Result: ' + event.data;
      };
      document.getElementById('start').onclick = function () {
        resultEl.textContent = 'Waiting...';
        worker.postMessage(10);
      };
    }
  </script>
</body></html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Web Workers — Full Page Square Demo