各divの乱数

私はそれをコード化しようとしていますので、1つのdivが選択されたときにすべてのdivをクリックすると乱数が表示されます。右の同じ乱数は、すべてのdivに同時に表示されます。私はまた、各divが選択されたときに個別に表示されるランダムな色を持っています。無作為の色の方法は、私が数にしたいものです。以下は私のコードです。私はJqueryを初めて使い、これを見つけようとしました。各divの乱数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
    section#wrapper{ 
     width:500px; 
     height:500px; 
     margin:0 auto; 
     padding:0px; 
     -webkit-border-radius:20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    boxshadow: 
     -moz-box-shadow: 5px 5px 5px #000; 
     box-shadow:5px 5px 5px #000; 
     -webkit-box-shadow: 5px 5px 5px #000; 
      background:#3A4E7E; 
    } 
    div.color1 { 
    width:100px; 
    height:100px; 
    margin:10px; 
    padding:10px; 
    border:1px solid #fff; 
    position:relative; 
    float:left; 
    background:cornsilk; 
    -webkit-border-radius:10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    boxshadow: 
     -moz-box-shadow: 0px 2px 2px #000; 
     box-shadow:0px 2px 2px #000; 
     -webkit-box-shadow: 0px 2px 2px #000; 
    top:40px; 
    left:40px; 
    text-align:center; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-size:36px; 
    color:#666; 
    vertical-align:middle; 
} 
body{ 
    padding: 10%; 
} 
/*div.color2 { 
    width:100px; 
    height:100px; 
    margin:0px; 
    padding:0px; 
    border:1px solid #fff; 
    position:relative; 
    float:left; 
    background:red; 
}*/ 
</style>

<script type="text/javascript" src="../project 1/jquery-1.4.3.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('div').each(function() { 
      $('div').click(function() { 
       var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')'; 
       $(this).css("background-color", hue); 

      }); 
     }); 
     setInterval(function() { 

      $('div.color1').click(function() { 
       var number = 1 + Math.floor(Math.random() * 50); 
       $('div.color1').text(number); 

      }, 0); 
     }); 
    }); 
</script>

</head> 
<body> 
    <section id="wrapper"> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
     <div class="color1"></div> 
    </section> 
</body> 
</html>

出典

2011-08-10 Jonathan

あなたはイベントのために、すべてのdiv要素結合、代わりにクリックされた特定の要素へのアクセスを選択し、同じセレクタを使用しています。また、あなたはそれが何度もクリックイベントを結合することを意味し、0の期間でsetIntervalを使用してそのコードを実行している

$('div.color1').click(function() { 
    var number = 1 + Math.floor(Math.random() * 50); 
    $(this).text(number); 
}

：へ

$('div.color1').click(function() { 
    var number = 1 + Math.floor(Math.random() * 50); 
    $('div.color1').text(number); 
}

：

変更、これをできるだけ早く。何千ものイベントハンドラを呼び出す要素をクリックしたとき。しばらくすると、ブラウザには数百万のイベントハンドラが要素にバインドされ、クラッシュします。クリックイベントをバインドするコードの周りにsetIntervalコードを削除します。

出典

2011-08-10 21:49:36 Guffa

ありがとうございます！それは素晴らしい作品です。 – Jonathan

各divの乱数

答えて

関連する問題