jquery foreach div 随机颜色

2023-12-08

我的函数有这个问题,我试图将一些颜色(预定义)随机化到我的 div 中,并在每次使用颜色时进行计数。

这是我的html:

<div class="change_color2" id="rand_1"></div>
<div class="change_color2" id="rand_2"></div>
<div class="change_color2" id="rand_3"></div>
<div class="change_color2" id="rand_4"></div>
<div class="change_color2" id="rand_5"></div>

一些 div 将具有随机颜色作为背景:

<div class="change_color"></div>

这是我的js代码:

function colorfy_me() {
    var myColors = [
        '#543326', '#5EC631', '#A9D7DC', '#003946', '#E0D8C8'
    ];
    shuffleArray(myColors);
    var i = 1;
    $('div.change_color').each(function() {
        $(this).css('background-color', myColors[i]);
        i = (i + 1) % myColors.length;
    });
}    

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

但问题是它会随机更改集合中前 5 个 div 的颜色。 而且我不知道如何计算每种颜色。

I have 创建了一个小提琴


我最终得到了这个:http://jsfiddle.net/GXVUE/1/

它只是将统计数据输出到 class="stats" 的 div 中。

(function($){

  var colors = ['#f00', '#0f0', '#00f']
    , colorsUsed = {}
    , $divsToColor = $('.random-color');

  $divsToColor.each(function(){

    var $div = $(this)
      , randomColor = colors[ Math.floor( Math.random() * colors.length ) ];

    $div.css('backgroundColor', randomColor);

    // Keeps track of how often a color is used...
    if( colorsUsed[randomColor] ){
        colorsUsed[randomColor]++;
    } else {
        colorsUsed[randomColor] = 1;
    }

  });

  // This reads through the stats.
  $('.stats').html(function(){
      var out = [];
      for( var color in colorsUsed ){
          out.push( color + ' was used ' + colorsUsed[color] + ' times.' );
      }
      return out.join('<br>');
  });

})(jQuery);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery foreach div 随机颜色 的相关文章

  • 添加之前检查班级是否已分配

    在 jQuery 中 是否建议在添加该类之前检查该类是否已分配给元素 它会产生任何影响吗 例如
  • 如何在 Yii 框架中使用 jQuery?

    如何在 yii 中使用 jquery javascript 如何在 yii 中使用我的脚本 为什么这与以其他方式使用 jQuery 有什么不同 如何在yii中使用jquery 如上所述 您可以注册新的脚本块 也可以注册新的外部脚本文件 您还
  • 在 GeoJson 数据接收到的 Google 地图多边形上放置标签

    我想将带有信息的标签 或带有标签的 div 放在由下面的代码片段绘制的多边形上 样式属性已成功应用于要素 多边形类型 有谁知道如何向该特征添加文本并将其显示在多边形的中心 function handleGeoJson data map da
  • 使用 Ajax 和 PHP 上传图像

    我想将图像上传到我的服务器 并控制 HTML 代码中的 PHP 回显 为此 我想使用 jQuery Ajax 但我不知道如何使用 Ajax 将图像发送到 PHP 这是一个大学项目 所以我不能使用任何类型的插件 我的实际代码 HTML
  • 使用 JavaScript 中的 mousemove 事件在画布内的图像上绘制矩形

    我正在尝试使用 mousemove event 在画布内的图像上绘制一个矩形 但由于clearRect 我在图像上得到了矩形 并且矩形中填充了颜色 谁能帮我解答一下 如何在图像上绘制一个只有边框的矩形 下面是我实现它所遵循的代码 var c
  • 使用客户端脚本处理 RadioButtonList

    我有一个 ASP RadioButtonList 我想在客户端处理它 该网页包含一个带有单选按钮组和关联的 GridView 的表单 当用户选择单选按钮之一时 我想隐藏或显示 GridView 上的行 这些行必须隐藏 而不是通过回发从数据集
  • 表中偶数/奇数行的 jQuery 选择器

    第一个代码块中的代码是源代码 源码运行后 代码将被更改 参见第二个代码块 我希望标签的类别 即 偶数 和 奇数 仅显示在 table1 中 然而 目前嵌套表 即 table2 的每个标签也有 偶数 和 奇数 类别 谁能帮我吗 提前致谢 第一
  • jQuery beforeScroll 事件

    jQuery 中有 beforeScroll 事件吗 或者这种类型的事件是否可以复制 我们有一个场景 需要在带有 Overflow scroll 的 div 滚动之前执行一个事件 使用 scroll 事件的问题是 该事件是在 div 滚动之
  • 使用 jQuery 更改 iFrame 的 HTML?

    有没有办法使用 jQuery 操作来自同一域的 iframe 的 HTML 谢谢您的帮助 您必须解析 iframe 内容 frameid contents find div html My html 更多这里 http api jquery
  • Opera Mobile 不允许 jQuery 点击

    我一直在测试基础 CSS 框架 并且非常喜欢该框架提供的自定义表单元素 我建了一个页面 http eventgrapple com home 测试框架 它运行良好谷歌浏览器 http en wikipedia org wiki Google
  • 由于内容安全策略指令,扩展程序拒绝加载脚本

    以下是我的 HTML 代码 Scripts HTML
  • 如何获取 CSS 旋转元素的实际(非原始)高度

    我需要获取几个不同元素的实际高度 为了精确的自定义工具提示定位 并且其中一些元素 不是全部 被旋转 elem outerHeight 返回原始高度 而不是实际显示的高度 这是一个非常简单的例子 http jsfiddle net NPC42
  • 使用西里尔字母的正则表达式

    我有一个用于文本区域字段中字数统计的 jQuery 函数 此外 它排除所有用 三重括号 封闭的单词 它对于拉丁字符效果很好 但对于西里尔字母句子有问题 我认为错误部分与正则表达式有关 field val replace g match b
  • JQuery Slide切换显示类型

    我使用 jQuery SlideToggle 来显示隐藏的表格行 但它将显示样式设置为阻止 我需要显示表格行 我有什么想法可以做到这一点吗 提前致谢 我找到了解决此问题的方法 检查显示是否已设置为阻止 如果元素已切换为显示 如果是 则设置为
  • 元素上的 jQuery touchSwipe 事件阻止滚动

    我有一些清单div元素垂直排序 使用jQuery TouchSwipe 插件 https github com mattbryson TouchSwipe Jquery Plugin添加了滑动事件来捕获左右滑动 想法是通过向左或向右滑动来从
  • 是否可以从“GET”请求中检索 MS/延迟? (Javascript/Jquery)

    我目前正在使用 jquery 发出一些 getjson 请求 他们是获取请求 GET http localhost MySite JSON http localhost MySite JSON 现在您可以在 Firebug 中观看请求的触发
  • 如何在 Android 设备(平板电脑和手机)方向更改时获得正确的窗口宽度

    我正在尝试使用 jquery 函数计算 Android 设备方向变化时的窗口宽度 window outerWidth true 此计算给出了两个方向变化的正确宽度iphone and ipad但在安卓中不行 如果我最初以横向模式或纵向模式加
  • Rails 6 webpack 抛出“未捕获的引用错误:$未定义”

    大家好 我最近开始使用 ruby 2 6 5 开发 Rails 6 由于 Rails 6 引入了 webpack 所以我尝试使用 webpack 加载我的 js 文件 尽管我已经在 appliation js 中需要了 jquery 但我仍
  • 使用 jQuery 将值发送到 $_GET

    我正在使用一个 PHP 脚本 该脚本正在通过 GET 等待两个值 我正在尝试使用 jQuery 传递这两个值 而这正是我不太擅长的地方 这是我得到的代码 有人能指出我正确的方向吗 谢谢 function xrate id rating aj
  • 将 jQuery 与 Batman.js 结合使用

    我正在尝试使用 Batman js 并且我想将 jQuery 与它一起使用来实现一些标准的 Ajax 和动画功能 我正在按照位于的安装说明进行操作http batmanjs org download html http batmanjs o

