【Javascript】 JS添加style的两种方法 No.2 

<!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>
        body{
            height: 125%;
            overflow: hidden;
            background-color: black;
            user-select:none;
            -moz-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            -khtml-user-select:none;
        }
        div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            text-align: center;
            line-height: 1250px;
            font-size: 500px;
        }
        /* .div{
            background-image: linear-gradient(to right , #ec1431, #5b1785);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
        } */
        @keyframes run{
            0%{transform:translateY(0%);opacity: 1;}
            99%{transform:translateY(-1999%);opacity: 1;}
            100%{transform:translateY(-2000%);opacity: 0;}
        }
        @keyframes run0{
            0%{opacity: 0;}
            50%{opacity: 0;}
            100%{opacity: 1;}
        }
    </style>
</head>
<body>
    <script>
        var ss=window.prompt('请输入烟花数量:',200)
        document.onmousedown=function(){
            clearInterval(time)
            div0=document.createElement('div')
            div0.style.color='rgb('+ color(0,255) +','+ color(0,255) +','+ color(0,255) +')'
            div0.style.width='100%'
            div0.style.height='100%'
            div0.innerHTML='余海顺SB'
            // div0.className='div'
            div0.style.animation='run0 2s infinite'
            document.body.appendChild(div0)
            div1=document.createElement('div')
            div1.style.backgroundColor='red'
            div1.style.left='50%'
            div1.style.top='100%'
            div1.style.animation='run 1s infinite'
            document.body.appendChild(div1)
            setTimeout(()=>{
                document.body.removeChild(div1)
            },1000)
            for(i=ss;i>0;i--){
                div=document.createElement('div')
                div.style.backgroundColor='rgb('+ color(0,255) +','+ color(0,255) +','+ color(0,255) +')'
                div.style.left='50%'
                div.style.top='100%'
                div.style.opacity=0
                // div.style.borderBottomLeftRadius=color(0,100)+'%'
                // div.style.borderTopLeftRadius=color(0,100)+'%'
                // div.style.borderBottomRightRadius=color(0,100)+'%'
                // div.style.borderTopRightRadius=color(0,100)+'%'
                div.style.animation='run'+ i +' 2s infinite'
                document.body.appendChild(div)
            }
            divlist=Array.from(document.querySelectorAll('div'))
            console.log(divlist)
            for(s=1;s<divlist.length;s++){
                runkey="@keyframes run"+ s +"{0% {transform: translate(0,0);opacity:0;}50% {transform: translate(0,-2000%);opacity:0;}100% {transform: translate("+color(-5000,5000)+"%,"+color(-5000,5000)+"%);opacity:1;}}"
                style=document.createElement("style")
                style.type='text/css'
                style.innerHTML=runkey
                document.getElementsByTagName('head')[0].appendChild(style)
            }
            console.log(document.querySelectorAll('head>style'))
            time=setInterval(function(){
                let arr=Array.from(document.querySelectorAll('head>style'))
                for(i=arr.length-1;i>0;i--){
                    arr[i].remove()
                }
                let divall=Array.from(document.querySelectorAll('body>div'))
                for(i=0;i<divall.length;i++){
                    divall[i].remove()
                }
            },2000)
        }
        time=setInterval(function(){
            let arr=Array.from(document.querySelectorAll('head>style'))
            for(i=1;i<arr.length;i++){
                arr[i].remove()
            }
            let divall=Array.from(document.querySelectorAll('body>div'))
            for(i=0;i<divall.length;i++){
                divall[i].remove()
            }
        },2000)
        function color(start,end){
            return Math.floor(Math.random()*(end-start)+start);
        }
    </script>
</body>
</html>
posted @ 2022-04-14 20:56  浊酒看红尘  阅读(3550)  评论(0)    收藏  举报