Question

我在网页上有一个点。每次我点击点（将其视为要构建的圆的中心）时，它会显示圆的各个扇区。因此，我最终应该得到完整的圆圈。但是使用下面的代码我只能得到半圆，并且在最后一次点击中流动正在破碎。我将如何实现这一目标？

＆＃13;

<!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>

＆＃13;

Answer 1

遵循您的代码结构，我将使用背景颜色并重写步骤4，如下所示。

x.css({
      'background': 'white',
      'background-image': 'linear-gradient(315deg, red 50%, transparent 50%), linear-gradient(270deg, red 50%, transparent 50%)'
    });

https://jsfiddle.net/djhqvhs9/

如何通过单击其中心创建一个完整的圆（每次单击中心时，显示圆的单个扇区）

1 个答案: