绘制数学数轴在html

Drawing Math number lines in html

本文关键字：html 绘制      更新时间：2023-09-26

我想在html中动态地绘制数轴(就像下面的链接一样)。

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

你能指出一些javascript库来实现相同的吗?

简单的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>

相关文章：