基于JavaScript实现简单抽奖功能代码实例_JavaScript

基于JavaScript实现简单抽奖功能代码实例

2021-10-29 17:11静就是空 JavaScript

这篇文章主要介绍了基于JavaScript实现简单抽奖功能代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

为什么会做这个东西呢，纯属好玩，闲的

其实是在上次班会的时候想到的，班会的时候叫人回答问题，没人回答

当时就想，我如果抽签抽到你了，你还是不回答吗？？好吧，一切都是扯淡

先来看看页面效果吧：

基于JavaScript实现简单抽奖功能代码实例

点击抽取就可以抽签了，红色框会显示内容，（PS：红色框是没有的，仅仅做描述）

抽取到的效果图如下，字体会随机滚动，最后停止：

基于JavaScript实现简单抽奖功能代码实例

里面的抽取内容完全可以替换，，，，

下面贴上代码：

				?

									<!DOCTYPE html>

									<html lang="zh">

									<head>

									  <meta charset="UTF-8">

									  <meta name="viewport" content="width=device-width, initial-scale=1.0">

									  <meta http-equiv="X-UA-Compatible" content="ie=edge">

									  <title>Document</title>

									  <style>

									    *{margin: 0px;padding: 0px;}

									    li{list-style: none;}

									    body{

									      font-family: "楷体";

									      user-select:none;

									      background: url('1.jpg') no-repeat;

									      background-size: 100%;

									      /*background-color: red;*/

									    }

									    .section{

									      position: relative;

									      width:935px;

									      height: 460px;

									      background-color: rgba(0,0,0,.3);

									      margin:165px auto 0;

									      text-align: center;

									    }

									    .section h2{

									      height: 90px;

									      line-height: 90px;

									      font-size: 40px;

									      color:#fff;

									    }

									    .section .s-result{

									      height: 400px;

									      color: #fff;

									    }

									    .s-result .number{

									      float: left;

									      width: 895px;

									      height: 300px;

									      line-height: 300px;

									      margin-left: 20px;

									      font-size: 60px;

									      font-weight: bold;

									    }

									    .btn{

									      position:absolute;

									      left: 50%;

									      margin-left: -161px;

									      bottom: -40px;

									      width: 323px;

									      height: 81px;

									      border-radius: 30px;

									      background-color: #000;

									      cursor:pointer;

									    }

									    .btn p{

									      line-height: 81px;

									      font-size: 50px;

									      color: #fff;

									    }

									  </style>

									</head>

									<body>

									  <div class="section">

									    <h2>看看谁最幸运！！</h2>

									    <div class="s-result">

									    </div>

									    <div class="btn">

									      <p>点 击 抽 取</p>

									    </div>

									  </div>

									  <script>

									    var oBtn = document.getElementsByClassName('btn')[0];

									    var oResult = document.getElementsByClassName('s-result')[0];

									    var arrName = ['张三','李四','王五','赵六','李xx','杨xx','张xx','A_dmin'];     //抽签的内容

									    var step = 1;

									    var cnt = 1;

									    var flag = true;

									    oBtn.onclick = function (){

									      if(flag){

									        step = 1;

									        creatName();

									        flag = false;

									      }else{

									        var d = document.getElementsByClassName('number')[0];

									        oResult.removeChild(d);

									        step = 1;

									        creatName();

									      }

									    }

									    function getName(){

									      var num = Math.floor(Math.random()*(arrName.length-1));

									      var n = arrName[num];

									      arrName.splice(num,1);

									      return n;

									    }

									    function creatName(){

									      if(step > cnt){

									        return null;

									      }

									      step++;

									      var oDiv = document.createElement('div');

									      oDiv.className = 'number';

									      oResult.appendChild(oDiv);

									      var dis = 1;

									      var maxDis = 30;

									      var mySet = setInterval(function(){

									        dis++;

									        if(dis > maxDis){

									          oDiv.innerHTML = getName();

									          clearInterval(mySet);

									          creatName();

									          return null;

									        }

									        oDiv.innerHTML = arrName[Math.floor(Math.random()*(arrName.length-1))];

									      },50);

									    }

									  </script>

									</body>

									</html>