0
ウェブページにドットがあります。ドットをクリックするたびに（円の中心として考える）、サークルの個々のセクタが表示されます。したがって、私は最後に完全な円を得るべきです。しかし、次のコードでは、私は半円を得ることができ、最後のクリックでは流れが壊れています。私はこれをどのように実装しますか？あなたのコードの構造に続いて中心をクリックして完全円を作成する方法（中心をクリックするたびに円の個々のセクターが表示されます）
<!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になった後あなたは円の半分が満たされた後、右である、終了？円の全体を埋めるには、あなたがあなたのサークルの1/8を常に埋めるので、あなたは 'count == 8 'に達するまであなたのロジックを続けるべきです。 – AsheraH
@AsheraHそれは4のように見えます。 –