비주얼을 자바 스크립트로 표시하는 방법

안녕하세요, 저는 자바 스크립트/jquery에서 초급자입니다. 배터리 (CSS로 그려 짐)를 사용하는 응용 프로그램을 만들고 사용자가 + 및 - 터미널을 클릭하여 연결할 수있게하고 배터리가 연결되는 방식에 따라 전체 전압과 앰프 시간 출력을 표시합니다.비주얼을 자바 스크립트로 표시하는 방법

어떻게하면 사용자가 배터리 클래스 내의 div 태그 일 수있는 양수 또는 음수 사각형을 클릭 한 다음 사용자가 특정 상자를 클릭했다는 자바 스크립트로 릴레이 할 수 있습니다. 그런 다음 어떻게 든 와이어 (단지 한 줄) 사용자가 클릭 한 위치 사이에 나타납니다. 나는 이것을 어떻게 코딩 할 것인지 정말로 모른다. 감사

당신이 jQuery로 클릭 이벤트 핸들러가 매우 기본적인

$('#pterminal').click(function() { 
    // pterminal clicked 
});

와

HTML: 

<!DOCTYPE html> 

<head> 
    <link rel="stylesheet" type="text/css" href="batterypagestylesheet.css"> 


    <script> 

    </script> 
</head> 
</body> 
    <div id="batterysection"> 
     <div id="pterminal">+ terminal</div> 
     <div id="nterminal">- terminal</div> 


    </div> 
    <div class="battery"> 
     <div id="pos">+</div> 
     <div id="neg">-</div> 
    </div> 
    <div class="battery2"> 
     <div id="pos">+</div> 
     <div id="neg">-</div> 
    </div> 
</body> 

</html> 


CSS: 

    #batterysection{ 
background-color:purple; 
margin-left:auto; 
margin-right:auto; 
width:1100px; 
height:800px; 
} 

#pterminal{ 
position:absolute; 
left:500px; 
top:50px; 
width:200px; 
height:100px; 
background-color:red; 
color:white; 
text-align:center; 
font-size:40px; 
} 
#nterminal{ 
position:absolute; 
left:700px; 
top:50px; 
width:200px; 
height:100px; 
background-color:black; 
color:white; 
text-align:center; 
font-size:40px; 
} 

.battery{ 
position:absolute; 
top:200px; 
left:600px; 
width:100px; 
height:75px; 
background-color:grey; 
border:solid 2px; 
} 
.battery2{ 
position:absolute; 
top:200px; 
left:700px; 
width:100px; 
height:75px; 
background-color:grey; 
border:solid 2px; 
} 

#pos{ 
position:relative; 
height:25px; 
width:25px; 
background-color:red; 
color:white; 
margin-left:40px; 
text-align:center; 
} 
#neg{ 
position:relative; 
height:25px; 
width:25px; 
background-color:black; 
color:white; 
margin-left:40px; 
top:20px; 
text-align:center; 
}

출처

2014-04-16 benrosenberg

라인을 그리는 것은 요즘 HTML5 캔버스 요소에서하는 것처럼 들립니다. 초보자 인 분이라면 http://www.codecademy.com/courses/web-beginner-en-SWM11/0/1과 같은 과정에 시간을 투자 할 수 있습니다.

ID가이고 무엇이 클래스인지 조심하십시오. ID (#)는 유일하며, 하나만 있습니다. - 클래스 (.)는 약간 비슷한 태그입니다 : 비슷한 물건이있을 때 사용하십시오. 따라서, # battery1과 # battery2의 id와 .pos와 .neg 클래스를 만드는 것이 더 합리적입니다.

출처

2014-04-16 22:56:57 hansvb

질문에 jQuery 태그가 없습니다. – Oriol

비주얼을 자바 스크립트로 표시하는 방법

답변

관련 문제