Javascript 从用户复选框选择生成随机图像

嗨，我有两套代码。第一封信是由这个网站上的一位好心人写的，并根据用户选中的选项生成一封随机信

第二个是我在网上找到的。它允许您将图像链接转换为可以选中和取消选中的复选框

我正在尝试将这两个代码结合起来，这样我就可以让程序根据用户选中的一组图像（同样不是字母）生成一个随机图像（而不是字母）。简言之，我试图得到第一组使用图像而不是字母的代码

然后，我要做的最后一件事是在每个图像下面添加一个范围滑块，如so（）。我希望用户能够使用滑块在最终随机化中“加权”每个选中图像的频率（范围为0到10）

以下是第一个以运行形式运行的程序：

以下是第二个正在运行的程序：

我试过直观地从一组复制和粘贴到另一组，但我似乎无法让它接近我想要的工作方式。至于权重部分，我感到茫然

感谢您的帮助，如果这超出了本网站的帮助范围，我深表歉意。

像这样吗

HTML代码：

<div id="formMatrix">
  <ul>
  </ul>

  <input id="randomSubmit" type="submit" value="Randomize">
</div>

<div id="result">
  <br />
  <br />
</div>

function updateTextInput(val, i) {
  document.getElementById('textInput-' + i).value = val;
}

