2

HTMLで動的に（リンクの下にあるように）数直線を描画したいと思います。

http://www.mathsisfun.com/number-line.html

同じことを達成するために、いくつかのJavaScriptライブラリを指摘していただけますか?

ありがとう、ムギル。

4

1 に答える 1

4

簡単な CSS の例。私は CSS がかなり苦手であることに注意してください。これはおそらく Firefox、Safari などでのみ機能し、IE ではがらくたのように見えます。

さまざまなサイズのこれらを多数実行する場合は、マークアップを生成するスクリプトが便利かもしれませんが、クライアントでスクリプトを使用するのではなく、クライアントに提供される HTML を生成する必要があります。

<!DOCTYPE html>
<html>
  <title>Number Line</title>
  <style type="text/css">
  .lineContainer {
    position:relative;
  }
  .line {
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    width: 21px;
    Height: 8px;
    float: left;
    margin: 0;
    padding: 0;
  }
  .lineRightEnd {
    border-right: 0;
  }
  .numberContainer {
    position: absolute;
    top: 10px;
    margin: 0;
    padding: 0;
  }
  .number {
    width: 22px;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .numberLeftEnd {
    width: 10px;
    Height: 5px;
    float: left;
    margin: 0;
    padding: 0;
  }
  </style>

</head>
<body>
<p>A number line</p>
<div class="lineContainer">
  <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line lineRightEnd"></div>
  <div class="numberContainer"><div class="numberLeftEnd"></div><div class="number">-5</div><div class="number">-4</div><div class="number">-3</div><div class="number">-2</div><div class="number">-1</div><div class="number">0</div><div class="number">1</div><div class="number">2</div><div class="number">3</div><div class="number">4</div><div class="number">5</div>
  </div>
</div>
</body>
</html>
于 2013-03-29T06:14:27.860 に答える