使用延迟

Question

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

$( document ).ready(function() {
  var str = 'line 1\nline 2\nline 3\n';
  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选择器用于设置所选元素部分的样式。

＆＃13;

＆＃13;

$( document ).ready(function() {
  var str = 'line 1\nline 2\nline 3\n';
  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);
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;