Question

我创建了一个迷宫，可以从用户那里获取高度和宽度值。我为迷宫对象提供了背景颜色，但我希望背景宽度与迷宫的宽度相同。如果迷宫的宽度越来越大，背景也越大。我怎样才能做到这一点？这是我的HTML代码。

 <!DOCTYPE html>
 <html>
 <head>
      <meta charset="utf-8" />
      <style type="text/css">
          .mze
          {
             color: Blue;
             text-align: center;
             background-color: Yellow;
             width: 100%;
          }
         .prompt
         {
             background-color: Yellow;
             color: Red;
         }
         </style>
         <script src="mazegenerator.js"></script>
         <title>Maze</title>
 </head>
 <body>
    <div id="maze">
        <form style="text-align: center" name="forma1">
        <br/>
            <label>
               HEIGHT:&nbsp;</label>
            <input type="text" id="height" name="height" autofocus="autofocus" 
              maxlength="2" size="6" value="" />
            <label>
                &nbsp;&nbsp;&nbsp; WIDTH:&nbsp;</label>
            <input type="text" id="width" name="width" maxlength="2" size="6" value="" />
            <br/>
            <br/>
            <span id="prompt"></span>
            <br/>
            <input type="button" alt="submit" onclick="CreateMaze();" 
                   value="Generate" style="margin-top: 10px;">
        </form>
    </div>

    <div id="Mzobj" align="center">

        <pre id="out" class="mze"></pre>
    </div>
</body>
</html>

这是我从用户那里获得价值的js部分：

function CreateMaze(){
//gets the value of Height & Width from user
var a = parseInt(document.getElementById("height").value);
var b = parseInt(document.getElementById("width").value);
//Values of Height and Width can't be zero
if (a == 0) {
    document.getElementById('prompt').innerHTML = "<b>height</b> is invalid";
    document.getElementById('prompt').className = "prompt";
    return;
}
if (b == 0) {
    document.getElementById('prompt').innerHTML = "<b>width</b> is invalid";
    document.getElementById('prompt').className = "prompt";
    return;
}
//Width can't be smaller than height
if (a > b) {
    document.getElementById('prompt').innerHTML = "not possible";
    document.getElementById('prompt').className = "prompt";
}
else {
    document.getElementById('prompt').innerHTML = "";
    document.getElementById('prompt').className = "";
}

document.getElementById('out').innerHTML = display(maze(a,b));
}


//Display the maze
function display(m) {
  var text= [];
  for (var j= 0; j<m.x*2+1; j++) {
    var line= [];
    if (0 == j%2)
        for (var k=0; k<m.y*4+1; k++)
            if (0 == k%4) 
                line[k]= '+';
            else
                if (j>0 && m.verti[j/2-1][Math.floor(k/4)])
                    line[k]= ' ';
                else
                    line[k]= '-';
    else
        for (var k=0; k<m.y*4+1; k++)
            if (0 == k%4)
                if (k>0 && m.horiz[(j-1)/2][k/4-1])
                    line[k]= ' ';
                else
                    line[k]= '|';
            else
                line[k]= ' ';
    if (0 == j) line[1]=line[3]=' ',line[2]= 'S';
    if (m.x*2-1 == j) line[4*m.y]= 'E';
    text.push(line.join('')+'\r\n');
}
return text.join('');

这是我得到的图像：

enter image description here

Answer 1

只要用户输入的宽度以像素为单位，您就可以在'CreateMaze（）`函数的末尾添加以下代码...

document.getElementById("Mzobj").setAttribute("style", "width:" + b + "px");

如果没有，那么您需要弄清楚如何将输入的宽度转换为可在HTML页面中使用的测量。如果它是当时的字符数，则需要确定字体中字符占用的单位数并计算它。 var width = <number units per character> * <number of characters>以下链接应该有助于单位。

http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/05/l05_03.html?m=1

<div>在html </div>中获取自动宽度而不进行初始化

1 个答案: