JavaScriptKit/Examples/Multithreading/index.html at main · ATZLab/JavaScriptKit

57 lines (53 loc) · 1.24 KB

<html>

<head>
  <meta charset="utf-8">
  <title>Threading Example</title>
  <style>
    .loading-emoji {
      font-size: 60px;
      width: 60px;
      height: 80px;
    }
  </style>
  <script>
    function rotateElement(element, speed = 2) {
      let degree = 0;
      setInterval(() => {
        degree = (degree + speed) % 360;
        element.style.transform = `rotate(${degree}deg)`;
      }, 20);
    }

    document.addEventListener('DOMContentLoaded', () => {
      const loadingCircle = document.getElementById('loading-emoji');
      rotateElement(loadingCircle);
    });
  </script>
</head>

<body>
  <script type="module">
    import { init } from "./Bundle/index.js"
    init();
  </script>
  <h1>Threading Example</h1>
  <p>
  <div>
    <label for="background">Background:</label>
    <input id="background" type="checkbox" checked>
  </div>
  <div>
    <label for="size">Size:</label>
    <input id="size" type="number" value="800">
  </div>
  <div>
    <label for="concurrency">Concurrency:</label>
    <input id="concurrency" type="number">
    <button id="render-button">Render</button>
  </div>
  </p>
  <p>
  <div id="loading-emoji" class="loading-emoji">🧵</div>
  </p>
  <p id="render-time"></p>
  <canvas id="canvas"></canvas>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expand file tree

Search code, repositories, users, issues, pull requests...

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls

Expand file tree