如何强制JS做math而不是把两个string放在一起
我需要JavaScript将5添加到一个整型variables，而是将它作为一个string处理，所以它写出variables，然后将5添加到“string”的末尾。 我怎么能强迫它做math呢？
var dots = 5 function increase(){ dots = dots+5; } 产出： 55
我怎样才能强制输出10？
这可能是我的脚本中的错误吗？
<html> <head> <title>Counting Game</title> <style type="text/css"> .dot { position: absolute; } #control { position: absolute; width: 220px; height: 90px; margin-top: -102px; margin-left: -222px; left: 100%; top: 100%; text-align: center; vertical-align: middle; border: 1px dotted #000; padding-top: 10px; background-color: transparent; } #gameover h1 { font-variant: small-caps; } #gameover { text-align: center; visibility: hidden; } #txt { text-align: center; } body { background-color: #6FF; } #intro, #gameover { height: 300px; width: 250px; margin-top: -150px; margin-left: -125px; position: absolute; left: 50%; top: 50%; } #dots { position: absolute; left: 0px; top: 0px; } </style> <script type="text/javascript"> var num; var digits; var size; var bsize; var bsizew; var bsizeh; var lvlv; var hearts; var t; var answer = false; var lvl=1; var oldlvl=1; var btn = 2; var dots = 5; var arrx = []; var arry = []; var lifestf = true; var timertf = true; var auto = true; var level = 1; var life = 4; var resetv = false; function docload() { document.getElementById("txt").focus(); } function createdots() { answer = false; document.getElementById("txt").value = "" document.getElementById("txt").focus() document.getElementById("txt").style.color = "#000000" document.getElementById("control").style.backgroundColor = "#6FF" document.body.style.backgroundColor = "#6FF" num = Math.floor(Math.random() * dots) + 1; digits = num.toString().length bsize = Math.min(document.body.clientWidth, document.body.clientHeight); bsizew = document.body.clientWidth; bsizeh = document.body.clientHeight; if ([[bsizeh*bsizew]-[220*90]] > num*num*25000) {size=100} else if ([[bsizeh*bsizew]-[220*90]] > num*num*2500) {size=50} else if ([[bsizeh*bsizew]-[220*90]] > num*num*25*25) {size=25} else {size=10} function createDot(x, y) { var elem = document.createElement("div"); elem.setAttribute("class", "dot"); elem.setAttribute("style", "left:"+ x+"px;top:"+y+"px;"+"width: "+size+"px;"+"height: "+size+"px;"+"background-image: url(dot"+size+".png);"); document.getElementById("dots").appendChild(elem); btn = 1 return elem; } function anotherDot() { var x = Math.floor(Math.random() * (bsizew-size)); var y = Math.floor(Math.random() * (bsizeh-size)); ok = true; for (var i in arrx) { if (arrx[i] <= x + size && arrx[i] >= x - size) { ok = false; } } for (var i = 0; i < arry.length; i++) { if (arry[i] <= y + size && arry[i] >= y - size) { ok = false; } } if (x > bsizew-size-220 && y > bsizeh-size-90) {ok = false;} if (ok) { arrx.push(x); arry.push(y); createDot(x, y); } !ok && anotherDot(); } for (var i = 0; i < num; i++) { anotherDot(); document.getElementById("max").innerHTML="Max: "+dots; } } function resetg() { document.getElementById("txt").style.color = "#000000" document.getElementById("control").style.backgroundColor = "#6FF" document.body.style.backgroundColor = "#6FF" document.getElementById("gameover").style.visibility = "hidden"; document.getElementById("intro").style.visibility = "visible"; document.getElementById("control").style.visibility = "visible"; document.getElementById("life").innerHTML='<label><input id="lifecheck" type="checkbox" checked="true">Lives</label>' document.getElementById("level").innerHTML='<label><input id="autocheck" type="checkbox" checked="true">Auto</label>' document.getElementById("max").innerHTML='' document.getElementById("timer").innerHTML='<label><input id="timercheck" type="checkbox" checked="true">Timer</label>' lvl=1 btn = 2; dots = 5; arrx = []; arry = []; lifestf = true; timertf = true; auto = true; level = 1; life = 4; resetv = false; lvlv = ''; document.getElementById("txt").value = "5" document.getElementById("txt").focus() } function checkanswer() { answer = true; if (document.getElementById("txt").value == arrx.length) { document.getElementById("txt").value = "CORRECT!" document.getElementById("txt").style.color = "#00DD00" document.getElementById("control").style.backgroundColor = "#00FF00" document.body.style.backgroundColor = "#00FF00" btn = 0 lvl++; } else if (document.getElementById("txt").value != arrx.length) { document.getElementById("txt").value = "Correct Answer: " + arrx.length document.getElementById("txt").style.color = "#DD0000" document.getElementById("control").style.backgroundColor = "#C00" document.body.style.backgroundColor = "#C00" if (lifetf==true){ hearts = ""; for(i=0;i<life;i++){ hearts += "♥ "; } document.getElementById("life").innerHTML = hearts; life--; } btn = 0 lvl > 1 && lvl--; if (lvl == oldlvl + 5) { oldlvl = lvl; dots = dots+5; } else if (lvl < oldlvl) { oldlvl = lvl - 5; dots = dots+5; } if (life<0){ lvlv="wtfiswrongwithyou" } } } function submitenter() { var keycode = window.event.keyCode; if (keycode == 13) { !resetv && btnclick(); resetv && resetg(); } if (keycode < 47 || keycode > 58 || answer) { return false; } } function quickanswer() { if (auto == true && document.getElementById("txt").value.length == digits) { document.getElementById("dots").innerHTML = "" arrx = []; arry = []; createdots() } } function btnclick() { if (btn == 1) { checkanswer() } else if (btn == 2) { lifetf = document.getElementById("lifecheck").checked; timertf = document.getElementById("timercheck").checked; auto = document.getElementById("autocheck").checked; dots = document.getElementById("txt").value; document.getElementById("life").innerHTML="♥ ♥ ♥ ♥ ♥ " document.getElementById("level").innerHTML=lvl document.getElementById("max").innerHTML=dots document.getElementById("intro").style.visibility= "hidden" btn = 0; document.getElementById("txt").value = "" document.getElementById("txt").focus() btnclick(); } else if (lvlv != "wtfiswrongwithyou") { document.getElementById("dots").innerHTML = "" arrx = []; arry = []; createdots(); if (timertf==true) { clearTimeout(t) timer(2, 0) } document.getElementById("level").innerHTML=lvl } else { document.getElementById("dots").innerHTML = "" arrx = []; arry = []; document.getElementById("txt").value = "" document.getElementById("txt").focus() document.getElementById("txt").style.color = "#C00" document.getElementById("control").style.backgroundColor = "#C00" document.body.style.backgroundColor = "#C00" document.getElementById("gameover").style.visibility = "visible"; document.getElementById("intro").style.visibility = "hidden"; document.getElementById("control").style.visibility = "hidden"; resetv=true; } } function timer(s,ms) { if (lvlv != "wtfiswrongwithyou") { milisec = ms seconds = s function display() { if (milisec <= 0) { milisec = 9 seconds -= 1 } if (seconds <= -1) { milisec = 0 seconds += 1 } else milisec -= 1 document.getElementById("timer").innerHTML = "Time: " + seconds + "." + milisec if (seconds != 0 || milisec != 0) { t = setTimeout(display, 100) } if (seconds == 0 && milisec == 0) { btnclick() } } display() } else { document.getElementById("timer").innerHTML = "" } } </script> </head> <body onLoad="docload()" onKeyPress="return submitenter()" > <div id="dots"></div> <div id="gameover"><h1>Game Over</h1>Would you like to play again?<br><br><br><input type="button" value="OK" onClick="resetg()"></div> <div id="intro">Count all the dots that appear on screen as fast as possible and enter the number below. The point of this game is not to count each individual dot, but rather to immediately know exactly how many dots are apparent.<br> <br> <br> Please select what the maximum number of dots should appear when you begin:</div> <div id="control"> <input id="txt" type="text" value="5"/> <input type="button" onClick="btnclick()" value="OK"/><br> <center><table width="200"> <tr> <td align="left" valign="middle"><span id="life"><label><input id="lifecheck" type="checkbox" checked="true">Lives</label></span></td> <td align="right" valign="middle"><span id="timer"><label><input id="timercheck" type="checkbox" checked="true">Timer</label></span></td> </tr> <tr> <td align="left" valign="middle"><span id="level"><label><input id="autocheck" type="checkbox" checked="true">Auto</label></span></td> <td align="right" valign="middle"><span id="max"></span></td> </tr> </table></center> </div> </body> </html>
你有线
dots = document.getElementById("txt").value;
在你的文件中，这将把点设为一个string，因为txt的内容不限于一个数字。
将其转换为int将行更改为：
dots = parseInt(document.getElementById("txt").value);
最简单的：
dots = dots*1+5;
点将被转换为数字。
不要忘记 – 使用parseFloat(); 如果你处理小数。
parseInt()应该做的伎俩
var number = "25"; var sum = parseInt(number) + 10; var pin = number + 10;
给你
sum == 35 pin == "2510"
这也适用于你：
dots -= -5;
我添加了这个答案，因为我没有在这里看到它。
一种方法是在值前加“+”字符
例：
var x = +'11.5' + +'3.5'
x === 15
我发现这是最简单的方法
在这种情况下，行：
dots = document.getElementById("txt").value;
可以改成
dots = +(document.getElementById("txt").value);
强迫它一个数字
注意：
+'' === 0 +[] === 0 +[5] === 5 +['5'] === 5
由于这是最后downvoted更新….
我只看到了部分
var dots = 5 function increase(){ dots = dots+5; }
之前，但稍后我看到txt框提供了可变dots 。 因此，您需要确保“清理”input，确保它只有整数，而不是恶意代码。
一个简单的方法是使用onkeyup()事件parsing文本框，以确保它具有数字字符：
<input size="40" id="txt" value="Write a character here!" onkeyup="GetChar (event);"/>
如果该值不是一个数字，那么该事件将发生错误并清除最后一个字符：
<script type="text/javascript"> function GetChar (event){ var keyCode = ('which' in event) ? event.which : event.keyCode; var yourChar = String.fromCharCode(); if (yourChar != "0" && yourChar != "1" && yourChar != "2" && yourChar != "3" && yourChar != "4" && yourChar != "5" && yourChar != "6" && yourChar != "7" && yourChar != "8" && yourChar != "9") { alert ('The character was not a number'); var source = event.target || event.srcElement; source.value = source.value.substring(0,source.value-2); } } </script>
显然，你也可以用正则expression式来做，但是我却懒散地出来了。
从那以后你就会知道只有数字可以在框中，你应该可以使用eval() ：
dots = eval(dots) + 5;
