javascript 点击加一个小心心

仟白

已于 2024-01-10 19:00:42 修改

阅读量217

点赞数 2

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

于 2021-11-24 14:46:11 首次发布

本文链接：https://blog.csdn.net/weixin_52594202/article/details/121515406

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客展示了一段HTML代码，当用户点击页面时，会在点击位置生成一个旋转的心形图案，图案由三个相交的半透明圆形组成，并从点击点逐渐向上消失。代码主要涉及JavaScript函数的编写，包括事件监听、元素创建、样式设置以及随机颜色生成等技术。

摘要由CSDN通过智能技术生成

<!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>
</head>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
</style>

<body>
</body>
<script>
    window.onload = function () {
        //点击出心
        function clickXin() {
            window.onclick = () => {
                var e = event || window.event;
                createBox(e.clientX, e.clientY, 'div', 30, 20)
            }
            // 生成图片
            function createBox(x, y, el, distance, time) {
                let timer = null;
                // 创建节点
                let Odiv = document.createElement(el);
                Odiv.id = "xin";
                OdivStyle(Odiv)
                let opacityI = 1 * distance
                let OdivW = (Odiv.style.width).slice(0, (Odiv.style.width).length - 2);
                let OdivH = (Odiv.style.height).slice(0, (Odiv.style.height).length - 2);
                let OdivL = x - (OdivW / 2);
                let OdivT = y - (OdivH / 2);
                Odiv.style.left = OdivL + 'px';
                Odiv.style.top = OdivT + 'px';
                document.body.appendChild(Odiv);
                let OdivNT = OdivT - distance
                timer = setInterval(() => {
                    Odiv.style.top = `${OdivT--}px`
                    Odiv.style.opacity = `${((opacityI--)/distance)+0.2}`
                    if (OdivT < OdivNT) {
                        clearInterval(timer)
                        document.body.removeChild(Odiv)
                    }
                }, time)
            }
            // 样式
            function OdivStyle(Odiv) {
                let rgbaColor = []
                for (let i = 0; i < 3; i++) {
                    rgbaColor.push(random(0, 255))
                }
                Odiv.style.cssText = `
        width:10px;
        height:10px;
        background:rgb(${rgbaColor[0]},${rgbaColor[1]},${rgbaColor[2]});
        position: absolute;
        transform: rotate(45deg);`;
                document.styleSheets[0].addRule('#xin::after', `
        content: '';
        width: inherit;
        height: inherit;
        position: absolute;
        top: 0;
        left: -50%;
        border-radius: 50%;
        background: inherit;`);
                document.styleSheets[0].addRule('#xin::before', `
        content: '';
        width: inherit;
        height: inherit;
        position: absolute;
        top: -50%;
        left: 0;
        border-radius: 50%;
        background: inherit;`);
            }
            // 随机生成指定范围数字
            function random(m, n) {
                return Math.floor(Math.random() * (n - m)) + m
            }

        }
        clickXin()

    }
</script>

</html>