document.addEventListener("DOMContentLoaded", function() {

  //put your image's links
  var images = ["http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];

  const form = document.getElementById("formMatrix");
  const submitBtn = document.getElementById("randomSubmit");
  const textResult = document.getElementById("result");

  for (var i = 0; i < images.length; i++) {
    form.getElementsByTagName('ul')[0].innerHTML += ("<li><input type='checkbox' id='chk-" + i + "' /><label for='chk-" + i + "'><img id='img-" + i + "' src='" + images[i] + "'/><div class='ranges'><input type='range' id='range-" + i + "' min='0' max='10' value='0' onchange='updateTextInput(this.value, " + i + ");' /><input type='text' disabled='disabled' id='textInput-" + i + "' value='0'/></div></label></li>");
  }

  // We check the values on the submit click
  submitBtn.addEventListener("click", function(e) {
    // Prevent it from *actually* submitting (e.g. refresh)
    e.preventDefault();
    // Grab *all* selected checkboxed into an array
    const items = document.querySelectorAll("#formMatrix input:checked");

    // Checking if it's not empty
    if (items.length > 0) {

      var array_items = [];

      // Convert object to array
      for (var i = 0; i < items.length; i++) {
        array_items.push(items[i]);
      }

      // Add items by freq
      for (var i = 0; i < array_items.length; i++) {
        var n = parseInt(document.getElementById('textInput-' + array_items[i].id.split('-')[1]).value);
        for (var j = 0; j < n; j++) {
          array_items.splice(i + 1, 0, array_items[i]);
        }
        i = (i + n);
      }

      // Setting a random index from items[0] to items[items.length]
      var imgid = ('img-' + array_items[Math.floor(Math.random() * array_items.length)].id.split('-')[1]);

      textResult.innerHTML = ("<label><img id='imgResult' src='" + document.getElementById(imgid).src + "'/></label>");

    } else {
      // If not, we alert
      alert("Please choose at least 1 image");
    }

  });
});

JS代码：

<div id="formMatrix">
  <ul>
  </ul>

  <input id="randomSubmit" type="submit" value="Randomize">
</div>

<div id="result">
  <br />
  <br />
</div>

function updateTextInput(val, i) {
  document.getElementById('textInput-' + i).value = val;
}

document.addEventListener("DOMContentLoaded", function() {

  //put your image's links
  var images = ["http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];

  const form = document.getElementById("formMatrix");
  const submitBtn = document.getElementById("randomSubmit");
  const textResult = document.getElementById("result");

  for (var i = 0; i < images.length; i++) {
    form.getElementsByTagName('ul')[0].innerHTML += ("<li><input type='checkbox' id='chk-" + i + "' /><label for='chk-" + i + "'><img id='img-" + i + "' src='" + images[i] + "'/><div class='ranges'><input type='range' id='range-" + i + "' min='0' max='10' value='0' onchange='updateTextInput(this.value, " + i + ");' /><input type='text' disabled='disabled' id='textInput-" + i + "' value='0'/></div></label></li>");
  }

  // We check the values on the submit click
  submitBtn.addEventListener("click", function(e) {
    // Prevent it from *actually* submitting (e.g. refresh)
    e.preventDefault();
    // Grab *all* selected checkboxed into an array
    const items = document.querySelectorAll("#formMatrix input:checked");

    // Checking if it's not empty
    if (items.length > 0) {

      var array_items = [];

      // Convert object to array
      for (var i = 0; i < items.length; i++) {
        array_items.push(items[i]);
      }

      // Add items by freq
      for (var i = 0; i < array_items.length; i++) {
        var n = parseInt(document.getElementById('textInput-' + array_items[i].id.split('-')[1]).value);
        for (var j = 0; j < n; j++) {
          array_items.splice(i + 1, 0, array_items[i]);
        }
        i = (i + n);
      }

      // Setting a random index from items[0] to items[items.length]
      var imgid = ('img-' + array_items[Math.floor(Math.random() * array_items.length)].id.split('-')[1]);

      textResult.innerHTML = ("<label><img id='imgResult' src='" + document.getElementById(imgid).src + "'/></label>");

    } else {
      // If not, we alert
      alert("Please choose at least 1 image");
    }

  });
});

函数updateTextInput（val，i）{
document.getElementById（'textInput-'+i）.value=val；
}
document.addEventListener（“DOMContentLoaded”，function（））{
//把你的图片的链接
变量图像=[”http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];
const form=document.getElementById（“formMatrix”）；
const submitBtn=document.getElementById（“随机提交”）；
const textResult=document.getElementById（“结果”）；
对于（var i=0；i”）；
}
//我们检查“提交”按钮上的值
submitBtn.addEventListener（“单击”，函数（e）{
//防止它*实际*提交（例如刷新）
e、 预防默认值（）；
//抓取*所有*选中复选框到数组中
const items=document.queryselectoral（#formMatrix输入：选中”）；
//检查它是否为空
如果（items.length>0）{
变量数组_项=[]；
//将对象转换为数组
对于（变量i=0；i

演示：

<div id="formMatrix">
  <ul>
  </ul>

  <input id="randomSubmit" type="submit" value="Randomize">
</div>

<div id="result">
  <br />
  <br />
</div>

function updateTextInput(val, i) {
  document.getElementById('textInput-' + i).value = val;
}

document.addEventListener("DOMContentLoaded", function() {

  //put your image's links
  var images = ["http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];

  const form = document.getElementById("formMatrix");
  const submitBtn = document.getElementById("randomSubmit");
  const textResult = document.getElementById("result");

  for (var i = 0; i < images.length; i++) {
    form.getElementsByTagName('ul')[0].innerHTML += ("<li><input type='checkbox' id='chk-" + i + "' /><label for='chk-" + i + "'><img id='img-" + i + "' src='" + images[i] + "'/><div class='ranges'><input type='range' id='range-" + i + "' min='0' max='10' value='0' onchange='updateTextInput(this.value, " + i + ");' /><input type='text' disabled='disabled' id='textInput-" + i + "' value='0'/></div></label></li>");
  }

  // We check the values on the submit click
  submitBtn.addEventListener("click", function(e) {
    // Prevent it from *actually* submitting (e.g. refresh)
    e.preventDefault();
    // Grab *all* selected checkboxed into an array
    const items = document.querySelectorAll("#formMatrix input:checked");

    // Checking if it's not empty
    if (items.length > 0) {

      var array_items = [];

      // Convert object to array
      for (var i = 0; i < items.length; i++) {
        array_items.push(items[i]);
      }

      // Add items by freq
      for (var i = 0; i < array_items.length; i++) {
        var n = parseInt(document.getElementById('textInput-' + array_items[i].id.split('-')[1]).value);
        for (var j = 0; j < n; j++) {
          array_items.splice(i + 1, 0, array_items[i]);
        }
        i = (i + n);
      }

      // Setting a random index from items[0] to items[items.length]
      var imgid = ('img-' + array_items[Math.floor(Math.random() * array_items.length)].id.split('-')[1]);

      textResult.innerHTML = ("<label><img id='imgResult' src='" + document.getElementById(imgid).src + "'/></label>");

    } else {
      // If not, we alert
      alert("Please choose at least 1 image");
    }

  });
});

我真的不明白的是幻灯片部分，你是说每个图像都可以有一个“加权”数字，这意味着数字越大，输出的频率就越高

更新1:

<div id="formMatrix">
  <ul>
  </ul>

  <input id="randomSubmit" type="submit" value="Randomize">
</div>

<div id="result">
  <br />
  <br />
</div>

function updateTextInput(val, i) {
  document.getElementById('textInput-' + i).value = val;
}

document.addEventListener("DOMContentLoaded", function() {

  //put your image's links
  var images = ["http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];

  const form = document.getElementById("formMatrix");
  const submitBtn = document.getElementById("randomSubmit");
  const textResult = document.getElementById("result");

  for (var i = 0; i < images.length; i++) {
    form.getElementsByTagName('ul')[0].innerHTML += ("<li><input type='checkbox' id='chk-" + i + "' /><label for='chk-" + i + "'><img id='img-" + i + "' src='" + images[i] + "'/><div class='ranges'><input type='range' id='range-" + i + "' min='0' max='10' value='0' onchange='updateTextInput(this.value, " + i + ");' /><input type='text' disabled='disabled' id='textInput-" + i + "' value='0'/></div></label></li>");
  }

  // We check the values on the submit click
  submitBtn.addEventListener("click", function(e) {
    // Prevent it from *actually* submitting (e.g. refresh)
    e.preventDefault();
    // Grab *all* selected checkboxed into an array
    const items = document.querySelectorAll("#formMatrix input:checked");

    // Checking if it's not empty
    if (items.length > 0) {

      var array_items = [];

      // Convert object to array
      for (var i = 0; i < items.length; i++) {
        array_items.push(items[i]);
      }

      // Add items by freq
      for (var i = 0; i < array_items.length; i++) {
        var n = parseInt(document.getElementById('textInput-' + array_items[i].id.split('-')[1]).value);
        for (var j = 0; j < n; j++) {
          array_items.splice(i + 1, 0, array_items[i]);
        }
        i = (i + n);
      }

      // Setting a random index from items[0] to items[items.length]
      var imgid = ('img-' + array_items[Math.floor(Math.random() * array_items.length)].id.split('-')[1]);

      textResult.innerHTML = ("<label><img id='imgResult' src='" + document.getElementById(imgid).src + "'/></label>");

    } else {
      // If not, we alert
      alert("Please choose at least 1 image");
    }

  });
});

我看到的最简单的方法是临时处理所选图像的数组，然后，如果权重为10，将根据顺序向数组中插入10个以上的图像，并随机选择

更新2:

<div id="formMatrix">
  <ul>
  </ul>

  <input id="randomSubmit" type="submit" value="Randomize">
</div>

<div id="result">
  <br />
  <br />
</div>

function updateTextInput(val, i) {
  document.getElementById('textInput-' + i).value = val;
}

document.addEventListener("DOMContentLoaded", function() {

  //put your image's links
  var images = ["http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];

  const form = document.getElementById("formMatrix");
  const submitBtn = document.getElementById("randomSubmit");
  const textResult = document.getElementById("result");

  for (var i = 0; i < images.length; i++) {
    form.getElementsByTagName('ul')[0].innerHTML += ("<li><input type='checkbox' id='chk-" + i + "' /><label for='chk-" + i + "'><img id='img-" + i + "' src='" + images[i] + "'/><div class='ranges'><input type='range' id='range-" + i + "' min='0' max='10' value='0' onchange='updateTextInput(this.value, " + i + ");' /><input type='text' disabled='disabled' id='textInput-" + i + "' value='0'/></div></label></li>");
  }

  // We check the values on the submit click
  submitBtn.addEventListener("click", function(e) {
    // Prevent it from *actually* submitting (e.g. refresh)
    e.preventDefault();
    // Grab *all* selected checkboxed into an array
    const items = document.querySelectorAll("#formMatrix input:checked");

    // Checking if it's not empty
    if (items.length > 0) {

      var array_items = [];

      // Convert object to array
      for (var i = 0; i < items.length; i++) {
        array_items.push(items[i]);
      }

      // Add items by freq
      for (var i = 0; i < array_items.length; i++) {
        var n = parseInt(document.getElementById('textInput-' + array_items[i].id.split('-')[1]).value);
        for (var j = 0; j < n; j++) {
          array_items.splice(i + 1, 0, array_items[i]);
        }
        i = (i + n);
      }

      // Setting a random index from items[0] to items[items.length]
      var imgid = ('img-' + array_items[Math.floor(Math.random() * array_items.length)].id.split('-')[1]);

      textResult.innerHTML = ("<label><img id='imgResult' src='" + document.getElementById(imgid).src + "'/></label>");

    } else {
      // If not, we alert
      alert("Please choose at least 1 image");
    }

  });
});

---

最后更改：

完全正确！因此，如果滑块位于“2”的图像在随机化中出现的可能性远远小于位于“8”的图像。你所附的小提琴文件中的滑块看起来和我想象的完全一样，但它们似乎对随机生成的权重没有任何影响。好吧，兄弟，看我的答案更新了，JSFIDLE链接哇，谢谢，这似乎有效！如果我想在程序中添加更多的图像，我应该把它们放在上面写着//put your image's links的地方吗？是的，当然没有问题，我这样做是为了让你不必在css文件第18行的htmluse width和height属性中创建所有内容来显示更大的输入，对于我用css隐藏的复选框，再次查看JSFIDLE