我基本上製作了一個程序,根據用戶想要在屏幕上顯示多少球來生成隨機球數,然後用戶必須按順序鍵入球數,如果他猜對了,他會贏,否則他輸。但是,jQuery對我來說有點困惑。我如何確切地將x[i]
變量的值分配給程序底部的jQuery?噢,還有,球和輸入欄的數量應該根據用戶輸入的最大球數來顯示,但是真的有可能使用html和jQuery數組嗎?因此,如果用戶鍵入3,只顯示3個輸入,或者當他鍵入6時,只顯示6個?謝謝如何在jQuery中調用javascript變量?
<html>
<head>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
window.onload=draw;
function draw(){
var canvas= document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var id;
var x;
var y;
var r;
var i;
var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},{"id":17,"x":450,"y":190,"r":40},{"id":18,"x":535,"y":190,"r":40},{"id":19,"x":623,"y":190,"r":40},{"id":20,"x":710,"y":190,"r":40}];
var texts=[];
var i;
for(i=0;i<balls.length;i++){
texts[i]=i;
}
var choose;
var x=[];
choose=parseFloat(prompt("enter the number of balls u want to see"));
for (i=0; i<=choose; i++) {
x[i]=Math.floor((Math.random() * 19) + 1);
for (var k=0; k<balls.length; k++) {
var b=balls[k];
if(b.id==x[i]){ /*here is the issue*/
ctx.fillStyle="#800000";
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.arc(b.x,b.y,b.r,0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillText(b.id, b.x, b.y);
}
}
}
}
draw()
</script>
<body>
<div id=leftside" width="900" height="1000" style="border: 2px solid #000000">
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000">
</canvas>
<div id="rightside" width="300" height="800" style="border 2px solid #000000; float: right;">
<<form name="guessForm" id="guessForm" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber" id="userNumber">
<input type="button" id="verifyBtn" value="verify">
</form>
<form name="guessForm" id="guessForm2" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber2" id="userNumber2">
<input type="button" id="verifyBtn2" value="verify">
</form>
<form name="guessForm" id="guessForm3" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber3" id="userNumber3">
<input type="button" id="verifyBtn3" value="verify">
</form>
<form name="guessForm" id="guessForm4" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber4" id="userNumber4">
<input type="button" id="verifyBtn4" value="verify">
</form>
<form name="guessForm" id="guessForm5" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber5" id="userNumber5">
<input type="button" id="verifyBtn5" value="verify">
</form>
<form name="guessForm" id="guessForm6" method="POST" action="">
<label>Enter a number: </label>
<input type="text" name="userNumber6" id="userNumber6">
<input type="button" id="verifyBtn6" value="verify">
</form>
<hr>
the result is:
<div id="result" style="font-size: 14px"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#verifyBtn").click(function(){
if($("#userNumber").val()==x[0]){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x);
}
})
$("#verifyBtn2").click(function(){
if($("#userNumber2").val()==x[1]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ systemNumber);
}
})
$("#verifyBtn3").click(function(){
if($("#userNumber3").val()==x[2]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x);
}
})
$("#verifyBtn4").click(function(){
if($("#userNumber4").val()==x[3]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x[3]);
}
})
$("#verifyBtn5").click(function(){
if($("#userNumber5").val()==x[4]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x[4]);
}
})
$("#verifyBtn6").click(function(){
if($("#userNumber6").val()==x[5]){
$("#result").css({color:'green'});
$("#result").text("yeah");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+ x[5]);
}
})
})
</script>
</html>
小旁註輸入正確的數字:' var i'被聲明兩次。 –
Firstable - 你的'x變量'不能在jQuery部分實現。 – mamosek