点击后将背景更改为随机颜色 - Javascript / jQuery

时间:2015-09-30 00:56:53

标签: javascript jquery css

每次点击导航栏链接时,我都试图将我的身体背景颜色更改为随机颜色。

我得到它以便在第一次点击链接时随机颜色发生变化 - 但是当点击其他链接时,没有任何变化。

任何提示?

HTML:

$(function() {

     var colors = ['red', 'blue', 'green', 'grey'];

     var randColor = colors[Math.floor(Math.random()*colors.length)];

     $('.nav a').click(function() {
         $('body').css('background-color', randColor);
     });
});

JS:

            <asp:Dropdownlist ID="DropDownList1" runat="server" Width="136px" AutoPostBack="true" OnSelectedIndexChanged="jobRun_SelectedIndexChanged">
        </asp:Dropdownlist>

2 个答案:

答案 0 :(得分:3)

因为你只生成一个随机数并继续使用它,所以在click方法中移动它。

答案 1 :(得分:0)

在每次点击中你需要找到一个新的随机颜色,在你的情况下,randColor变量只在dom就绪时更新一次,在点击手柄中始终使用相同的值。

&#13;
&#13;
$(function() {

  var colors = ['red', 'blue', 'green', 'grey'],
    color;

  $('.nav a').click(function() {
    var randColor;
    do {
      randColor = colors[Math.floor(Math.random() * colors.length)];
    } while (color == randColor);
    $('body').css('background-color', randColor);
    color = randColor;
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul id="show">
    <li id="link1"><a href="#portfolio">Portfolio</a></li>
    <li id="link2"><a href="#about">About</a></li>
    <li id="link3"><a href="#email">Contact</a></li>
  </ul>
  <hr/>
</div>
&#13;
&#13;
&#13;