每个 div 中的随机数

发布于 2024-11-29 02:53:07 字数 2957 浏览 0 评论 0原文

我正在尝试对其进行编码，以便当我单击每个 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>

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

原文

I am trying to code it so random numbers will show up when I click on each div and not all divs when one div is selected. Right the same random numbers show up in all my divs at the same time. I also have random colors that show up individually when each div is selected. The random color method is exactly what I want the numbers to do. Below is my code. I'm new to Jquery and have searched to try to find this.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绿阴红影里的.如风往事 2024-12-06 02:53:07

您使用的选择器为事件绑定选择所有 div 元素，而不是访问单击的特定元素。

将其更改

$('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);
}

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

You are using the same selector that selects all the div elements for the event binding, instead of accessing the specific element that is clicked.

Change this:

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

to:

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

Also, you are running that code using setInterval with a period of 0, that means that it will bind the click event over and over again as fast as it can. WHen you click the element you will be calling the event handler thousands of times. After a while the browser will have millions of event handlers bound to the elements, and will crash. Remove the setInterval code around the code that binds the click event.

回复收藏 0 原文

~没有更多了~