基於JavaScript實現簡單抽獎功能程式碼例項
阿新 • • 發佈：2020-10-21
為什麼會做這個東西呢，純屬好玩，閒的
其實是在上次班會的時候想到的，班會的時候叫人回答問題，沒人回答
當時就想，我如果抽籤抽到你了，你還是不回答嗎？？好吧，一切都是扯淡
先來看看頁面效果吧：
點選抽取就可以抽籤了，紅色框會顯示內容，（PS：紅色框是沒有的，僅僅做描述）
抽取到的效果圖如下，字型會隨機滾動，最後停止：
裡面的抽取內容完全可以替換，，，，
下面貼上程式碼：
<!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,.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>PS：
有點小瑕疵，可點選多次，每次隨機的結果都是不一樣的，所以當內容抽取完之後，頁面會顯示undefined，不過影響不大，啊哈哈哈哈
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。