????实现圆形嵌套正方形再嵌套三角形,点击区分

Posted ydfqixn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了????实现圆形嵌套正方形再嵌套三角形,点击区分相关的知识,希望对你有一定的参考价值。

需求是这样的,css实现如下图,这个很简单,但是要求js实现点击任何一个图形,弹出‘这是什么图形‘框,

通过event的target对象可以判断类名实现这个效果,但最后写的是一个三角形,是border transparent来的,就会盖住后面的正方形,所以点击正方形是无效的,

技术图片

下面是我写的代码,点击也是可以区分,但是最后的三角形没有做到,因为被盖住了,请问要怎么实现呢?????

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .aa {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: black;
      position: relative;
    }
 
    .bb {
      width: 200px;
      height: 200px;
      background: #eee;
      position: absolute;
      top:50%;
      left: 50%;
      margin: -100px;
      overflow:hidden;
    }
 
    .cc {
      width:250px;
      height:250px;
      background:blue;
      transform:rotate(45deg);
      -ms-transform:rotate(45deg);     /* IE 9 */
      -moz-transform:rotate(45deg);     /* Firefox */
      -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
      -o-transform:rotate(45deg);
      position:absolute;
      top:150px;
      left:-25px;
    }
  </style>
</head>
<body>
  <div class="aa">
    <div class="bb">
      <div class="cc">
      </div>
    </div>
  </div>
</body>
<script>
  var aa= document.getElementsByClassName("aa")[0];
  var bb= document.getElementsByClassName("bb")[0]; 
  var cc= document.getElementsByClassName("cc")[0];
  aa.onclick = function (e) {
    console.log(e.target)
    if(e.target.className == "aa"){
      alert("圓形")
    }else if(e.target.className == "bb"){
        alert("正方形")
    }
  }
</script>
</html>

 

以上是关于????实现圆形嵌套正方形再嵌套三角形,点击区分的主要内容,如果未能解决你的问题,请参考以下文章

题解 CF1156A Inscribed Figures

python基础--函数进阶

面试题分享

如何检测用户对正方形、圆形、三角形等原始几何对象的手绘

编写一个程序计算“三角形、正方形、圆形"三种图形的面积,求:a)抽象出一个基类base b)在其中

openGL在不同显示模式下绘制圆形三角形和正方形