本文主要是介绍Javascript小小抽签器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
有时候我们常常会面临一些需要抽签的情况，作为IT人，不必从网上找一些抽签软件、小程序、在手机上下载一些抽签APP！OK，今天我们直接用JS实现一个小小抽签器，也就五分钟的事情，还能让人觉得耳目一新。诶呦？你小子这么喜欢编程（这么能装）？
<!DOCTYPE html>
<html>
<head><title>随机抽签器</title>
</head>
<style>h1 {margin-top: 50px;text-align: center;font-size: 100px;}div {text-align: center;display: block;}.tip {margin-top: 30px;font-size: 20px;}button {font-size: 15px;width: 80px;height: 30px;margin: 30px;}
</style>
<body><h1 id="title">抽签</h1><h1 id="text"></h1><div><button id="draw">开始抽签</button><button id="go_on">继续抽签</button></div><div class="tip"><span>使用随机数做的小玩意，可以右键查看页面源代码</span><a href="https://www.bilibili.com/video/BV14J4114768/?spm_id_from=333.337.search-card.all.click&vd_source=3f41245887d99badc559acc07abd5ea2">学习链接</a></div><script>startInterval();var intervalId; var texts = ["文本1","文本2","......"];var currentIndex = 0; var draw = document.getElementById("draw");var go_on = document.getElementById("go_on");var textElement = document.getElementById("text");function startInterval(){stopInterval();intervalId =setInterval(function() {textElement.textContent = texts[currentIndex];currentIndex = (currentIndex + 1) % texts.length;}, 30); }function stopInterval() {clearInterval(intervalId);}function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;}go_on.onclick = function(){startInterval();}draw.onclick = function(){var randomNum = getRandomInt(0, 15); console.log(randomNum);textElement.textContent = texts[randomNum];stopInterval();};</script>
</body>
</html>
var intervalId;
var texts = ["文本1","文本2","......",];
var currentIndex = 0;
var draw = document.getElementById("draw");
var go_on = document.getElementById("go_on");
var textElement = document.getElementById("text");
这一部分就是喜闻乐见的用ID给所有控件注册变量的环节，有了这些变量我们就可以操作控件。
function startInterval(){
stopInterval();
intervalId =setInterval(function() {
textElement.textContent = texts[currentIndex];
currentIndex = (currentIndex + 1) % texts.length;
}, 30);
}
function stopInterval() {
clearInterval(intervalId);
}
这一部分是在startInterval()函数中定义一个计时器，并添加文字闪动功能，
textElement.textContent = texts[currentIndex];是将h1标签里的文字切换成数组中对应currentIndex下标的值， currentIndex = (currentIndex + 1) % texts.length;是在数组越界时重置当前下标的值。
setInterval（function，time）的第二个参数30是，每隔0.03秒进行一次刷新。
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}这个函数的作用是获取一个随机数字。
go_on.onclick = function(){
startInterval();
}这是给继续抽签按钮注册事件，意思是重启计时器。
draw.onclick = function(){
var randomNum = getRandomInt(0, 15);
console.log(randomNum);
textElement.textContent = texts[randomNum];
stopInterval();
};这就是抽签功能实现的函数，动态效果和抽签是分开实现的，动态效果只是为了好看。
我的任务完成了！！！最终效果是这样滴：
可惜CSDN上传视频审核太慢了，大致就是这样啦，想象一下文字在设定的几个文本里来回跳动哦。
这篇关于Javascript小小抽签器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
