<!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>
【Javascript】 JS添加style的兩種方法 No.2
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。