随机推荐

  • hibernate envers:合并和 saveOrUpdate

    我正在开发 spring hibernate envers 应用程序 经过大量谷歌搜索后 事情终于对我有用 但我仍然有几个问题 早些时候我正在使用saveOrUpdate为了 保存或更新实体 但 当与恩弗斯一起工作时 它是 扔一个nonUn
  • Windows 应用程序中 DataGridView 中的货币格式

    我无法在 DataGridView 上显示货币格式 你们能看一下这段代码吗 private void dataGridView1 DataBindingComplete object sender DataGridViewBindingCo
  • R 函数(如 str()、summary() 和 head())的 Python pandas 等价物是什么?

    我只知道describe 功能 还有其他类似的功能吗str summary and head 在熊猫中info 方法创建与 R 非常相似的输出str gt str train data frame 891 obs of 13 variabl
  • 单击时循环遍历数组

    我想知道如何在单击时循环遍历数组中的值 当显示数组的最后一个值时 下一次单击应再次显示数组的第一个值 我认为我已经很接近了 但是当我到达数组的最后一个值时 我必须单击两次才能再次显示第一个值 这是我的 JavaScript var myAr
  • PHP - 使用explode()函数将值分配给关联数组

    我想分解一个字符串 但结果数组具有特定的字符串作为键而不是整数 IE 如果我有一个字符串 Joe Bloggs 我想将其分解 以便我有一个关联数组 例如 arr first name Joe arr last name Bloggs 目前
  • 在 vscode 中安装 ionide-fsharp 时出现错误“未找到中央目录记录签名结尾”

    我已经安装了 VS Code 版本 1 8 1 机器是Windows 7 64位 安装 ionide fsharp 扩展时 出现错误 未找到中央目录记录签名末尾 VS Code 的 1 7 2 版本似乎可以工作 但是这个问题似乎在 1 8
  • android 对话框上的轮式选择器

    我想从旋转轮获取文本作为密码 您能给我任何用于从中获取文本的旋转轮的示例吗 我没有得到任何好的例子 提前致谢 我试图得到这个旋转轮 最后我已经构建了我的轮子来从用户那里获取文本 我给出了四个整数的例子 package com example
  • 在ggplot2中使用facet_grid()函数时,如何使用labeller()函数让列总计出现在facet的标签中

    这是一个数据集 可以为我的问题提供背景信息 library tidyr library dplyr library ggplot2 set seed 1 dfr2 lt tibble x1 factor sample letters 1 3
  • 如何在 BitmapFactory 中保持图像质量相同

    我已将位图图像转换为字符串以保存它 Bitmap photo extras getParcelable data ByteArrayOutputStream baos new ByteArrayOutputStream photo comp
  • 将许多子目录拆分为一个新的、单独的 Git 存储库

    这个问题与 将许多子目录分离到新的单独的 git 存储库中 Git 子树和多个目录 我不想分离单个子目录 而是想分离几个子目录 例如 这是我的文件夹结构 app1 file1 file2 folder1 folder2 app2 file3
  • 来自输入文件的动态数组

    我是初学者 所以如果这确实是一个愚蠢的问题 我很抱歉 我的任务是从输入文件中打印出动态数组 我尝试用谷歌搜索它 发现了一些类似的问题 但答案都是 使用向量 等 但我们还没有学到这些 还说必须使用函数 这就是我想出的 include
  • 如何从 PL/pgSQL 写入磁盘上的文件?

    我想做相当于 c 或 php fopen 和 fwrite 的操作 我不想将表转储到磁盘 我正在尝试在开发过程中进行一些调试日志记录 您可以在 postgres 函数中使用 plpythonu f open f write f close
  • Bootstrap 下拉菜单隐藏在模式中

    您好 我正在尝试获取引导下拉列表以显示模型内的列表 我想我要说的是 当我单击下拉菜单时 它会展开 但如果列表比模型长 它将切断列表的其余部分 导致用户无法选择所有选项 我一直在谷歌搜索并看到这篇文章点击这里这与我的问题非常相似 然而 他们说
  • Pandas 使用正则表达式分隔符读取 csv

    我一直在尝试读取这样的自定义 csv 文件 6 Rotterdam NLD Zuid Holland 593321 19 Zaanstad NLD Noord Holland 135621 214 Porto Alegre BRA Rio
  • java 类型推断是如何工作的?

    有人可以解释一下以下语法是如何工作的吗 public static
  • 有关 PHP 中网络爬虫的错误

    我正在尝试使用 PHP 创建一个简单的网络爬虫 它能够爬行 edu 域 并提供父级的种子 url 我使用了简单的html dom来实现爬虫 而一些核心逻辑是我自己实现的 我将发布下面的代码并尝试解释这些问题 private function
  • ios 在“确认您的应用内购买”对话框中显示不同的价格

    为 iOS 应用添加应用内购买 我可以成功购买该产品 但 确认您的应用内购买 对话框始终显示与我格式化的本地化价格相比的额外价格 示例 产品的本地化价格为 39 99 欧元 但在确认对话框中 产品的价格增加到 41 73 欧元 预先感谢您提
  • Maven的pom.xml中的pluginManagement是什么?

    这是我的 pom 文件的一个片段
  • 分区:如何在每个分区后添加等待

    我有一个每分钟接受 20 个请求的 API 之后我需要等待 1 分钟才能查询它 我有一个项目列表 通常超过 1000 个 我需要从 API 查询其详细信息 我的想法是我可以使用Partitioner将我的列表分为 20 个项目 请求 但很快
  • jquery foreach div 随机颜色

    我的函数有这个问题 我试图将一些颜色 预定义 随机化到我的 div 中 并在每次使用颜色时进行计数 这是我的html div class change color2 div div class change color2 div div c