抽奖
2021/9/26 23:11:29
本文主要是介绍抽奖,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
抽奖
效果图
style样式
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 .box { 8 width: 810px; 9 height: 600px; 10 margin: 0 auto; 11 background-color: antiquewhite; 12 position: relative; 13 } 14 15 div { 16 position: absolute; 17 width: 195px; 18 height: 200px; 19 background-color: black; 20 margin-right: 10px; 21 } 22 23 .div1 { 24 left: 0; 25 top: 0; 26 background-color: coral; 27 } 28 29 .div2 { 30 left: 205px; 31 top: 0; 32 } 33 34 .div3 { 35 left: 410px; 36 top: 0; 37 } 38 39 .div4 { 40 left: 615px; 41 top: 0; 42 } 43 44 .div5 { 45 left: 615px; 46 top: 205px; 47 } 48 49 .div6 { 50 left: 615px; 51 top: 410px; 52 } 53 54 .div7 { 55 left: 410px; 56 top: 410px; 57 } 58 59 .div8 { 60 left: 205px; 61 top: 410px; 62 } 63 64 .div9 { 65 left: 0; 66 top: 410px; 67 } 68 69 .div10 { 70 left: 0; 71 top: 205px; 72 } 73 74 #cj { 75 width: 200px; 76 height: 100px; 77 position: absolute; 78 left: 300px; 79 top: 250px; 80 } 81 </style>
<div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> <div class="div6"></div> <div class="div7"></div> <div class="div8"></div> <div class="div9"></div> <div class="div10"></div> <button id="cj">开始抽奖</button> </div>
js源码
<script> var aBox = document.querySelectorAll('.box>div'); var timer; var aa =0; // console.log(aBox); cj.onclick = function () { var gai=Math.random(); console.log(gai); if(gai<=0.35){ //调整几率 aa = Math.floor(Math.random() * (40 - 32) + 32); }else if(gai>0.35){ aa = Math.floor(Math.random() * (32-31) + 31); console.log(aa); } // console.log(aa); // console.log(aa % 5); var mm = 0; clearInterval(timer) timer = setInterval(function () { aBox.forEach(function (itm) { itm.style.background = 'black' }) aBox[mm].style.background = 'coral'; mm++; // console.log(mm); if (mm == 10) { mm = 0; aa = aa - 10; } if (mm == aa) { clearInterval(timer); } }, 100) } </script>
这篇关于抽奖的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)