zoukankan      html  css  js  c++  java
  • 求解????实现圆形嵌套正方形再嵌套三角形,点击区分

    需求是这样的,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>
  • 相关阅读:
    jforum二次开发教程
    gitPermission denied (publickey).
    用keytool创建Keystore和Trustsotre文件只需五步
    导入数据库时报错1067 – Invalid default value for ‘字段名’
    WordPress用户角色及其权限管理编辑插件:User Role Editor汉化版
    http://blog.csdn.net/wh211212/article/details/53005321
    centos 安装 mysql
    卸载apache服务
    Cordova插件相关常用命令
    UI 交互
  • 原文地址:https://www.cnblogs.com/ydfqixn/p/10555533.html
Copyright © 2011-2022 走看看