我应该怎样改变Javascript中的公式? [英] What should i change the formula in Javascript?
问题描述
我正在开发一个使用HTML5和JS的速度阅读模拟。
但是,我无法理解客户的期望。
我已经使用了下面的应用程序。 p>
#sim {width:800px;高度:400像素; border:solid 1px#2e2e2e;颜色:黑色;填充:5像素;溢出-Y:滚动,边界:9px开头#0ADA0A;边距:1em的;字体大小:16PT;文本对齐:左;背景颜色:白色;列数: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;颜色:#fafafa;过渡:全部0.3s; cursor:pointer;}#go {background-color:#46A111; border:solid 1px#46A111;}#go:hover {background-color:#fafafa;颜色:#46A111;}#stop {background-color:#A11111; border:solid 1px#A11111;}#stop:hover {background-color:#fafafa;颜色:#A11111;}摘要{宽度:350像素;高度:30像素;保证金左:12em;背景色:RGBA(0,0,0,0.1); border:solid 1px#2e2e2e;填充:5像素;边距:10px的;显示:无; border-radius:45px;背景:#8AC007;填充:5px; } #bold {font-weight:bold;}。greyx {font-weight:600;}。graydim {color:dimgray;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js> ;< / script>< div class =summaryid =summary> < span id =wordCountBox>< / span> < span id =timepasssed>< / span> < / div>< button id =go> START< / button> < button id =stop> STOP< / button>< input id =speedtype =numbervalue =120step =10min =0max =1000/> , < span for =speed> WPM< / span>< div id =simcols =2rows =2>< / div>
$
//jsfiddle.net/Darious/dcu808w1/\"rel =nofollow> http://jsfiddle.net/Darious/dcu808w1/
更新
但我的客户想要,
使用双字光标。 1200除以2:600字。
<600> 600字除以60秒
即10分钟
对吗?
使用三个字光标。
<1200> 1200 x 3 = 400单词
400分60秒= 6.66分。
当你得到这个工作。您可以为光标时间添加一个按钮
的速度。
第一个1秒
然后是
。 5秒
现在。值为:
.25,.5,.75,1,1.25,1.50,2
真的,我不知道,我该怎么改变?
解决方案唯一我能弄清楚的是这样的:
boldWords = boldWords< 1? 1:Math.floor(粗体字);
在所描述的情况下返回1(其中
boldWords
开始为〜1.67
),但从客户的愿望出发,他预计结果为2.
只需将其更改为boldWords = boldWords< 1? 1:Math.round(boldWords);
(或使用
Math.ceil
,don不知道任何进一步的要求,如果这将符合他们的话)I am developing a speed reading simulation using HTML5 and JS.
But, i could not understand client expectation.
I have used the below for the app.
$('#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.round(boldWords); timeStart = $.now(); var sim = $('#sim').text(); var wordArray = sim.split(/[\s]+/); 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 span: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(" in " + timeRes + " Seconds."); alreadyRead = alreadyRead.join(""); textRead.text(alreadyRead); var summary = $('#summary'); summary.show(); return; } stop.on("click", function (e) { e.preventDefault(); triggerDone(); }); }
#sim { width:800px; height:400px; border:solid 1px #2e2e2e; color:black; padding:5px; overflow-y:scroll; border:9px outset #0ADA0A; margin-top:1em; font-size:16pt; text-align:left; background-color:white; 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; } .summary{ width:350px; height:30px; margin-left:12em; background-color:rgba(0,0,0,0.1); border:solid 1px #2e2e2e; padding:5px; margin-top:10px; display:none; border-radius: 45px; background: #8AC007; padding: 5px; } #bold{ font-weight:bold; } .grayx { font-weight: 600; } .graydim { color: dimgray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="summary" id="summary"> <span id="wordCountBox"></span> <span id="timepassed"></span> </div> <button id="go">START</button> <button id="stop">STOP</button> <input id="speed" type="number" value="120" step="10" min="0" max="1000"/> <span for="speed">WPM</span> <div id="sim" cols="2" rows="2"></div>
OR
http://jsfiddle.net/Darious/dcu808w1/
Updated
But my client wants,
With a two word cursor. 1200 divided by two: 600 words.
600 words divided by 60 seconds
That would be 10 minutes
Right ?
With a three word cursor.
1200 div by 3 = 400 words
400 div by 60 seconds = 6.66 minutes.
When you get that working. You can add a button for the Cursor time speed.
First 1 second
Then .5 second
For now. The values are :
.25, .5, .75, 1, 1.25, 1.50, 2
Really, I don't know, What should i change on this?
解决方案The only thing i can figure out is this :
boldWords = boldWords < 1 ? 1 : Math.floor(boldWords);
returns 1 in the case described (where
boldWords
begins as~1.67
) , but geussing from your client's wishes, he expects an outcome of 2. Simply change it toboldWords = boldWords < 1 ? 1 : Math.round(boldWords);
(or use
Math.ceil
, don't know about any further requirements, and if that would fit them)这篇关于我应该怎样改变Javascript中的公式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!