Javascript小小抽签器

小百小摆

已于 2023-10-05 19:12:47 修改

阅读量364

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2023-10-04 20:54:07 首次发布

本文链接：https://blog.csdn.net/m0_74399268/article/details/133562113

版权

有时候我们常常会面临一些需要抽签的情况，作为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;