我应该如何突出文本区域的文本时,按下开始按钮使用javascript

How should i highlight a text in textarea when press start button using javascript?

本文关键字:文本 开始 按钮 javascript 何突出 区域 我应该      更新时间:2023-09-26

我是一个JavaScript初学者。

有人能帮帮我吗?

如何在按下星号按钮时突出显示带有背景的文本区域的文本?当单击停止时,光标应停止并突出显示背景。

当按下停止按钮时,它会显示单词计数,行数。

例如:

按下两个按钮之间的时间将给出用户阅读所花费的时间。并且由于文本区域有字数,可以计算"阅读速度"例如:每分钟120个单词,也就是每秒2个单词。10分钟1200字

这就是我如何计算的。假设一本书的页面通常有:30行*每行8字也就是一页240字时代周刊600页总共144000个单词除以每分钟120个单词的阅读速度那是1200分钟除以每小时60分钟:20小时

下面的链接与我的问题有关。但是文本已经高亮显示到另一个文本区域。我想突出显示同一文本框中的文本

如何在TextArea中突出显示文本

这是我的html代码:
<div id="startbtn">
<button id="start" onclick="startHighlight()">Start!</button>
</div>
<div id="stoptbtn">
<button id="stop" onclick="stopHighlight()">Stop!</button>
</div>        
<div id="container">
<textarea id="inputText"></textarea>
</div>

最新更新:阅读模拟器现在根据用户输入速度和单词长度读取每个单词,以提供更真实的阅读流程。https://jsfiddle.net/8Lwm6gh1/40/

js的源代码:

<<p> 更新代码/strong>
  $('#sim').each(function(){
    this.contentEditable = true;
});
var go = $('#go');
var stop = $('#stop');
var wordCount = 0;
var wordCountBox = $('#wordCountBox');
var timepassed = $('#timepassed');
var textRead = $('#textRead');
var small = $('small');

go.on("click", function(e){
    e.preventDefault();
    startSim();
});
function startSim(){
    var speed = $('#speed').val();
    timeStart = $.now();
    var sim = $('#sim').text();
    var wordArray = sim.split(" ");
    var simWrap = $('#sim');
    var loopCount = 0;
    var arrCount = wordArray.length;
    var alreadyRead = [];
    loopDat();
    var i = loopCount;    
    function loopDat(){
            var pos = loopCount;
            var realSpeed = wordArray[pos].length;
            realSpeed = (realSpeed * (speed / 5));
            // realSpeed = Math.round((realSpeed * 0.1) * speed);
            console.log('Reading speed of current word: '+realSpeed);
            if(loopCount == pos){
                setTimeout(function() { 
                    if(pos < 0){
                        pos = 0;
                    }
                    alreadyRead.push(wordArray[pos]);
                    wordArray[pos] = '<b>'+wordArray[pos]+'</b>';
                    small.text('Current reading speed: '+realSpeed);
                    var words = wordArray.join(" ");
                    simWrap.html(words);                
                    wordCount++;
                    if(pos == (arrCount - 1)){
                        triggerDone();
                    }
                    loopCount++;
                    if(loopCount < arrCount){
                        loopDat();
                    }
                }, realSpeed);
            }
    }
    // Function done
    function triggerDone(){
        wordCountBox.text('Words counted: '+wordCount);
        var timeEnd = $.now();
        var timeRes = timeEnd - timeStart;
        timeRes = parseInt(timeRes);
        timeRes = timeRes / 1000;
        timepassed.text(timeRes+" seconds have passed");
        alreadyRead = alreadyRead.join(" ");
        textRead.text(alreadyRead);
        var summary = $('#summary');
        summary.show();
        return;
    } 
    stop.on("click", function(e){
        e.preventDefault();
        triggerDone();
    });
}