如何使用JAVASCRIPT增加读取光标基于速度的WPM值？

Question

实际上，我已经使用JS开发了速读模拟。

但是，我的客户问道，

1）。一旦你得到＆＃34;字光标＆＃34;根据所需的速度变成两三个字。 关于＆＃34;速读光标的部分＆＃34;。

2）。一旦你获得＆＃34;速度读取光标＆＃34;这等于读者必须同时读取的数字，以达到理想的阅读速度。

例如：如果每分钟120个字。 ＆＃34;速读光标＆＃34;将是2个字。当光标以所需的速度移动到阅读材料时，这两个单词将同时以粗体显示。

另一方面，如果所需的速度是每分钟180字。或加速度的1.5倍。然后是＆＃34;速度读取光标＆＃34;将是3个字。这3个单词将以粗体字体每分钟3个字的速度移动。

3）。当速度读取光标开始移动时。 遗留下来的文字也会变暗＆＃34;昏暗＆＃34;。它将进入％70灰色。 只有＆＃34;速读光标＆＃34;将以粗体显示。 文本的其余部分保留。 70％灰色。

我的代码位于 jsfiddle.net/Darious/m10wff0u/1 /

请问如何加速阅读？

我怎么能这样做？

如果有人熟悉JS，请帮我解决这个问题。

Answer 1

我不确定速度有什么问题，因为当WPM增加时，单词会变慢，但我认为应该很容易修复。我注意到你有两毫秒和WPM作为相同的ID，所以我认为这导致了一些问题。这是我的修复：

＆＃13;

＆＃13;

$('#sim').each(function () {
    this.contentEditable = true;
});

var go = $('#go');
var stop = $('#stop');
var wordCount = 0;
var wordCountBox = $('#wordCountBox');
var timepassed = $('#timepassed');
var textRead = $('#textRead');


go.on("click", function (e) {
    e.preventDefault();
    startSim();
});

function startSim() {
    var speed = $('#speed').val();
    var boldWords = speed / 60;
    boldWords = boldWords < 1 ? 1 : Math.floor(boldWords);
    timeStart = $.now();
    var sim = $('#sim').text();
    var wordArray = sim.split(" ");
    var simWrap = $('#sim');

    var arrCount = wordArray.length;
    var alreadyRead = [];

    for (var i = 0; i < arrCount; i++) {
        (function (index) {
            setTimeout(function () {
                var pos = index;
                if (pos < 0) {
                    pos = 0;
                }
                alreadyRead.push(wordArray[pos]);
                wordArray[pos] = '<span class="grayx">' + wordArray[pos] + '</span>';
                if (pos > (boldWords - 1)) {
                    wordArray[pos - boldWords] = wordArray[pos - boldWords].replace("x", "dim");
                }
                var words = wordArray.join(" ");
                simWrap.html(words);
                wordCount++;
                if (pos == (arrCount - 1)) {
                    triggerDone();
                }
                $('#sim b:last')[0].scrollIntoView(false);
            }, i * speed);
        })(i);
    }
    // Function done
    function triggerDone() {
        wordCountBox.text(wordCount + ' Words Read');
        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();
    });
}

＆＃13;

