前端web页面随点击事件触发弹出文字

 

// const body = document.querySelector('#my')
const body = document.querySelector('body')
body.addEventListener('click',e=>{
    // addBox(e)
},false)
//出现逻辑
function addBox(e){
    const x = e.clientX + 'px';
    const y = e.clientY + 'px';

    const box = document.createElement('div')
    box.classList.add('box')
    box.style.color = `rgb( ${Math.floor(Math.random()*255+1)} , ${Math.floor(Math.random()*255+1)} , ${Math.floor(Math.random()*255+1)} )`
    box.innerHTML = `666`
    box.style.left = `${x}`
    box.style.top = `${y}`

    console.log("addBox:", box.style, box.classList, e)
    body.appendChild(box)//放入body
    setTimeout(()=>{
        box.classList.add('move')//设置出现动画
    },0)
    //动画结束移除div
    box.addEventListener('transitionend',e=>{
        e.target.remove()
    },false)
}

/* 鼠标特效 */
var a_idx = 0;

jQuery(document).ready(function($) {
    $("body").click(function(e) {
        // var a = new Array("自信", "自强", "坚持", "勇敢", "真诚", "快乐", "不悲伤", "克己", "守礼", "功德 +1", "功德 +2");

 

        // console.log(e, e["target"], e["target"].childNodes, e["target"].childNodes.nodeName);

        var a1 = new Array("自信", "自强", "坚持", "勇敢", "真诚", "快乐", "克己", "守礼");

        var a2 = new Array("功德 +1", "功德 +2", "功德 +1", "功德 +2", "功德 +1", "功德 +2", "功德 +999");

        var a = e["target"]["tagName"] == 'IMG' ? a2 : a1;

        // 可以修改显示的字

        console.log("XXX:", e["target"]["tagName"], e, a);

// 可以修改显示的字
        var $i = $("<span />").text(a[Math.floor(Math.random() * a.length)]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": `rgb( ${Math.floor(Math.random()*255+1)} , ${Math.floor(Math.random()*255+1)} , ${Math.floor(Math.random()*255+1)} )`
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});