查看“︁微件:Typewriter”︁的源代码

<includeonly>
<div class="typewriter" style="
  font-size:<!--{$size|default:'18'}-->px;
  color:<!--{$color|default:'#333'}-->;
  padding:12px 16px;
  background:<!--{$bg|default:'#f5f0e0'}-->;
  border-radius:8px;
  border-left:4px solid <!--{$accent|default:'#4CAF50'}-->;
  font-family:monospace;
  min-height:40px;
">
  <span class="typewriter-cursor">|</span>
</div>
<script>
(function() {
  const container = document.currentScript.parentElement;
  const cursor = container.querySelector('.typewriter-cursor');
  const text = '<!--{$text}-->';
  if (!text) return;
  
  let index = 0;
  const speed = <!--{$speed|default:'60'}-->;
  let isDeleting = false;
  let interval = null;
  
  function type() {
    if (isDeleting) {
      index--;
      cursor.before(text.substring(0, index));
      if (index === 0) {
        isDeleting = false;
        clearInterval(interval);
        interval = setInterval(type, speed);
      }
      return;
    }
    
    index++;
    cursor.before(text.substring(0, index));
    
    if (index >= text.length) {
      clearInterval(interval);
      if (<!--{$loop|default:'false'}--> === true) {
        setTimeout(() => {
          isDeleting = true;
          interval = setInterval(type, speed);
        }, <!--{$pause|default:'2000'}-->);
      }
    }
  }
  
  // 清除初始光标
  cursor.before('');
  interval = setInterval(type, speed);
})();
</script>
</includeonly>
{{#widget:Typewriter
|text=欢迎来到植物大战僵尸杂交版Wiki！
|speed=80
|loop=true
|pause=3000
|size=20
|color=#2E7D32
|accent=#4CAF50
}}