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 回答