Fatal编程技术网

Javascript 每个div中的随机数

javascript html random

Javascript 每个div中的随机数,javascript,html,random,numbers,Javascript,Html,Random,Numbers,我正在尝试编码它，这样当我点击每个div时，随机数就会出现，而不是当选择一个div时，所有div都会出现。对，同样的随机数同时出现在我所有的div中。我也有随机的颜色，当每个div被选中时会单独显示。随机颜色法正是我想要数字做的。下面是我的代码。我是Jquery的新手，已经搜索过并试图找到这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

我正在尝试编码它，这样当我点击每个div时，随机数就会出现，而不是当选择一个div时，所有div都会出现。对，同样的随机数同时出现在我所有的div中。我也有随机的颜色，当每个div被选中时会单独显示。随机颜色法正是我想要数字做的。下面是我的代码。我是Jquery的新手，已经搜索过并试图找到这个

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


第#节包装{
宽度：500px；
高度：500px；
保证金：0自动；
填充：0px；
-webkit边界半径：20px；
-moz边界半径：20px；
边界半径：20px；
boxshadow：
-莫兹盒阴影：5px 5px 5px#000；
盒影：5px 5px 5px#000；
-网络工具包盒阴影：5px 5px 5px#000；
背景：#3A4E7E；
}
第1部分{
宽度：100px；
高度：100px；
利润率：10px；
填充：10px；
边框：1px实心#fff；
位置：相对位置；
浮动：左；
背景：玉米丝；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
boxshadow：
-moz盒阴影：0px 2px 2px#000；
盒影：0px 2px 2px#000；
-网络工具包盒阴影：0px 2px 2px#000；
顶部：40px；
左：40px；
文本对齐：居中；
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：36px；
颜色：#666；
垂直对齐：中间对齐；
}
身体{
填充：10%；
}
/*第2组{
宽度：100px；
高度：100px；
边际：0px；
填充：0px；
边框：1px实心#fff；
位置：相对位置；
浮动：左；
背景：红色；
}*/


$（文档）.ready（函数（）{
$（'div'）。每个（函数（）{
$（'div'）。单击（函数（）{
var hue='rgb（+（数学地板（（256-199）*数学随机（））+200）+'，'+（数学地板（（256-199）*数学随机（））+200）+'，'+（数学地板（（256-199）*数学随机（））+200）+'；
$（this.css（“背景色”，色调）；
});
});
setInterval（函数（）{
$（'div.color1'）。单击（函数（）{
变量编号=1+数学楼层（数学随机（）*50）；
$（'div.color1'）。文本（数字）；
}, 0);
});
});
您使用的选择器选择事件绑定的所有
div
元素，而不是访问单击的特定元素

更改此项：

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

另外，您正在使用
setInterval
以0为周期运行该代码，这意味着它将以尽可能快的速度反复绑定click事件。当您单击元素时，您将调用事件处理程序数千次。一段时间后，浏览器将有数百万个事件处理程序绑定到元素，并将崩溃。删除绑定click事件的代码周围的
setInterval
代码

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

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

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