延迟高亮显示文本区域中的文本

Question

我正试图用时间延迟突出显示<textarea>中的单行文本。我想知道我是否可以选择不同的颜色？我想要的是，当我点击第一个<button>时，第一行高亮显示为蓝色，点击第二个<button>，1秒后，第二行高亮显示蓝色，最后点击第三个<button>，2秒后，第三行高亮显示黄色。我注意到我有一个错误，我点击了3次按钮，然后高亮显示不起作用，但对我来说没关系，我只想知道如何使时间延迟并用不同的颜色高亮显示。非常感谢。

$( document ).ready(function() {
  var str = 'line 1nline 2nline 3n';
  var textNumChar = str.length;
  $('#str').val(str);
  
  startPosition = 0;
  $(".lines").click(function() {
    var tarea = document.getElementById('str');
    for(i=startPosition;i<textNumChar;i++)
    {
        if(str[i]=='n') {
            endposition = i;
            break;
        }
    }
    tarea.selectionStart = startPosition;
    tarea.selectionEnd = endposition;
    startPosition = endposition+1;
  });
});

#container {
    float: left;
}
button {
    width: 50px;height: 30px;
}

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<div id="container">
  <button class="lines" id="line1">line 1</button>
  <br>
  <button class="lines"  id="line2">line 2</button>
  <br>
  <button class="lines"  id="line3">line 3</button>
</div>
<textarea id="str" rows="6"></textarea>

Answer 1

您可以使用setTimeout()设置基于button id高亮显示文本的延迟。

和::selection css选择器，为所选元素的部分设置样式。

$( document ).ready(function() {
  var str = 'line 1nline 2nline 3n';
  var textNumChar = str.length;
  $('#str').val(str);
  
  startPosition = 0;
  $(".lines").click(function(e) {
    var tarea = document.getElementById('str');
    for(i=startPosition;i<textNumChar;i++)
    {
        if(str[i]=='n') {
            endposition = i;
            break;
        }
    }
    
    var time = 0;
    var tar_id = e.target.id;
    var colors;
    if(tar_id == 'line1' ) {  colors = 'red'; }
    else if(tar_id == 'line2' ) { time = 1000; colors = 'blue'; }
    else if(tar_id == 'line3' ) { time = 2000; colors = 'green'; }
    
    setTimeout(function(){
      tarea.selectionStart = startPosition;
      tarea.selectionEnd = endposition;
      startPosition = endposition+1;
      $('body').addClass(colors);
    }, time);
  });
});

#container {
    float: left;
}
button {
    width: 50px;height: 30px;
}
.red ::selection {
    color: red;
    background: yellow;
}
.blue ::selection {
    color: blue;
    background: red;
}
.green ::selection {
    color: green;
    background: blue;
}

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<div id="container">
  <button class="lines" id="line1">line 1</button>
  <br>
  <button class="lines"  id="line2">line 2</button>
  <br>
  <button class="lines"  id="line3">line 3</button>
</div>
<textarea id="str" rows="6"></textarea>