Question

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

我如何允许用户点击正方形或负方块（这只是电池类中的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;
}

Answer 1

有一个非常基本的

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

你有一个jQuery的点击事件处理程序。

如今，在HTML5 canvas-element上绘制一条线听起来就像你会做的那样。看到你是初学者，你可能会花一些时间在http://www.codecademy.com/courses/web-beginner-en-SWM11/0/1这样的课程中。

还要注意什么是 id 以及什么是类。 Id（＃）是唯一的，只有一个 - 类（。）有点像标签：当你有类似的东西时使用它们。因此，制作＃battery1和＃battery2 id＆＃39; s和.pos以及.neg类更有意义。

如何使用javascript显示视觉效果

1 个答案: