日常练习-html+js+css制作一个抽奖网页

最新推荐文章于 2024-04-03 22:52:07 发布

菜鸟上路_lbz

最新推荐文章于 2024-04-03 22:52:07 发布

阅读量5.3k

点赞数 6

分类专栏：前端文章标签： html bootstrap css3

本文链接：https://blog.csdn.net/qq_44198436/article/details/105963260

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

<html>
<head>
<meta charset="utf-8">
<title>抽奖web</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body background="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588772845&di=207b5ab133cb84f363ba5e96e38e9e89&src=http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/02/19/1f671b65310564cdc8f42b67f9c8b0b9.jpg">
    <center><h1>抽奖程序</h1></center><br>
    <div class="container-fluid">
    <div class="row">
        <div class="col-sm-8">
        	<div>
                <div class="form-group">
                    <label for="comment">参与抽奖人员【例如张三18888888888-李四18888888888-……】</label>
                        <textarea class="form-control" rows="5" id="User"></textarea>
                </div>
                <div>
                    抽出几个：<input type="number" name="successUserNumber" id="randomNumber">
                    <button id="start" onclick="startRun()">开始抽奖</button>
                    <button onclick="stop()">停止</button>
                    <button onclick="location.reload()">重新抽奖</button>
                </div>
        	</div>
            <center>
                    <h1 id="randomUser"></h1>
                    <h1 id="successUser"></h1>
            </center>
        </div>
            <div class="col-sm-4">
                <div class="parent">
                    <div class="child">
                    <table class="table">
                        <thead>
                            <tr>
                            <th>参与抽奖人员</th>
                            </tr>
                        </thead>
                    <tbody id="tableuser">
                    </tbody>
                    </table>
                    </div>
                </div>
            </div>
    </div>
</div>
</body>
</html>

js and css：

<style type="text/css">
.parent{
    position:relative;
    height:150%;//高度根据需求自行设定
}
.child{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;  //left,top,right,bottom都为0，充满真个页面
    overflow-y:auto;
    overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
}
</style>
<script type="text/javascript">
var userArray=new Array();//定义用户数组
var timer;
var outUser;
var randomNumber;
var user;
function startRun() {
    $('#successUser').html('');
	var inUser=document.getElementById('User').value.split('-')
    randomNumber=document.getElementById('randomNumber').value
    $('#start').attr({"disabled":"disabled"});//保证一次点击一次抽奖防止死循环
	for (i=0;i<inUser.length;i++) {
        userArray[i]=inUser[i]
		user+='<tr><td>'+inUser[i]+'</td></tr>'
    }
        $('#tableuser').html(user);
        outUser=shuffle(userArray);
        timer=setInterval("randomShow()",10);
}
function shuffle(arr) {
    //著名的洗牌算法，原理就是遍历数组元素，将当前元素与随机抽取的一个剩余元素进行交换。
    for (let i=arr.length-1; i>=0; i--) {
        let rIndex = Math.floor(Math.random()*(i+1));
        // 打印交换值
        // console.log(i, rIndex);
        let temp = arr[rIndex];
        arr[rIndex] = arr[i];
        arr[i] = temp;
    }
    return arr;
}
function randomShow(){
    pcount = userArray.length - 1;
	num = Math.floor(Math.random() * pcount);
    html=userArray[num]
    $('#randomUser').html(html)
}
function stop(){
    let html=''
    clearInterval(timer);
    //$('#start').removeAttr('disabled');
    $('#randomUser').html('');
    for(i=0;i<randomNumber;i++){
        var number=i+1
        html+='<br><span class="badge badge-success">第'+number+'名-----'+outUser[i]+'</span><br>'
    }

    $('#successUser').html(html);
}
</script>

在这里插入图片描述
学习阶段，代码可能有些冗余。

菜鸟上路_lbz

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
日常练习-html+js+css制作一个抽奖网页

html<html><head><meta charset="utf-8"><title>抽奖web</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...
复制链接

扫一扫