Skip to main content

timer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@3.0.x/dist/xnew.js"></script>
</head>

<body>
  <div id="main" style="width: 100%; height: 100%;"></div>
  <script>
    xnew('#main', (self) => {
      xnew.nest({ style: { position: 'absolute', width: '400px', height: '300px', inset: 0, margin: 'auto', background: '#000', overflow: 'hidden' }});
      
      xnew.interval(() => xnew(Box), 10);
    });
    
    function Box(self) {
      const box = xnew.nest({ style: { position: 'absolute', width: '30px', height: '30px', background: '#F80' }});
      box.style.left = (Math.random() * 400 - 15) + 'px';
      box.style.top = (Math.random() * 300 - 15) + 'px';

      // fade in
      xnew.transition((progress) => box.style.opacity = progress, 1000);

      // remove after 2 seconds
      xnew.timer(() => self.finalize(), 2000);

      return {
        update(count) {
          box.style.transform = `rotate(${count}deg)`;
        },
      };
    }
  </script>
</body>

</html>