在排序算法的动态演示中，怎样用动态效果显示代码执行到了哪一行了，用JavaScript来写

可以通过在代码执行到的行添加一个class，然后在CSS中设置该class的样式来实现动态效果。具体实现可以参考以下代码：

HTML代码：

<pre id="code">
  <code>
    <span class="line">1</span> function bubbleSort(arr) {
    <span class="line">2</span>   var len = arr.length;
    <span class="line">3</span>   for (var i = 0; i < len; i++) {
    <span class="line">4</span>     for (var j = 0; j < len - 1 - i; j++) {
    <span class="line">5</span>       if (arr[j] > arr[j + 1]) {
    <span class="line">6</span>         var temp = arr[j];
    <span class="line">7</span>         arr[j] = arr[j + 1];
    <span class="line">8</span>         arr[j + 1] = temp;
    <span class="line">9</span>       }
    <span class="line">10</span>    }
    <span class="line">11</span>  }
    <span class="line">12</span>  return arr;
    </code>
</pre>

CSS代码：

.line {
  background-color: yellow;
}

JavaScript代码：

// 获取代码元素
var code = document.getElementById('code');

// 获取所有代码行元素
var lines = code.getElementsByTagName('span');

// 定义当前执行到的行号
var currentLine = 0;

// 执行排序算法的代码
function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      // 将当前行设置为高亮
      lines[currentLine].classList.add('line');
      if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
      // 将当前行取消高亮
      lines[currentLine].classList.remove('line');
      // 将当前行号加1
      currentLine++;
    }
  }
  return arr;
}

// 调用排序算法
bubbleSort([3, 2, 1]);

在代码执行到某一行时，通过给该行元素添加class来设置样式，如上述代码中的`line`类，然后在代码执行到下一行时，将当前行元素的class移除即可。为了方便，我们可以将所有代码行元素存储在一个数组中，通过下标来获取当前行元素。同时，我们需要定义一个变量`currentLine`来记录当前执行到的行号，每次执行到下一行时将其加1即可。