如何使用javascript显示视觉效果_Javascript_Html_Css

如何使用javascript显示视觉效果

javascript html css

如何使用javascript显示视觉效果,javascript,html,css,Javascript,Html,Css,嗨，我是javascript/jquery的初学者。我正在制作一个应用程序，它使用电池（用CSS绘制），允许用户通过单击连接+和-端子，然后根据电池的接线方式显示总电压和安培小时输出我如何允许用户单击正方或负方（它们只是battery类中的div标记），然后将用户已单击某些框的信息传递给javascript，然后在用户单击的位置之间会出现一条线（只是一条线）。我真的不知道该如何编写这个。谢谢 HTML: <!DOCTYPE html> <head> <

嗨，我是javascript/jquery的初学者。我正在制作一个应用程序，它使用电池（用CSS绘制），允许用户通过单击连接+和-端子，然后根据电池的接线方式显示总电压和安培小时输出

我如何允许用户单击正方或负方（它们只是battery类中的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;
}

HTML：
+终点站
-终点站
+
-
+
-
CSS:
#电池组{
背景颜色：紫色；
左边距：自动；
右边距：自动；
宽度：1100px；
高度：800px；
}
#翼点的{
位置：绝对位置；
左：500px；
顶部：50px；
宽度：200px；
高度：100px；
背景色：红色；
颜色：白色；
文本对齐：居中；
字体大小：40px；
}
#端部{
位置：绝对位置；
左：700px；
顶部：50px；
宽度：200px；
高度：100px；
背景色：黑色；
颜色：白色；
文本对齐：居中；
字体大小：40px；
}
.电池{
位置：绝对位置；
顶部：200px；
左：600px；
宽度：100px；
高度：75px；
背景颜色：灰色；
边框：实心2px；
}
.电池2{
位置：绝对位置；
顶部：200px；
左：700px；
宽度：100px；
高度：75px；
背景颜色：灰色；
边框：实心2px；
}
#位置{
位置：相对位置；
高度：25px；
宽度：25px；
背景色：红色；
颜色：白色；
左边距：40px；
文本对齐：居中；
}
#负数{
位置：相对位置；
高度：25px；
宽度：25px；
背景色：黑色；
颜色：白色；
左边距：40px；
顶部：20px；
文本对齐：居中；
}

具有非常基本的

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

您有一个带有jQuery的click事件处理程序

现在在HTML5画布元素上画一条线听起来像是在做什么。既然你是一个初学者，你可能会花一些时间在这样的课程上

还要注意什么是id，什么是类。Id（#）是唯一的，只有一个类（#）有点像标记：当你有类似的东西时使用它们。因此，创建#battery1和#battery2 id以及.pos和.neg类更有意义。

注意，问题没有jQuery标记