#sim {
    width:800px;
    height:400px;
    border:solid 1px #2e2e2e;
    color:#B3B3B3;
    padding:5px;
    overflow-y:scroll;
    border:9px outset #0ADA0A;
    margin-top:1em;
    font-size:16pt;
    text-align:left;
    background-color:#333;
    column-count: 2;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap : 20px;
    -moz-column-rule-color: #ccc;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: 1px;
    -webkit-column-rule-color: #ccc;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
}
button {
    padding:10px 25px;
    color:#fafafa;
    transition:all 0.3s;
    cursor:pointer;
}
#go {
    background-color:#46A111;
    border:solid 1px #46A111;
}
#go:hover {
    background-color:#fafafa;
    color:#46A111;
}
#stop {
    background-color:#A11111;
    border:solid 1px #A11111;
}
#stop:hover {
    background-color:#fafafa;
    color:#A11111;
}
.grayx {
    font-weight: 600;
}
.graydim {
    color: dimgray;
}
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="milliseconds" type="number" value="1000" step="25" min="0" max="1000" />
<label for="speed">in milliseconds</label>
<button id="go">START</button>
<button id="stop">STOP</button>
<input id="speed" type="number" value="300" step="10" min="0" max="1000" />
<label for="speed">WPM</label>
<div id="sim" cols="2" rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur diam nisi, auctor id pulvinar vel, commodo sit amet dui. Nulla cursus vitae est ut fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla molestie, orci nec congue laoreet, velit orci volutpat nulla, non sollicitudin nulla magna vel justo. Curabitur in orci id lorem porttitor eleifend in in nibh. Phasellus vitae quam tellus. Morbi porttitor magna nec nunc euismod, ac fermentum nisi vulputate. Etiam efficitur, metus sit amet iaculis tempor, mauris sem molestie neque, vitae faucibus lorem justo vel metus. Curabitur id laoreet ligula, eget tempus nunc. Etiam ultricies tortor ut elit elementum, id vestibulum magna vestibulum. Donec ut hendrerit magna. Quisque in nibh sit amet turpis varius sollicitudin nec euismod lorem. Etiam vitae pulvinar nibh. Nullam porttitor nulla finibus, tempus tortor suscipit, blandit risus. Praesent porta gravida nisi non scelerisque. Aliquam vel condimentum neque. Nullam ac arcu posuere, imperdiet neque ac, dignissim felis. In hac habitasse platea dictumst. Sed facilisis dignissim purus. Nulla efficitur quis lacus sed efficitur. Curabitur viverra, metus eget suscipit efficitur, orci nibh molestie enim, eget bibendum mi ex sed ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat urna velit, et rutrum lorem laoreet ac. In sapien turpis, efficitur condimentum lacinia a, imperdiet ut nisi. Aenean eget tincidunt arcu. Vestibulum nisi neque, molestie sed eleifend sit amet, porttitor ut nisi. Vestibulum ultricies auctor nunc, condimentum feugiat lectus malesuada sit amet. Nam dignissim scelerisque lorem id auctor. Nullam nec urna eget dolor eleifend fermentum. Mauris dapibus est quis lorem eleifend tempor. Praesent vel laoreet ipsum. Nulla condimentum, tellus sed sodales posuere, nisl velit hendrerit diam, in dictum tortor velit eu tellus. Aliquam lectus enim, laoreet at interdum vitae, facilisis quis sapien. Nullam dignissim tristique quam, id tempus dui cursus nec. Donec varius massa sagittis pretium ultrices. Nam laoreet tincidunt ex, ut vestibulum nisl ultricies at. Etiam gravida viverra metus, quis mattis sapien egestas nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam et iaculis ex, a efficitur enim. Quisque facilisis volutpat nisi sed malesuada. Sed porttitor justo vitae tortor porttitor, nec imperdiet nisl consectetur. Morbi scelerisque aliquam semper. Vivamus pulvinar quam felis, vitae laoreet risus suscipit sed. Vestibulum tincidunt convallis dapibus. Fusce ut efficitur erat. Proin venenatis, nibh eu rutrum pretium, ante turpis fermentum nibh, et ullamcorper eros dolor et ipsum. Sed ut justo leo. Nam vel auctor libero. Nam sed dui at arcu porta laoreet vitae quis ligula. Aenean facilisis neque eu venenatis rutrum. Praesent id tincidunt justo, ornare dapibus lectus. Ut consectetur maximus enim, eget tempus mauris dapibus iaculis. Fusce consequat ligula ac tincidunt consectetur.</div>
<div class="summary" id="summary">
    <p id="wordCountBox"></p>
    <p id="timepassed"></p>
</div>

＆＃13;

＆＃13;

＆＃13;