js随机动画生成一组随机数字.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

实用代码

实用插件

6 浏览量 2023-09-27 22:18:18 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

js随机动画生成一组随机数字.zip （1个子文件）

index.html 2KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js随机动画生成一组随机数字</title> <style> .number{ transition:5s all ease-out; float:left; border-radius:50%; margin:10px; width:100px; height:100px; line-height:100px; text-align:center; font-size:60px; background:#f00; color:#fff;} .active{transition:.3s all ease-in; height:200px; line-height:200px; transform: rotateY(360deg);transform:0.4s rotate(100deg); background:#0FF;} input#btn{ width:200px; border-radius:30%; outline:none; margin:10px; height:100px; font-size:60px; float:left;} </style> </head> <body>  <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <div class="number"></div> <input type="button" value="换一换" id="btn" /> <script> window.onload=function(){ var aDiv=document.getElementsByTagName('div'); getTicket(); function getTicket() { var arr=[]; while(arr.length<6) { var n=ran(1,34); if(!findArr(arr,n)) { arr.push(bl(n)); } } arr.sort(function(n1,n2){ return n1-n2; }); function bl(n) { return n<10?'0'+n:''+n; } function findArr(arr,n) { for(var i=0;i<arr.length;i++) { if(arr[i]==n) { return true; } } return false; } function ran(n,m) { return Math.floor(Math.random()*(m-n)+n) } for(var i=0;i<aDiv.length;i++) { aDiv[i].innerHTML=arr[i]; } } var oBtn=document.getElementById('btn'); oBtn.onclick=function(){ getTicket(); for(var i=0;i<aDiv.length;i++) { aDiv[i].className='active'; } setTimeout(function(){ for(var i=0;i<aDiv.length;i++) { aDiv[i].className=''; } },400); }; }; </script>  </body> </html>

评论收藏

内容反馈

版权申诉