如何更改单词中间字母的颜色(来自数组),javascript

问题描述 投票:0回答:2

我不知道返回中间字母颜色被修改的单词的正确结构。我使用拆分将段落中的所有单词保存在数组中,但是我必须修改这些单词中的每个单词,并用红色的中间字母显示它们。调查,我想我可以使用slice方法来修改字体颜色。这是我的代码:

HTML

  <body>
    <textarea id="text">JavaScript is the Programming Language for the Web, JavaScript can update and change both HTML and CSS, JavaScript can calculate, manipulate and validate data</textarea>
    <div class="show">
      <h3 id="txt"></h3>
    </div>
    <div class="control-box">
      <button type="button" name="button" onclick="iniciar()">play</button>
    </div>
  </body>
</html>

脚本

function iniciar(){
  var texto = document.getElementById("text").value;
  var palabras = texto.split(/[, ]+/);
  var index = 0;
  console.log(palabras);

  function tester(){
    document.getElementById("txt").innerHTML=palabras[index];    
    var timer = setTimeout(function(){
      console.log(timer);
      tester();
    },550);

    console.log(palabras[index]);

    if (index>palabras.length-2){
        clearTimeout(timer);
    }
    index++;
  }
  tester();
}
javascript arrays split slice
2个回答
0
投票

尝试这种逻辑...

var broken = texto.toArray();
if (broken.length % 2 === 1){
   var size = broken.length / 2;
   var fixed = broken.toString();
   fixed.charAt(size).style.color = 'red';
}
else{
   var size = (broken.length / 2);
   var fixed = broken.toString();
   fixed.charAt(size).style.color = 'red';
   fixed.chatAt(size - 1).style.color = 'blue';
}

这应该工作


0
投票

这里是更新的Javascript代码,返回数组中的每个单词,中间字母为红色。

function iniciar(){
    var texto = document.getElementById("text").value;
    var palabras = texto.split(/[, ]+/);
    console.log(palabras);
    palabras.forEach(function(value, index){
        var wordstr = value;
        var wordLength = value.length; //get length of word
        var centerOfWord = (wordLength/2).toFixed(0); //get centerofword
        var middleLetter = wordstr.substring(parseInt(centerOfWord) - 1, parseInt(centerOfWord)); //get middle letter of word
        wordstr = wordstr.replace(middleLetter,  "<span style='color:red'>"+ middleLetter +"</span>"); //make middle letter color red
        setTimeout(function(){
            console.log(wordstr);
            document.getElementById("txt").innerHTML= wordstr; //show word
          }, 1000*index);
    });
}

希望这对您有用。

© www.soinside.com 2019 - 2024. All rights reserved.