随机复活系统
开发工具与关键技术： JavaScript
作者：尘则
撰写时间：2022/3/28
近日，我学习了对象和计时器，就想写一个小案例，类似于某些游戏中的复活后重新随机分配职业的系统，这个小案例其实很简单，只需要生成随机下标，从数组中取值并运用innerHTML方法将获取到的信息显示到网页上。话不多说直接上代码！
<body>
<div class="main">
<div id="name">随机复活系统</div>
<span id="start">点击开始</span>
</div>
<script>
var oName = document.getElementById("name");
var oStart = document.getElementById("start");
var names = "神官Ophilia,学者Cyrus,商人Tressa, 剑士Olberic,舞女Primrose,药师Alfyn,盗贼Therion,猎人H'aanit,卡奥斯之主,鬼畜王";
// split() 方法用于把一个字符串分割成字符串数组。
var arr = names.split(",");
// 设置函数
var time = 1;
var begin = null;
oStart.onclick = function() {
if (time == 1) {
begin = setInterval(function() {
oName.innerHTML = arr[Math.ceil(Math.random() * arr.length - 2)];
}, 1)
oStart.innerHTML = "点击结束"; time = 2;
} else {
clearInterval(begin);
oStart.innerHTML = "点击开始";
time = 1;
}
}
</script>
</body>
这里就是随机点名系统的所有代码，接下来就为各位讲解一下代码：
开始我们先设置DOM结构，很简单的一个大div里面嵌套一个小的div用来放着名字，一个span标签用来设置按钮，关于DOM结构的css，代码放这了，感兴趣的可以看看。
<style>
#name{
font-size: 60px;
text-align: center;
margin: 100px auto;
}
#start{
width: 200px;
height: 60px;
border: none;
background: rgb(255, 64, 30);
display: block;
margin: 0 auto;
color: rgb(207, 207, 207);
font-size: 30px;
border-radius: 6px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
#start:active{
background-color: rgb(59, 103, 170);
}
</style>
接下来进入正题js的编写，随机复活系统最关键的两点一个是定时器，一个是会将字符串转成数组在触发定时器的时候可以从中随机取值。
最开始和大多js一样，先获取各个div和标签的id，然后就是设置名字的字符串，这里用逗号隔开，为了在将字符串转换成数组的时候有参考。
var oName = document.getElementById("name");
var oStart = document.getElementById("start");
var names = "神官Ophilia,学者Cyrus,商人Tressa,剑士Olberic,舞女Primrose,药师Alfyn,盗贼Therion,猎人H'aanit,卡奥斯之主,鬼畜王";
下面就是声明一个空数组将转换过后的数组赋值给空数组，使用的是split方法，这样就有名字的数组了。接下来就是如何将名字找到了，因为写的是随机重生系统，所以要配合按钮的点击事件写函数。
var arr = names.split(",");
var time = 1;
var begin = null;
oStart.onclick = function() {
if (time == 1) {
begin = setInterval(function() {
oName.innerHTML = arr[Math.ceil(Math.random() * arr.length - 1)];
}, 1)
oStart.innerHTML = "点击结束";
time = 2;
} else {
clearInterval(begin);
oStart.innerHTML = "点击开始";
time = 1;
}
}
这就是配合点击事件写的函数，因为有开始和结束，所以要给开始和结束一个判断，所以这里我声明了一个time，根据time的值是否为1，来判断开始和结束。若if判断语句内的值为true我们就执行定时器函数，函数中我们根据random（）方法随机产生0~数组长度-1的数，对应每个名字的下标。将获取到的值通过innerHTML方法传到div中显示到网页上。在运用同样的方法给按钮设置名字。最后将time的值改为2，为了暂停时执行else语句。else中就很简单了，只需要将定时器暂停，并把按钮显示的字和time的值改回来就好了。最后简单的小案例随机复活系统就写好了。
看看结果：
这是我所做的随机复活系统，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
