JS动态小demo

1. 点击小事件

<style>  // 内部样式
        div{
            width: 30px;
            height: 30px;
            background: red;
            position: absolute;
        }
    </style>
<script>
        
        window.onclick = e => {
            let div = document.createElement('div')
            div.classList.add('kuang')
            let x = e.pageX
            let y = e. pageY
            div.style.left = x + 'px'
            div.style.top = y + 'px'
            document.body.appendChild(div)

            let rnd = Math.round(Math.random())

            let timer = setInterval(()=>{
                if (rnd) x -= 10
                else x += 10
                y -= 5
                div.style.left = x + 'px'
                div.style.top = y + 'px'

                if (y < -100){
                    div.remove()
                    clearInterval(timer)
                }
            },20)
        }
            
    </script>

最后

以上就是高大期待为你收集整理的JS动态小demo的全部内容，希望文章能够帮你解决JS动态小demo所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。