我在网页上有一个点。每次我点击点(将其视为要构建的圆的中心)时，它都会显示圆的各个扇区。因此，我最终应该得到完整的圆圈。但是使用下面的代码我只能得到半圆并且在最后一次点击时流程中断了。我将如何实现？
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
.ten {
background-image:
linear-gradient(0deg, transparent 50%, white 50%),
linear-gradient(0deg, white 50%,transparent 50%);
}
.center {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
font-size: 45px;
}
</style>
</head>
<body>
<div id="demo" class="container ten">
<div class="center">.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = $("#demo");
var count = 0;
$(".center").click(function(){
if(count == 0)
{
x.css({'background-image':'linear-gradient(135deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%,transparent 50%)'});
count =1;
}
else if(count == 1)
{
x.css({'background-image':'linear-gradient(180deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%,transparent 50%)'});
count=2;
}
else if(count == 2)
{
x.css({'background-image':'linear-gradient(225deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%,transparent 50%)'});
count=3;
}
else if(count == 3)
{
x.css({'background-image':'linear-gradient(270deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%,transparent 50%)'});
count=4;
}
else
{
if(count==4){
x.css({'background-image':'linear-gradient(-45deg, transparent 50%, white 50%),linear-gradient(270deg, white 50%,transparent 50%)'});
}
}
});
});
</script>
</body>
</html>最佳答案
按照您的代码结构，我将使用背景颜色并重写第 4 步，如下所示。
x.css({
'background': 'white',
'background-image': 'linear-gradient(315deg, red 50%, transparent 50%), linear-gradient(270deg, red 50%, transparent 50%)'
});
关于javascript - 如何通过单击圆心创建一个完整的圆(每次单击圆心都会显示圆的各个部分)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38583975/