パーツ番号 10-06-05 ・ JavaScript使用

AI応答の段階的表示(コード→説明)

コードブロックが先にストリーミング表示され、続けて説明文が流れる2段階の応答演出。技術系AIツールの回答表現に向きます。

autojs

プレビュー

ソースコード

HTML

<div class="d10-06-05-box">
          <pre class="d10-06-05-code"><code class="d10-06-05-code-text"></code></pre>
          <p class="d10-06-05-explain"><span class="d10-06-05-explain-text"></span></p>
        </div>

CSS

.d10-06-05 .d10-06-05-box{width:100%;max-width:250px;text-align:left}
        .d10-06-05 .d10-06-05-code{background:#1e2430;color:#e2e8f0;border-radius:10px;padding:12px 14px;font-size:11px;line-height:1.7;margin:0 0 10px;min-height:56px;white-space:pre-wrap;font-family:Consolas,Menlo,monospace}
        .d10-06-05 .d10-06-05-explain{font-size:12px;line-height:1.8;color:#4b5563;margin:0;min-height:38px}

JavaScript

(function(){
          var root = document.currentScript.closest('.item');
          var codeEl = root.querySelector('.d10-06-05-code-text');
          var expEl = root.querySelector('.d10-06-05-explain-text');
          var code = 'function sum(a, b) {\n  return a + b;\n}';
          var explain = 'この関数は引数a、bを受け取り、合計値を返します。';
          function typeInto(el, str, speed, cb){
            var i = 0;
            el.textContent = '';
            var t = setInterval(function(){
              i++;
              el.textContent = str.slice(0, i);
              if(i >= str.length){
                clearInterval(t);
                setTimeout(cb, 900);
              }
            }, speed);
          }
          function loop(){
            typeInto(codeEl, code, 30, function(){
              typeInto(expEl, explain, 45, function(){
                setTimeout(loop, 1800);
              });
            });
          }
          loop();
        })();

クラス名 .d10-06-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。