1
我想在html中動態地繪製數字行(因爲它在下面的鏈接中)。在HTML中繪製數學數字行
http://www.mathsisfun.com/number-line.html
能否請你指出一些JavaScript庫來達到同樣的?
謝謝, Mugil。
我想在html中動態地繪製數字行(因爲它在下面的鏈接中)。在HTML中繪製數學數字行
http://www.mathsisfun.com/number-line.html
能否請你指出一些JavaScript庫來達到同樣的?
謝謝, Mugil。
簡單的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>
非常感謝@RobG ..我可以在上面提到的例子中即興創作。 – 2013-03-30 06:15:25
它是否必須看起來完全一樣嗎?您可以使用內部編號的並排框代表相同的想法,這很容易用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