用前端三件套写一个抽奖器

最新推荐文章于 2024-04-01 09:30:31 发布

江湖人称黑哥

最新推荐文章于 2024-04-01 09:30:31 发布

阅读量260

点赞数

分类专栏：前端小作品

本文链接：https://blog.csdn.net/qq_40088207/article/details/108472338

版权

小作品同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<HTML>  
<HEAD>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">  
</HEAD>  

<BODY>  
<div>  
<h1>谁是幸运儿！？</h3>  
<div id="control">
    <h2 id="result" style="color:firebrick;">^_^</h1>  
    <div id="demo" style="color:firebrick"></div>
    <INPUT TYPE="button" VALUE="开始" id="btnBegin" ONCLICK="begin();" >   
    <INPUT TYPE="button" VALUE="结束" id="btnEnd" ONCLICK="end();">  
    <INPUT type="file" VALUE="选择文件" style="color:goldenrod" onchange="importf(this)">
</div>
<div id="resultList" style="text-align:center"></div></div><div style="clear:both; float:none"></div>
<br>
</div>  
</BODY>  
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/xlsx.core.min.js"></script>
<style type="text/css">
h1{
    background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
    text-shadow: 5px -5px black, 4px -4px white;
    font-weight: bold;
    -webkit-text-fill-color:#D67573;
    -webkit-background-clip: text;
}
body{
    background-image:  url("img/img.jpg");
    font-size:60px;
    text-align:center;
}
#resultList div{  
    float:left; border:1px solid #006699; color: #123456; width:200px; height:100px; line-height:100px;  
    margin-right:15px; text-align:center;  
}  

input{
    border-radius:20px;
    width:170px;
    height:70px;
    font-size:40px;
    color: goldenrod;
}
</style>
 <TITLE>谁是幸运儿</TITLE>  
 <SCRIPT LANGUAGE="JavaScript">  
var names = []; 
/*
FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
                */
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
var name;//中奖人
var index = -1;
var time;  
document.getElementById("btnBegin").disabled = true;
function importf(obj) {//导入
    if(!obj.files) {
        alert("幸运儿名单格式不正确");
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        names =null;
        var data = e.target.result;
        if(rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }
        window.onerror = function(e) { 
            alert("获取不到幸运儿名单，请检查文件")
        } 
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据;
        var name = wb.SheetNames[0];
        var mycars = XLSX.utils.sheet_to_json(wb.Sheets[name]);
        console.log(mycars);
        names = new Array(mycars.length);
        for(var index = 0;index < mycars.length;index++){
            names[index] = mycars[index].name;
        }        
        console.log(names);
        document.getElementById("demo").innerHTML= "共有"+names.length+"个幸运儿，请开始抽奖";
    };
    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
    document.getElementById("btnBegin").disabled = false;
}

function fixdata(data) { //文件流转BinaryString
    var o = "",
        l = 0,
        w = 10240;
    for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}

function begin(){  
document.getElementById("btnBegin").disabled = true;  
document.getElementById("btnEnd").disabled = false;  
chouqian();  
}  
function chouqian(){
    if(names.length > 0){  
        index = Math.floor(Math.random()*1000 % names.length);  
        name = names[index];  
        document.getElementById("result").innerHTML = name;  

        time = window.setTimeout(chouqian,2);  
    }else {
        alert("没有下一个幸运儿了~")
        document.getElementById("result").innerHTML = "~结束~";  
    }
}  
function end(){
    if(names.length > 0){
        window.clearTimeout(time);  
        document.getElementById("btnBegin").disabled = false; 
        document.getElementById("btnEnd").disabled = true; 
        names.splice(index, 1);
        var div = document.createElement("div");  
        div.innerHTML = name;  
        document.getElementById("resultList").appendChild(div);
        document.getElementById("demo").innerHTML= "剩下"+names.length+"个幸运儿";
    }else if(names.length = 0){
        document.getElementById("demo").innerHTML= "";
        alert("没有下一个幸运儿了~")
    }else{
        alert("请选择幸运儿名单")
    }
} 
 </SCRIPT>  
</HTML>

运行截图：
在这里插入图片描述

江湖人称黑哥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用前端三件套写一个抽奖器

<!doctype html><HTML> <HEAD><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> </HEAD> <BODY> <div> <h1>谁是幸运儿！？</h3> <div id="control">
复制链接

扫一扫