在HTML中繪製數學數字行

我想在html中動態地繪製數字行（因爲它在下面的鏈接中）。在HTML中繪製數學數字行

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

能否請你指出一些JavaScript庫來達到同樣的？

謝謝， Mugil。

來源

2013-03-28 Mugil Ragu

它是否必須看起來完全一樣嗎？您可以使用內部編號的並排框代表相同的想法，這很容易用HTML表示。 – bfavaretto 2013-03-28 03:04:30

http://stackoverflow.com/questions/4182494/how-to-draw-number-lines-using-html – Dom 2013-03-28 03:04:38

這可以完全用HTML和CSS完成，不需要腳本，當然也不需要庫。 – RobG 2013-03-28 03:05:30

簡單的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-29 06:14:27 RobG

非常感謝@RobG ..我可以在上面提到的例子中即興創作。 – 2013-03-30 06:15:25

在HTML中繪製數學數字行

回答

相關問題