如何使視覺效果與javascript出現

嗨，我是一個初學者在JavaScript/jQuery中。我正在製作一個需要使用電池的應用程序（用CSS繪製），並允許用戶通過單擊連接+和 - 端子，然後根據電池連線方式顯示總體電壓和安培小時輸出。如何使視覺效果與javascript出現

我該如何讓用戶點擊正方形或負方塊（它們只是電池類中的div標籤），然後轉接到javascript，用戶點擊了某些框，然後以某種方式將電線（只是一條線）會出現在用戶點擊的地方。我真的不知道如何去編碼。感謝

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

有了一個非常基本的

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

你使用jQuery的點擊事件處理程序

。

現在畫一條線聽起來會對HTML5畫布元素有所幫助。看到你是初學者，你可能會花一些時間在像http://www.codecademy.com/courses/web-beginner-en-SWM11/0/1這樣的課程中。

還要注意什麼是編號和什麼是類。 Id的（＃）是唯一的，只有一個 - 類（。）有點像標籤：當你有類似的東西時使用它們。因此，使＃battery1和＃battery2 id以及.pos和.neg類更有意義。

來源

2014-04-16 22:56:57 hansvb

注意這個問題沒有jQuery標籤 – Oriol

如何使視覺效果與javascript出現

回答

相關問題