Question

我现在使用1个span标记。

<span onmouseover="numberOne()" onclick="imgNumber(); return false"  onmouseout="noHoverOne()" class="img1 img" id="new-img"> </span>

跨度有一个“deafult”图像，当鼠标在跨度上移动时，将显示另一个图像，当鼠标离开跨度时，将再次显示默认图像。

现在是javascript：

function numberOne() {
  var random2 = Math.floor((Math.random() * 3) + 1);
  var random3 = Math.floor((Math.random() * 3) + 1);

  do {
    var random = Math.floor((Math.random() * 3) + 1);
  } while (random === numberOne.last);

  numberOne.last = random;

这里有随机数字。因此，每当您离开跨度并继续跨度时，将会有不同的图像。

if (random == 2) {
  document.getElementById('new-img').style = "background-image: url('http://web-stars.nl/molgeld.jpg');";
} else if ((random==random2)==random3) {
  document.getElementById('new-img').style = "background-image: url('http://web-stars.nl/vrijstelling.jpg');";
} else {
  document.getElementById('new-img').style = "background-image: url('http://web-stars.nl/haspel.jpg');";
}

这些图像将根据数字显示

  return random;
}

var value = numberOne();

function imgNumber() {
  document.getElementById('demo').innerHTML = value;                
}

imgNumber();

这是我被困的地方。在我用鼠标触摸span标签之前，已经有一个随机数字，当我在span标签上使用鼠标时，它会显示不同的图像，但不会显示不同的数字。我想以某种方式使用这个数字为我的游戏创造一个新的水平。游戏受所选图像的影响。

所以有很多事情发生，而且非常混乱。所以，我很乐意听到任何建设性的反馈。

[编辑]我会保持JSfiddle最新，但预览中有错误，它不会显示任何内容。它仍然有用Jsfiddle

Answer 1

使用包装函数，您可以同时调用imgNumber和numberOne

＆＃13;

function mouseHover() {
  var value = numberOne()
  imgNumber(value)
}

function imgNumber(value) {
  document.getElementById('demo').innerHTML = value;              
}

＆＃13;

<span onmouseover="mouseHover()" onclick="imgNumber(); return false"  onmouseout="noHoverOne()" class="img1 img" id="new-img"> </span>

＆＃13;

Answer 2

您的代码有点不合逻辑。您似乎想要将图像随机分配给元素背景，并且每次都获得不同的元素。因此，将图像URL放在一个数组中并随机抓取一个，确保它与最后一个不同。这意味着您只需修改图像阵列即可添加或减少要显示的图像。

同时将所有数据放在一个对象中而不是使用全局数据，它只是更整洁。并给你的功能名称，告诉你他们做了什么。

E.g。

＆＃13;

var imageData = {
  pix: ['http://web-stars.nl/molgeld.jpg',
    'http://web-stars.nl/vrijstelling.jpg',
    'http://web-stars.nl/haspel.jpg'
  ],
  random: null
}

function changeImage(el) {
  // limit do loop just in case data is bad
  // Infinite loops are bad...
  var len = imageData.pix.length;
  var i = len;

  do {
    var random = Math.random() * len | 0;
  } while (i-- && imageData.random == random)

  imageData.random = random;
  el.style.backgroundImage = imageData.pix[random];
  console.log(random, imageData.pix[random]);
}

function updateImageRef() {
  document.getElementById('imageRef').textContent = imageData.random;
}

＆＃13;

<div id="imageDiv" onmouseover="changeImage(this)" onclick="updateImageRef()">Image div</div>
<div id="imageRef"><div>

＆＃13;

onmousevent之后javascript值没有更新

2 个答案: