2011-01-30 3 views
76

정수 변수에 5를 더하려면 javascript가 필요하지만 변수를 문자열로 처리하므로 변수를 쓰고 끝에 5를 더합니다. "문자열"의. 대신 어떻게해야 수학을 할 수 있습니까?JS가 두 문자열을 합치는 대신 수학을 수행하는 방법

var dots = 5 
function increase(){ 
dots = dots+5; 
} 

출력은 :

어떻게 출력 (10)에 강제 할 수 55?

내 스크립트에서 어딘가에 오류가있을 수 있습니까?

<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 += "&#9829; "; 
       } 
     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="&#9829; &#9829; &#9829; &#9829; &#9829; " 
     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> 
+3

이 특정 예에 출력 자바 잘못 두 숫자를 추가] 10. – deceze

+0

중복 가능성 (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly); [해당 질문에 대한 내 대답] 참조 (http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly/4600744#4600744) – Phrogz

+5

덤핑으로 도움을 받고자하는 사람에게 과도한 부담을주었습니다 그것을 줄이려는 노력을하지 않고도 모든 코드를 사용할 수 있습니다. 자체 테스트 ...'# control'에 대한 CSS 속성은 문제에 어떤 차이가 있습니까? 그렇지 않다면 삭제하고 우리에게 보여주지 마십시오. 문제를 재현하는 데 필요한 최소한의 테스트 사례가있을 때까지 코드를 계속 줄입니다. 대부분 그렇게하면 _you_가 문제를 발견하고 ** 과정에서 배울 수 있습니다. _ 당신이 직접 해결하지 못한다면, 당신은 간단한 예제로 빠른 도움을 얻을 것입니다. _ – Phrogz

답변

92

당신은이 TXT의 내용이 숫자에 제한되지 않기 때문에 문자열로 점을 설정합니다, 파일의 선

dots = document.getElementById("txt").value; 

있습니다. 간단한

dots = parseInt(document.getElementById("txt").value); 
+1

바로 가기 ... 도트 = + document.getElementById ("txt"). 값 – Tracker1

+4

parseInt (..., 10) 또한 항상 기수를 사용하십시오 ... 온전한 검사 ... if (! dots || dots <1)도 순서대로있을 수 있습니다 ... – Tracker1

+1

더하기 Increment 연산자를 사용합니다. VAR = VAR + 1 대신 VARIABLE ++를 사용합니다. – gnganpath

44

:

dots = dots*1+5; 

점은 숫자로 변환됩니다 int로 변환하는

은 라인을 변경합니다.

+24

그보다 간단하면'dots = + dots + 5'가됩니다. –

+0

나중에보기가 쉽지 않습니다. – atilkan

15

절대 잊지 마십시오. 십진수를 사용하는 경우 parseFloat();을 사용하십시오.

+1

그리고 float가 10 진수 데이터 타입이 아니라는 것을 잊지 마세요. –

5

parseInt() 나는 부분 만보고

.... 트릭을 할해야

var number = "25"; 
var sum = parseInt(number) + 10; 
var pin = number + 10; 

당신에게주는이을 downvoted 마지막으로 이후 업데이트

sum == 35 
pin == "2510" 

http://www.w3schools.com/jsref/jsref_parseint.asp

-3

var dots = 5 
function increase(){ 
    dots = dots+5; 
} 

이전에 표시되었지만 나중에 txt 상자가 변수 dots을 피드하는 것으로 나타났습니다. 이 때문에 입력을 "정화"하여 악의적 인 코드가 아닌 정수 만 있는지 확인해야합니다.

이렇게하는 한 가지 쉬운 방법을 확인하기 위해 onkeyup() 이벤트와 텍스트 상자를 구문 분석하는 것입니다

숫자 문자가 : 값이 아닌 경우 이벤트가 오류를주고 마지막 문자를 지우 것이다

<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> 

분명히 당신은 정규식으로 그 일을 할 수 있지만, 나는 게으른 방법을 사용했습니다.

다음 숫자 만 상자에있을 수 있다는 것을 알게 될 것입니다 때문에, 당신은 단지 eval() 사용할 수 있어야합니다 :이 또한 당신을 위해 작동

dots = eval(dots) + 5; 
+1

'e 점()'은'dots '이 사용자 입력 값이면 위험합니다. 특히 저장된 입력에서 나온 경우. [더 많은 정보] (http://stackoverflow.com/a/13167699/118697) –

+0

@ChadLevy 좋은 링크를 읽어 주셔서 감사합니다. - 이걸 가져 오긴했지만,이 경우 우려는 부적절했습니다. 사용자 입력으로부터. '도트 (dots) '는 증가되고 있으며 단지 문자열로 오인되고있는 정의 된 변수입니다. 그래서 나는 사악한 스크립트 주입의 잠재력을 가질 수있는 사용자/저장된 입력으로부터 가볍게 사용되면 안된다는 대답을 얻을 수 있습니다. 그러나이 경우에도 그러한 주입은 수학 오류/예외를 유발할 수 있습니다. 따라서 어느 경우에도 아무 것도하지 않습니다. – vapcguy

+0

'eval()'이 너무 위험하다고 생각하기 때문에 downvoting하는 사람들은 OP가 사용하고있는 컨텍스트에서 코드를 봐야합니다.이 경우 텍스트가 아닌 입력이나 다른 형태의 사용자 입력이 아닌 숫자 입력이 아닌 입력을 사용하기 때문에 그렇지 않습니다. 내가 downvotes downvote 수 있었으면 좋겠다! – vapcguy

3

을 :

dots -= -5; 
+0

훌륭한 첫 번째 var를 다시 작성할 필요가 없습니다. – bormat

1

난 이 답변을 여기에 표시하지 않기 때문에이 답변을 추가하십시오.

한 가지 방법은 값 앞에 '+'문자를 넣어하는 것입니다

예 :

var x = +'11.5' + +'3.5' 

나는 이것이 가장 간단한 방법으로 발견 한 15

X === 이 경우

라인 :

dots = document.getElementById("txt").value; 

숫자로 강제

dots = +(document.getElementById("txt").value); 

변경 될 수

참고

+'' === 0 
+[] === 0 
+[5] === 5 
+['5'] === 5 
관련 문제