js实现鼠标点击出现爱心

最新推荐文章于 2023-02-14 16:03:00 发布

倒拔二叉树

最新推荐文章于 2023-02-14 16:03:00 发布

阅读量882

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/xingmanglang/article/details/124146082

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
       @keyframes remove {
            100% {
                opacity: 0;
            }
        }
  </style>
</head>
<body>
   
    <script>
          function createLove(w,h,color,x,y){
      const span=document.createElement('div');
      const left=document.createElement('div');
      const right=document.createElement('div');
      const spanStyle={
        width:w+'px',
        height:h+'px',
        position:'relative',
        top:y+'px',
        left:x+'px',
        backgroundColor:color,
        transform: 'rotate(-45deg)'
      }
      const leftStyle={
       width:w+'px',
       height:h+'px',
       position:'absolute',
       top:-w/2+'px',
       left:0+'px',
       borderRadius:'50%',
       backgroundColor:color,
      }
      const rightStyle={
        width:w+'px',
        height:h+'px',
        position:'absolute',
        borderRadius:'50%',
        top:0+'px',
        left:w/2+'px',
        backgroundColor:color,
      }
    //   span.style=spanStyle;
    //   left.style=left;
    //   right.style=right;
    Object.assign(span.style,spanStyle);
    Object.assign(left.style,leftStyle);
    Object.assign(right.style,rightStyle);
    //   document.body.appendChild(span);
      span.appendChild(left);
      span.appendChild(right);
    //   console.log(span)
    return span;
      
    }

        let span= createLove(100,100,'red',900,100);
        console.log(span)
        function getRandom(){
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          let color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
          return color;
        }
        console.log(getRandom())
       
        window.addEventListener('load',function(){
            let body=document.body;
            document.addEventListener('click',function(e){
            // console.log('sds')
            let x = e.pageX;
            let y = e.pageY;
            // console.log(x)
            let color= getRandom();
           let span= createLove(15,15,color,x,y);
            span.style.animation='remove 1s'
            body.appendChild(span) 
         
            setTimeout(function(){
                span.remove()
            },900)

        })
        })
        
    </script>
</body>
</html>

倒拔二叉树

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现鼠标点击出现爱心

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