我应该如何突出文本区域的文本时,按下开始按钮使用javascript
How should i highlight a text in textarea when press start button using javascript?
我是一个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();
});
}
相关文章:
- 如何添加类,同时开始在文本字段中输入文本
- 在JavaScript中搜索文本并获取其所有开始和结束索引
- 如何使用javascript将验证日期设置为不小于文本框中的开始日期
- 如何删除字符串中从特定文本开始的所有字符
- 如何使文本区域不开始新行
- 如何使文本字段中的文本光标以几像素开始
- 为什么文本在 li 标签中开始一个新行
- 如何通过服务器找到用户是否开始响应?[i.e.In 编辑他们是否键入的文本]
- SVG 文本路径 - 动画开始偏移量(文本向下滑动 SVG 路径) - 在 JS 中
- 单击语法错误:标识符在数字文本之后立即开始
- 从隐藏文本开始,单击时显示文本
- eval 语法错误:标识符在数字文本之后立即开始
- 在文本框中显示结束日期,用户选择的开始日期 + 使用 JavaScript 的 1 年
- 如何自定义开始时间值并向 amCharts 气球添加一些文本
- 以文本开始输入字段
- 语法错误:标识符在数字文本 asp.net 之后立即开始
- 如何检测UIWebView何时开始选择文本
- 如何在光标开始和文本区域结束之间获取文本
- 使用JavaScript查找选定的文本开始和结束索引
- PHP电子邮件脚本-每当我添加id?=文本开始后被截断2个字母