그리기 수학 번호 라인을 html로

html로 숫자 라인 (아래 링크에 있음)을 동적으로 그리고 싶습니다. 그리기 수학 번호 라인을 html로

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

는 동일한을 달성하기 위해 몇 가지 자바 스크립트 라이브러리를 가리시겠습니까?

감사합니다. Mugil.

출처

2013-03-28 Mugil Ragu

정확히 그 예와 비슷해야합니까? 내부에 숫자가있는 나란히있는 상자를 사용하여 동일한 아이디어를 표현할 수 있습니다. 이는 HTML로 표현하기 쉽습니다. – bfavaretto

http://stackoverflow.com/questions/4182494/how-to-draw-number-lines-using-html – Dom

HTML 및 CSS로만 수행 할 수 있으므로 스크립트가 필요없고 라이브러리가 필요하지 않습니다. . – RobG

간단한 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 .. 나는 위에서 언급 한 예를 즉흥화할 수 있습니다. –

그리기 수학 번호 라인을 html로

답변

관련 문제