math/rand实现简易抽奖
Posted 从此烟雨落金城,一人撑伞两人行
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了math/rand实现简易抽奖相关的知识,希望对你有一定的参考价值。
一、引入math/rand包
import (
"math/rand"
"time"
)
二、设置随机数种子
// 获取时间戳
timeStamp := time.Now().Unix()
// 设置随机数种子
rand.Seek(timeStamp)
三、案例
for i := 1; i < 6; i++
// 随机生成 [0,200)的整数
ans := rand.Intn(200)
fmt.Println("第", i, "位中奖编号:", ans)
/*
第 1 位中奖编号: 63
第 2 位中奖编号: 85
第 3 位中奖编号: 158
第 4 位中奖编号: 167
第 5 位中奖编号: 56
*/
即使再小的帆也能远航
原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐。
大家好,我是Counter。
本章带大家来简单的了解下原生JS实现转盘抽奖。
因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要,
因此,没有过多的阐述HTML与CSS,而JS基本每行都有注释,但这里CSS
也是起到了至关重要的一步,那就是控制背景色,以及结果的显示与隐藏,效果先给出,如下:
代码给出:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>turntable</title> /*<link rel="stylesheet" href="css/index.css">*/ <!-- css --> <style> body, table, tr, td { margin: 0; padding: 0; } .wrapper { position: relative; width: 300px; height: 300px; margin: 100px auto 0; text-align: center; } table { display: inline-block; } td, th { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 20px; } th { cursor: pointer; user-select: none; } /* 设置标识样式 */ tr .active { background-color: #ff6700; } /* 设置中奖结果 */ .results { display: none; position: absolute; top: 0; left: 50px; width: 200px; height: 100px; border: 1px solid black; border-radius: 30px; text-align: center; line-height: 100px; background-color: skyblue; } </style> </head> <body> <div class="wrapper"> <table> <tr> <td class="active">今</td> <td>天</td> <td>吃</td> </tr> <tr> <td>什</td> <th id="play">开始</th> <td>么</td> </tr> <tr> <td>来</td> <td>抽</td> <td>下</td> </tr> </table> <div class="results">今天吃火锅</div> </div> <!-- <script src="js/index.js"></script> --> <!-- js --> <script> // 获取开始元素 var playBtn = document.getElementById(‘play‘); // 获取所有td元素,获取到伪数组 var tdAry = document.getElementsByTagName(‘td‘); // 将伪数组的长度存储在tdLen变量中 var tdLen = tdAry.length; // 设置计时器变量,刚开始为空 var startTime = null; // 自己构造数组,使橘红色背景能够按照自己想要的方向进行循环移动 var tdList = [0, 1, 2, 4, 7, 6, 5, 3]; // 设置橘红色背景标识 var tdId = 0; // 设置已经奔跑的次数,刚开始为0次 var time = 0; // 固定跑3圈,一圈8次 var fixNum = 24 // 定义最大随机数 var MaxNum; // 定义随机数,开始和结束的阈值 var randomNum; // 获取中奖结果元素 var results = document.getElementsByClassName(‘results‘)[0]; // 绑定点击事件,当鼠标点击开始按钮后,触发playStart函数 playBtn.onclick = playStart; function playStart() { // 如果计时器不为空,那就意味着这个线程已经在跑了,就直接退出。 if (startTime != null) { return; } results.style.display = ‘none‘; // 奔跑的次数 time = 0; // 最大随机数,取值[0, 8],确保每个都能被选到 MaxNum = parseInt(Math.random() * 9) + fixNum; // 随机阈值,控制刚开始跑几步加速,以及剩几步减速,取值范围[3, 7] randomNum = parseInt(Math.random() * 5 + 3); // 开启计时器,每200毫秒执行一次move函数 startTime = setInterval(move,200); } function move() { // 每执行一次奔跑次数time就加1 time++; // 每次运行当前的背景色清空 tdAry[tdList[tdId]].className = ""; // 每执行一次背景色标识就加1 tdId++; // 判断如果标识大于7的话就标识tdId就等于0,否则的话就等于它本身,这个步骤如果没有进行判断和赋值的话,tdId就会一直自增下去,那么对应的td元素将没有,后台就会报错 tdId = tdId > 7 ? 0 : tdId; // 设置当前的td背景色 tdAry[tdList[tdId]].className = "active"; //如果奔跑的次数等于随机阈值的话,那么当前的计时器清空,重新开启一个新的计时器,并且是每20毫秒执行一次,这个步骤是控制加速的 if (time == randomNum) { clearInterval(startTime); startTime = setInterval(move,20); } // 如果奔跑的次数加上随机的阈值的话,那么就将当前的加速的计时器清空,并且重新开启一个每200毫秒的计时器,这个步骤是控制减速的 if (time + randomNum >= MaxNum) { clearInterval(startTime); startTime = setInterval(move,200); } // 如果奔跑的次数大于等于最大的奔跑次数,那么清空当前计时器,并且计时器等于null,直接返回出去,一次抽奖结束。这个步骤是控制抽奖结束。 if (time >= MaxNum) { clearInterval(startTime); startTime = null; // switch语句判断抽奖结果,这部分比较简单,就不赘述了。 switch(tdList[tdId]) { case 0: results.innerText = ‘今天吃转转乐‘; results.style.display = ‘block‘; break; case 1: results.innerText = ‘今天吃蜀九香‘; results.style.display = ‘block‘; break; case 2: results.innerText = ‘今天吃KFC‘; results.style.display = ‘block‘; break; case 4: results.innerText = ‘今天吃海底捞‘; results.style.display = ‘block‘; break; case 7: results.innerText = ‘今天吃外卖‘; results.style.display = ‘block‘; break; case 6: results.innerText = ‘今天吃土‘; results.style.display = ‘block‘; break; case 5: results.innerText = ‘今天吃牛排‘; results.style.display = ‘block‘; break; case 3: results.innerText = ‘今天吃草本汤‘; results.style.display = ‘block‘; break; } return; } } </script> </body> </html>
以上是关于math/rand实现简易抽奖的主要内容,如果未能解决你的问题,请参考以下文章