onclikの後に関数を読み込む方法を理解しようとしています

<!DOCTYPE html> 
<html> 
<head> 
    <script src="jquery-2.1.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" href="webpage.css"> 
    <style type="text/css"> 
     #myCanvas {left: 500px; top:500px; 
     border: 2px solid black;} 
    </style> 
    <title>Canvas Basics</title> 
</head> 
<body> 

<canvas id="myCanvas" width="750" height="250"> 

</canvas> 
<br> 
<span id="count">3</span>seconds 
<button id="next">Play</button> 

</body> 
</html> 

<script type="text/javascript"> 
    var can; 
    var ctx; 
    var finish=false; 
    function ranNum(max) 
    { 
     return Math.ceil(Math.random()*max)+1; 
    } 
window.onclick= function() { 
    (function() { 
     var counter = 3; 
     setInterval(function() { 
      counter--; 
      if (counter >= 0) { 
       span = document.getElementById("count"); 
       span.innerHTML = counter; 
      } 
      if (counter === 0) { 
       alert('sorry, out of time'); 
       clearInterval(counter); 
      } 
     }, 1000); 
    })(); 
} 
    $(document).ready(function(){ 
     var nextBtn = document.getElementById('next'); 
     nextBtn.addEventListener('click',next,false); 

     can = document.getElementById('myCanvas'); 
     ctx = can.getContext('2d'); 
     x1 = 0; 
     x2 = 0; 
     x3 = 0; 
     x4 = 0; 

     ctx.beginPath(); 
     ctx.moveTo(can.width-100, 0); 
     ctx.lineTo(can.width-100, 400); 
     ctx.stroke(); 


     ctx.fillStyle="red"; 
     ctx.fillRect(x1,50,50,25); 

     ctx.fillStyle="blue"; 
     ctx.fillRect(x2,100,50,25); 

     ctx.fillStyle="orange"; 
     ctx.fillRect(x3,150,50,25); 

     ctx.fillStyle="green"; 
     ctx.fillRect(x4,200,50,25); 

     function next() 
     { 
      var a = ranNum(10); 
      var b = ranNum(10); 
      var c = ranNum(10); 
      var d = ranNum(8); 

      if (x1 <200) { 
       ctx.clearRect (0,0, can.width, can.height); 
      } 
      else { 
       ctx.clearRect (120,0, can.width, can.height); 
      } 

      //ctx.clearRect (0,0, can.width, can.height); 
      x1+= a; 
      x2+=b; 
      x3+=c; 
      x4+=d; 
      ctx.fillStyle="red"; 
      ctx.fillRect(x1,50,50,25); 

      ctx.fillStyle="blue"; 
      ctx.fillRect(x2,100,50,25); 

      ctx.fillStyle="orange"; 
      ctx.fillRect(x3,150,50,25); 

      ctx.fillStyle="green"; 
      ctx.fillRect(x4,200,50,25); 



      ctx.beginPath(); 
      ctx.moveTo(can.width-100, 0); 
      ctx.lineTo(can.width-100, 400); 
      ctx.stroke(); 

      //context.font="16px Ariel"; 
      //context.fillStyle="black"; 

      if (finish == false) { 
       if (x1 > 625) { 
        //ctx.fillText("Red Winner",10,80); 
        winner(x1); 
       } 
       else if (x2 > 625) { 
        //ctx.fillText("Blue Winner",10,80); 
        winner(x2); 
       } 
       else if (x3 > 625) { 
        //ctx.fillText("Orange Winner",10,80); 
        winner(x3); 
       } 
       else if (x4 > 625) { 
        //ctx.fillText("Green Winner",10,80); 
        winner(x4); 
       } 
       //tTimeout(next, 40); 
      } 



      setTimeout(next, 40); 
     } 

     function winner(temp) 
     { 

      ctx.fillStyle= "black"; 

      finish=true; 
      ctx.font="30px Arial"; 

      ctx.fillText("Winner!", 10,80); 
      //alert(x1,x2,x3,x4); 
      switch(temp) 
      { 
       case x1: 
        ctx.fillStyle="red"; 
        ctx.fillText("Red", 10,150); 
        break; 
       case x2: 
        ctx.fillStyle="blue"; 
        ctx.fillText("Blue", 10,150); 
        break; 
       case x3: 
        ctx.fillStyle="orange"; 
        ctx.fillText("Orange", 10,150); 
        break; 
       case x4: 
        ctx.fillStyle="green"; 
        ctx.fillText("Green", 10,150); 
        break; 
       default: 
        alert(""); 

      } 
     } 


    }); 
</script>

私は数字のグリッドを作成するコードを持っています。数字をクリックすると緑に変わり、それを再度クリックすると赤に変わります。私はすべてを緑色に変えるボタンと赤色に変えるボタンを作る方法を知る必要があります。これ以前の部分は、ボタンをクリックしてカウントダウンした後にレースを開始しようとするだけでカウントされません0に達する？onclikの後に関数を読み込む方法を理解しようとしています

出典

2016-04-19 john handcock

追加情報サンプルhtmlやchangeColor関数などの関数？ – yk11

私はそれをしようとしている方法を知っていないとそれはちょうど私がテキストを間に追加する必要があると言うことを維持する –

任意のアイデア？時間は重要です入力があれば –

あなたは次の操作を行うことができます：で始まり、すべてのCSS

変更を使用して、ボタンを押すのredとクラス

$(".myDiv").on("click", function() { 
    if ($(this).hasClass("black")) { 
     $(this).addClass("green"); 
    } else if ($(this).hasClass("green")) { 
     $(this).addClass("red"); 
    } else if ($(this).hasClass("red")) { 
     $(this).addClass("black"); 
    }

色を割り当てる

使用blackクラスをクラスを使用するボタン
```
$(".green").removeClass("green").addClass("red"); 
```

出典

2016-04-19 01:38:51 yk11

今私はちょうど2つのボタンを追加する必要がありますカレンダーの緑の上にすべての日を回すか、または2番目のものがクリックされた場合、それらはすべて赤色になります –

各「暦日」要素にクラスを追加します。例：

<div class="myDiv">1</div>

「myDiv」の代わりに、わかりやすいクラス名を使用することをおすすめします。それらのすべての色を変更する

$(".day-on-calendar")

そして：

<div class="day-on-calendar">1</div>

すると、そのクラスを持つすべての要素を選択するためにあなたがクリックしたときに

$(".day-on-calendar").css("color", "green");

は、色を変更するには特定の要素：

<button id="all-green-button">Turn all the dates green</button> 

$("#all-green-button").click(function(){ 
    $(".day-on-calendar").css("color", "green"); 
});

出典

2016-04-19 04:29:09 jkdev

関連の回答：http://stackoverflow.com/ a/2001383/3345375 – jkdev

私は自分のコードに置く場所を知りません。月の日はdivを設定していません。コード全体を変更する必要があります。 –

HTMLコードをページに表示したい場所に置いてください。 jQueryコードは、document.ready関数のどこにでも置くことができます。 – jkdev

onclikの後に関数を読み込む方法を理解しようとしています

答えて

関連する問題