用JQuery或者JavaScript实现简单的抽奖程序

最新推荐文章于 2024-07-31 13:55:09 发布

小小舍

最新推荐文章于 2024-07-31 13:55:09 发布

阅读量1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_43560721/article/details/83690808

版权

jquery 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

原理：如何生成随机数，开始和结束监听器。

（1）随机数可以用Math.random()函数，该函数可以生成一个大于0小于1的小数，之后用该随机数乘以最大的下标索引值或者用自定义函数GetRnd(min,max)来获取一个随机的整型下标值。

（2）使用timer变量来控制监听器的开启和停止，在开始定时器时，timer就被创建和赋值，当单击“停止”按钮时，再清除该监听器。

运行效果：

单击开始按钮，名字不停变换，点击停止名字不再变换，input框同样获得停止时最后出现的名字。

JQuery：


<!DOCTYPE html>
<html>
<title>抽奖</title>
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var nameArray = ["张三","李四","王五","石六","小七"];
            var timer;
            $("input:eq(0)").click(function(){
                // 利用setInterval()函数进行人员名字切换
                timer = setInterval(function(){
                    var n = Math.floor(Math.random() * nameArray.length-1);
                    $("div").html(nameArray[n]);
                    $("input:eq(1)").click(function(){
                        clearInterval(timer);
                        $("input:eq(2)").val( $("div").text());
                    })
                },30);
            })

        })
    </script>
</head>
<body>
<div>请单击开始抽奖</div>
<input type="button" value="开始抽奖">
<input type="button" value="停止">
<input type="text">
</body>
</html>

JavaScript:

<!DOCTYPE html>
<html>
<title>抽奖</title>
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var nameArray = ["张三","李四","王五","石六","小七"];
        var num = nameArray.length-1;
        var timer;
        function change(){
            //GetRnd(0,num)为0-num之间的随机数
            //快速显示数组中下标为GetRnd(0,num)的名字
            document.getElementById("show").innerHTML = nameArray[GetRnd(0,num)];
        }
        function begin(){
            //停止定时器（关闭）
            clearInterval(timer);
            //随机数据变换速度，越小变换的越快
            //重新启动
            timer = setInterval('change()',10);
        }
        function end(){
            //停止定时器（关闭）
            //达到保留对象作用，以便再次使用
            clearInterval(timer);
            //输出中奖人名字
            document.getElementById("result").value=document.getElementById("show").innerText;
        }
        //返回最小值到最大值之间的一个随机数
        // 自定义函数
        function GetRnd(min,max){
            //公式
           return parseInt(Math.random()*(max-min+1)+min,10);
            //Math.floor(Math.random()*(max-min+1)+min);
        }
    </script>
</head>
<body>
<div id="show">请单击开始抽奖</div>
<input type="button" value="开始抽奖" onclick="begin()">
<input type="button" value="停止" onclick="end()">
<input type="text" id="result">
</body>
</html>