在 html 中绘制数学数轴

Question

我想在 html 中动态绘制数轴（如下面的链接所示）。

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

您能指出一些 javascript 库来实现相同的功能吗？

Answer 1

简单的 CSS 示例。请注意，我对 CSS 的了解非常垃圾，这可能只适用于 Firefox、Safari等，而在 IE 中看起来就像垃圾。

如果您要执行大量不同大小的操作，则生成标记的脚本可能会很方便，但它应该生成提供给客户端的 HTML，而不是在客户端使用脚本完成。

.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;
}

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