Как создать визуальные эффекты с помощью 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 и что a класс. Id (#) уникальны, есть только один - Classes (.) Немного похожи на теги: используйте их, когда у вас есть похожие вещи. Таким образом, имеет смысл делать классы # battery1 и # battery2 id и .pos и .neg.

источник

2014-04-16 22:56:57 hansvb

Обратите внимание, что в вопросе нет тега jQuery – Oriol

Как создать визуальные эффекты с помощью javascript

ответ

Смежные вопросы