个人中心
gpt4 book ai didi

javascript - 图片网址显示在图片应在的位置

转载 作者：太空宇宙 更新时间：2023-11-04 06:47:20 25 4
gpt4 key购买 nike

我有一个棋盘游戏，当用户点击其中一个方框时，它会翻转并显示字母。我想在用户单击而不是字母时显示图像。我有一个包含所有字母的 array，但是当替换为 imageurl 时，它只显示 url 而不是图像。我会将 html、css 和 js 粘贴到下面。

js

var memory_array = ["./naruto.gif ", "A", "B", "B", "C", "C", "D", "D"];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function() {
  var i = this.length,
    j,
    temp;
  while (--i > 0) {
    j = Math.floor(Math.random() * (i + 1));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;
  }
};
function newBoard() {
  tiles_flipped = 0;
  var output = "";
  memory_array.memory_tile_shuffle();
  for (var i = 0; i < memory_array.length; i++) {
    output +=
      '<div id="tile_' +
      i +
      '" onclick="memoryFlipTile(this,\'' +
      memory_array[i] +
      "')\"></div>";
  }
  document.getElementById("memory_board").innerHTML = output;
}
function memoryFlipTile(tile, val) {
  //if the title is empty and array = 0  then the rest of code will perform
  if (tile.innerHTML == "" && memory_values.length < 2) {
    //the tile selected will have a white background and the val will be produced
    tile.style.background = "#FFF";
    tile.innerHTML = val;
    //if the  array equal = 0
    if (memory_values.length == 0) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if the  array equal = 1
    } else if (memory_values.length == 1) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if memory_values values are the same
      if (memory_values[0] == memory_values[1]) {
        tiles_flipped += 2;
        // Clear both arrays
        memory_values = [];
        memory_tile_ids = [];
        // Check to see if the whole board is cleared
        if (tiles_flipped == memory_array.length) {
          alert("Board cleared... generating new board");
          document.getElementById("memory_board").innerHTML = "";
          newBoard();
        }
      } else {
        // if the two flip tiles aren't of the same value
        function flip2Back() {
          // Flip the 2 tiles back over
          var tile_1 = document.getElementById(memory_tile_ids[0]);
          var tile_2 = document.getElementById(memory_tile_ids[1]);
          tile_1.style.background = "orangered";
          tile_1.innerHTML = "";
          tile_2.style.background = "orangered";
          tile_2.innerHTML = "";
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
        }
        setTimeout(flip2Back, 700);
      }
    }
  }
}

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="app.js"></script>
</head>
<body>
    <div id="memory_board"> </div>
    <script>
        newBoard();
    </script>
</body>
</html>

CSS

<style>
    div#memory_board {
        background: #CCC;
        border: #999 1px solid;
        width: 800px;
        height: 540px;
        padding: 24px;
        margin: 0px auto;
    }

    div#memory_board>div {
        background: orangered;
        border: #000 1px solid;
        width: 71px;
        height: 71px;
        float: left;
        margin: 10px;
        padding: 20px;
        font-size: 64px;
        cursor: pointer;
        text-align: center;
    }
</style>

最佳答案

您可以创建新图像并从图像数组中设置 src 值。同时设置宽度和高度。

var img= new Image();
img.src = val;
img.width="50";
img.height="50";
tile.appendChild(img);

请看下面的片段:

div#memory_board {
            background: #CCC;
            border: #999 1px solid;
            width: 800px;
            height: 540px;
            padding: 24px;
            margin: 0px auto;
        }

        div#memory_board>div {
            background: orangered;
            border: #000 1px solid;
            width: 71px;
            height: 71px;
            float: left;
            margin: 10px;
            padding: 20px;
            font-size: 64px;
            cursor: pointer;
            text-align: center;
        }
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="memory_board"> </div>
    <script>
    
var memory_array = ["http://www.clker.com/cliparts/b/6/1/0/124223379411527084631_Train_(1967-1979).svg.med.png", "http://www.clker.com/cliparts/b/6/1/0/124223379411527084631_Train_(1967-1979).svg.med.png", "http://www.clker.com/cliparts/Y/y/T/n/Z/Q/number-2-md.png", "http://www.clker.com/cliparts/Y/y/T/n/Z/Q/number-2-md.png", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQo95Lf_9XG0mf3Tb_lfMDUDXiywIdpiiCb5jUSTyOi5ACJXa3C6w", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQo95Lf_9XG0mf3Tb_lfMDUDXiywIdpiiCb5jUSTyOi5ACJXa3C6w", "http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-hi.png", "http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-hi.png"];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function() {
  var i = this.length,
    j,
    temp;
  while (--i > 0) {
    j = Math.floor(Math.random() * (i + 1));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;
  }
};


function newBoard() {
  tiles_flipped = 0;
  var output = "";
  memory_array.memory_tile_shuffle();
  for (var i = 0; i < memory_array.length; i++) {
    output +=
      '<div id="tile_' +
      i +
      '" onclick="memoryFlipTile(this,\'' +
      memory_array[i] +
      "')\"></div>";
  }
  document.getElementById("memory_board").innerHTML = output;
}
function memoryFlipTile(tile, val) {
  //if the title is empty and array = 0  then the rest of code will perform
  if (tile.innerHTML == "" && memory_values.length < 2) {
    //the tile selected will have a white background and the val will be produced
    tile.style.background = "#FFF";
    var img= new Image();
		img.src = val;
    img.width="50";
    img.height="50";
    tile.appendChild(img);
    //if the  array equal = 0
    if (memory_values.length == 0) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if the  array equal = 1
    } else if (memory_values.length == 1) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if memory_values values are the same
      if (memory_values[0] == memory_values[1]) {
        tiles_flipped += 2;
        // Clear both arrays
        memory_values = [];
        memory_tile_ids = [];
        // Check to see if the whole board is cleared
        if (tiles_flipped == memory_array.length) {
          alert("Board cleared... generating new board");
          document.getElementById("memory_board").innerHTML = "";
          newBoard();
        }
      } else {
        // if the two flip tiles aren't of the same value
        function flip2Back() {
          // Flip the 2 tiles back over
          var tile_1 = document.getElementById(memory_tile_ids[0]);
          var tile_2 = document.getElementById(memory_tile_ids[1]);
          tile_1.style.background = "orangered";
          tile_1.innerHTML = "";
          tile_2.style.background = "orangered";
          tile_2.innerHTML = "";
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
        }
        setTimeout(flip2Back, 700);
      }
    }
  }
}

        newBoard();
    </script>

</body>

</html>

也可以测试一下here

关于javascript - 图片网址显示在图片应在的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53194344/

25 4 0
文章推荐： javascript - 制作圆周运动选择菜单
文章推荐： java - 有没有办法在初始化后动态更新 block 纹理？
文章推荐： python - reportlab 表格中段落的行间距和拟合
文章推荐： java - 我的玩家以 90 度角射出子弹
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com