Question

我正在尝试为我的代码创建掷骰子按钮，但我不太确定该怎么做，因为如果我创建了一个骰子按钮，那么它要么也无法正常工作，要么我的按钮不起作用功能正确。

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" title="Default Styles"/>
    <script>

      var r_text = new Array ();
      r_text[0] = "All leave are brown";
      r_text[1] = "fafwfaf";
      r_text[2] = "fakfjwkfkajwkfawjf";
      r_text[3] = "cornflakes";
      r_text[4] = "bannana";
      r_text[5] = "Choclate";
      r_text[6] = "lol";
      var i = Math.floor(7*Math.random())



      var videos = [
   {
      id: 1,
      url: "https://www.youtube.com/embed/ngUMyF9D9SQ?autoplay=1",
      text: r_text[i]
   },
   {
      id: 2,
      url: "https://www.youtube.com/embed/v=r-l_gVPVylM?autoplay=1",
      text: r_text[i]
   },
   {
      id: 3,
      url: "https://www.youtube.com/embed/6ukTzRjXcR0?autoplay=1",
      text: r_text[i]
   },
   {
      id: 4,
      url: "https://www.youtube.com/embed/n5BXMNCTu8I?autoplay=1",
      text: r_text[i]
   },
   {
      id: 5,
      url: "https://www.youtube.com/embed/JtwVmnMNaEY?autoplay=1",
      text: r_text[i]
   },
   {
      id: 6,
      url: "https://www.youtube.com/embed/lAMgRaHP8Q4?autoplay=1",
      text: r_text[i]
   }

];

window.onload = function() {
   var playerDiv = document.getElementById("random_player");
   var player = document.createElement("IFRAME");
   var previousId = localStorage.getItem("previousId");
   if (previousId) {
      var previousIndex = videos.findIndex(v => v.id === parseInt(previousId));
      videos.splice(previousIndex, 1);
   }
   var current = Math.floor(Math.random() * videos.length);
   localStorage.setItem("previousId", videos[current].id);
   localStorage.getItem("previousId");
   var randomVideoUrl = videos[current].url;
   player.setAttribute("width", "640");
   player.setAttribute("height", "390");
   player.setAttribute("src", randomVideoUrl);
   playerDiv.appendChild(player);
   var textContainer = document.getElementById("r_text");
   setTimeout(() => {
    textContainer.innerHTML = videos[current].text;

    }, 3000)
};




    </script>
</head>


<div id="random_player">
  <div id="r_text">
  </div>
</div>


</html>

我希望除了按钮之外，它一开始什么都没有。一旦单击按钮，视频就会开始播放，然后其他所有事情都会发生。

Answer 1

尝试这个https://codepen.io/dsb/pen/XWrQbxR

说明： 1）将按钮添加到HTML

<button id="btn-roll">Roll</button>

2）修改JS代码

var r_text = [];
r_text[0] = "All leave are brown";
r_text[1] = "fafwfaf";
r_text[2] = "fakfjwkfkajwkfawjf";
r_text[3] = "cornflakes";
r_text[4] = "bannana";
r_text[5] = "Choclate";
r_text[6] = "lol";
var i = Math.floor(6 * Math.random())

var videos = [{
    id: 1,
    url: "https://www.youtube.com/embed/ngUMyF9D9SQ?autoplay=1",
    text: r_text[1]
  },
  {
    id: 2,
    url: "https://www.youtube.com/embed/v=r-l_gVPVylM?autoplay=1",
    text: r_text[2]
  },
  {
    id: 3,
    url: "https://www.youtube.com/embed/6ukTzRjXcR0?autoplay=1",
    text: r_text[3]
  },
  {
    id: 4,
    url: "https://www.youtube.com/embed/n5BXMNCTu8I?autoplay=1",
    text: r_text[4]
  },
  {
    id: 5,
    url: "https://www.youtube.com/embed/JtwVmnMNaEY?autoplay=1",
    text: r_text[5]
  },
  {
    id: 6,
    url: "https://www.youtube.com/embed/lAMgRaHP8Q4?autoplay=1",
    text: r_text[6]
  }

];

window.onload = function() {
  function rollVideo(numberRand) {
    let playerDiv = document.getElementById("random_player");
    if (document.querySelector("iframe") !== null) {
      document.querySelector("iframe").remove();
    }
    let player = document.createElement("IFRAME");
    let randomVideoUrl = videos[numberRand].url;
    player.setAttribute("width", "640");
    player.setAttribute("height", "390");
    player.setAttribute("src", randomVideoUrl);
    playerDiv.appendChild(player);
    document.getElementById("r_text").innerHTML = "";
    document.getElementById("r_text").innerHTML = videos[numberRand].text;
  }
  startRoll(i);

  document.getElementById("btn-roll").addEventListener("click", startRoll);

  function startRoll() {
    let currentNumber = Math.floor(Math.random() * videos.length);
    rollVideo(currentNumber);
  }
};

关于上一个视频的文本变量和ID没有条件，因此我缩小了示例。

Answer 2

如您所见，我已经添加了您的代码，但是什么也没发生。

forkJoin

如何创建掷骰子按钮？

2 个答案: