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内容请搜索靠谱客的其他文章。