master

分支 (1)

管理

管理

master

yearlottery
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>新年快乐 — 年会抽奖程序</title>
    <meta name="keywords" content="抽奖H5网页,年会抽奖程序,炫酷的抽奖网页" />
    <meta name="description" content="一个用于年会抽奖的炫酷网页！" />
    <link href="img/logo.png" rel="icon">
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.5.7/css/layui.css" type="text/css"
        rel="stylesheet" />
    <style type="text/css">
        /*全局大小*/
        body,
        html {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin: 0;
        }

        @keyframes audio-rotate-360 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes audio-rotate-360 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .rui-audio-rotate-360 {
            animation: audio-rotate-360 2s linear;
            -webkit-animation: audio-rotate-360 2s linear;
        }

        .rui-audio-rotate-360 {
            animation: audio-rotate-360 2s linear infinite;
            -webkit-animation: audio-rotate-360 2s linear infinite;
        }

        .rui-animation-play-paused {
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
            /* Safari 和 Chrome */
        }

        /*背景样式*/
        .wall {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin: 0;
            background-image: url(img/tunian.jpg);
            overflow: hidden;
            background-color: #121936;
            background-size: 100% 100%;
            background-position: center center;
            background-repeat: no-repeat;
        }

        /*显示抽奖结果的样式*/
        .result {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(92, 92, 92, 0.25);
            display: flex;
            justify-content: center;
            align-items: center;


            background-image: url("img/alert.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;


        }


        /*显示抽奖结果的样式*/
        .result2 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-image: url("img/alert3.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        /*显示抽奖结果的样式*/
        .result2 .list {
            width: 85vw;
            height: 70vh;
            margin-top: 20vh;
            display: flex;
        }


        /*显示抽奖结果的样式*/
        .result2 .list ul {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: center;
            justify-content: space-between;
        }

        /*显示抽奖结果的样式*/
        .result2 .list ul li {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin: 20px 10px;
            background-image: url("img/bg.png");
            background-size: 100% 100%;
        }


        /*显示抽奖结果的样式*/
        .result2 .list ul li img {
            width: 50%;
            margin: 10px 25%;
        }

        /*显示抽奖结果的样式*/
        .result2 .list ul li .title {
            width: 100%;
            margin-top: 15px;
            color: #a90808;
            font-size: 28px;
        }

        /*显示抽奖结果的样式*/
        .result2 .list ul li .footer {
            width: 80%;
            background-image: url("img/bg2.png");
            margin-bottom: 0;
            background-size: 100% 100%;
            color: #ffffff;
            font-size: 25px;
            padding: 3px;
        }


        /*结果内部元素的布局*/
        .result .display {
            width: 50%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
        }

        /*奖品图片样式*/
        .result .display img {

            width: 25%;
            margin-top: 20%;
            margin-left: 39.5%;
            margin-right: 40.5%;

        }

        /*中奖文字*/
        .result .display .down {
            margin-top: 3%;
            margin-right: 0.5%;
        }

        /*奖品名字*/
        .result .display .down .item1 {
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }

        /*中奖人的样式*/
        .result .display .down .item2 {
            font-size: 25px;
            margin-top: 20px;
            font-weight: bold;
            color: #fff100;
            background-color: red;
            padding: 10px 18px;
            border-radius: 10px;
            text-align: center;
        }


        /**/
        button,
        input,
        optgroup,
        select,
        textarea {
            color: inherit;
            font: inherit;
            margin: 0;
            border: none;
        }

        button {
            overflow: visible;
        }

        button,
        select {
            text-transform: none;
        }

        button,
        html input[type=button],
        input[type=reset],
        input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer;
        }

        .pure-button {
            display: inline-block;
            zoom: 1;
            line-height: normal;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .pure-button {
            font-family: inherit;
            font-size: 100%;
            padding: .5em 1em;
            color: #444;
            color: rgba(0, 0, 0, .8);
            border: 0 rgba(0, 0, 0, 0);
            background-color: #E6E6E6;
            text-decoration: none;
            border-radius: 2px;
            position: relative;
            z-index: 9999;
        }

        .pure-button:focus {
            outline: 0
        }

        .pure-button-hover,
        .pure-button:hover,
        .pure-button:focus {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, .05)), to(rgba(0, 0, 0, .1)));
            background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
            background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1));
            background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
            background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
        }


        /*底部按钮的样式*/
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65);
        }

        .button-error {
            background: rgb(202, 60, 60);
        }

        .button-warning {
            background: rgb(223, 117, 20);
        }

        .button-secondary {
            background: rgb(66, 184, 221);
        }

        .tools {
            position: absolute;
            bottom: 20px;
            right: 20px;
            text-align: center;
        }

        .tools .pure-button {
            display: inline-block;
            margin: 5px;
            padding: 10px 0;
            text-align: center;
            width: 70px;
        }


        /*画布滤镜用于模糊显示*/
        .mask {
            -webkit-filter: blur(5px);
            filter: blur(5px);
        }

        /*过渡效果*/
        #main {
            -webkit-transition: all 1s;
            transition: all 1s;
        }


        /*vue 的淡出淡入特效*/
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 1s;
        }

        .fade-enter,
        .fade-leave-to

        /* .fade-leave-active below version 2.1.8 */
            {
            opacity: 0;
        }

        [v-cloak] {
            display: none;
        }


        /*过渡效果*/
        .result ul {
            margin-top: 35%;
            margin-right: 2%;
            display: block;
            height: 50vh;
            text-align: left;
        }

        .result ul span {
            font-weight: bold;
            margin-right: 25px;
            font-size: 25px;
        }

        .result ul li {
            display: block;
            font-size: 24px;
            margin-top: 3px;
        }

        /*对联*/
        .result .couplet {
            display: flex;
            align-content: center;
            align-items: center;
            width: 100px;
            height: 70vh;
            background-color: #d90505;
            border-radius: 1px;
            box-shadow: rgba(255, 241, 0, 0.38) 1px 1px 10px 1px, rgba(255, 241, 0, 0.38) -1px -1px 10px 1px;
            color: #fff100;
            font-size: 70px;
        }
    </style>
    <!--引入vue-->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
        type="application/javascript"></script>
</head>

<body>
    <!-- 背景音乐 -->
    <audio autoplay="" loop="" id="bgmusic">
        <source src="./music/gxfc_ldh.mp3">
    </audio>
    <!-- 抽奖开始的音效 -->
    <audio autoplay="" loop="" id="startmusic">
        <source src="./music/start.mp3">
    </audio>
    <!-- 抽奖停止的音效 -->
    <audio autoplay="" loop="" id="stopmusic">
        <source src="./music/stop.mp3">
    </audio>
    <!--主容器，显示词云-->
    <div id="main" class="wall">
    </div>


    <!--显示右下角的工具按钮-->
    <div id="app" class="tools" v-cloak>
        <img class="rui-animation-play-paused" id="music" title="背景音乐控制" src="./img/music.png" @click="stopOrGoon"
            style="width: 35px;height: 35px;margin-right:10px; cursor: pointer;"> </img>
        <button @click="toggle" class="pure-button" :class="running!=1?'button-error':'button-secondary'">
            <!--显示抽奖结果时，显示继续-->
            {{showResult ? "继续" : status[running]}}
        </button>
        <button class="pure-button button-success" @click="toggleFullScreen">{{fullState}}</button>
        <!-- <button class="pure-button button-secondary" @click="showSetting">设置</button> -->
        <!--显示抽奖结果-->
        <button class="pure-button button-secondary" @click="showList">结果</button>
        <button class="pure-button button-warning" @click="reset">重置</button>

        <!--显示抽奖的结果-->
        <transition name="fade">
            <!--展示页面-->
            <div id="result" class="result" v-if="running == 2">

                <div class="display" v-if="!showResult">
                    <!--输出抽奖结果-->
                    <img :src="prizes[position].url" />
                    <div class="down">
                        <div class="item1">{{prizes[position].prize + " " + prizes[position].name}}</div>
                        <div class="item2">{{prizes[position].person}}</div>
                    </div>
                </div>

            </div>


            <!--结果页面-->
            <div class="result2" v-if="showResult">

                <div class="list">

                    <!--循环输出结果-->
                    <ul>
                        <li v-for="(item,index) in prizesRverese" :key="index"
                            :style="{width: item.level == 1?'25%':item.level == 2?'20%':'12%'}">
                            <div class="title" :style="{fontSize:item.level == 1?'33px':'28px'}">{{item.name}}</div>
                            <img :src="item.url">
                            <div class="footer">{{item.person == "" ? item.prize : item.person}}</div>
                        </li>
                    </ul>
                </div>
            </div>

            <!--设置页面-->
            <div class="settings" v-if="showSettings">
                我是设置页面
            </div>
        </transition>
    </div>

    <!--引入jq-->
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/zepto/1.2.0/zepto.min.js"
        type="application/javascript"></script>
    <!--引入layui-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.5.7/layui.all.js"
        type="application/javascript"></script>
    <!--引入词云插件-->
    <script type="text/javascript" src="js/tagcanvas.js"></script>
    <!--默认的名单-->
    <script type="text/javascript" src="js/member.js"></script>

    <script type="text/javascript">


        /*页面加载完毕之后*/

        (function () {

            /*画布DOM*/
            var canvas;

            let temp = [];

            member.forEach(function (item, index) {
                temp.push({ name: item, index: index });
            })
            member = temp;


            /*清除抽奖记录*/
            localStorage.clear();
            let bgaudio = document.getElementById('bgmusic')
            bgaudio.pause();
            let musicimg = document.getElementById('music')
            musicimg.className = 'rui-animation-play-paused'
            let startaudio = document.getElementById('startmusic')
            startaudio.pause();
            let stopaudio = document.getElementById('stopmusic')
            stopaudio.pause();

            /*监控窗口大小变化，及时重绘canvas*/
            window.onresize = function () {

                /*窗口大小发生变化*/

                /*移除词云*/
                $("#myCanvas").remove();

                /*移除滤镜*/
                $('#main').removeClass('mask');

                /*重新创建词云*/
                createCanvas(vm);

                /*将抽奖状态归0*/
                vm.running = 0;

            }

            /*从本地存储获取当前被选中过的人员名单*/
            var choosed = JSON.parse(localStorage.getItem('choosed')) || {};


            /*词云的旋转速度*/
            var speed = function () {
                return [0.2, 0.08];
            };


            /*创建名单列表*/
            var createHTML = function (self) {
                /*创建词云列表*/
                var html = ['<ul>'];

                /*遍历存储好的人员名单*/

                let max = member.length;


                member.forEach(function (item, index) {

                    item.index = index;

                    /*  if(index == 2){

                          /!*写入不同的奖品图片*!/
                          if(self.currentLevel == 0){

                              html.push('<li><a href="#"><img style="width: 50px" src="img/1.jpg"/></a></li>');
                          }
                      }

                      if(index == Math.ceil(max/2)){

                          /!*写入不同的奖品图片*!/
                          if(self.currentLevel <= 2 && self.currentLevel>=0) {
                              html.push('<li><a href="#"><img style="width: 50px" src="img/2.jpg"/></a></li>');
                          }

                      }*/

                    /*   if(index == (max-2)){

                        /!*写入不同的奖品图片*!/
                        if(self.currentLevel <= 3 && self.currentLevel>=0) {
                            html.push('<li><a href="#"><img style="width:  50px" src="img/3.jpg"/></a></li>');
                        }

                    }*/

                    /*如何已经被抽奖抽中了，显示黄色的名字*/
                    console.log(!choosed[item.name]);

                    if (!choosed[item.name]) {
                        html.push('<li><a href="#">' + item.name + '</a></li>');
                    }


                });


                html.push('</ul>');

                return html.join('');
            };


            /*创建并重绘画布*/
            var createCanvas = function (self) {

                /*创建画布*/
                canvas = document.createElement('canvas');
                /*设置好ID*/
                canvas.id = 'myCanvas';
                /*设置画布的大小*/
                canvas.width = document.body.offsetWidth;
                /*设置画布的高度*/
                canvas.height = document.body.offsetHeight;
                /*将画布添加到网页渲染*/
                document.getElementById('main').appendChild(canvas);

                /*设置画布的内部html*/
                canvas.innerHTML = createHTML(self);


                /*词云开始绘制*/
                /*第一个参数是画布的dom
                * 第二个参数是 词云的列表dom（ul、li），如果列表是直接插入canvas 的innerhtml则无需指定
                * */
                TagCanvas.Start('myCanvas', '', {
                    textColour: "#FFD700",
                    initial: speed(),
                    textHeight: 42,
                    zoom: 1.05,
                    dragControl: true
                });

            }


            /*
            * @抽奖算法
            *
            * @第一步：通过过滤（filter）把中过奖的人排除
            * @第二步：遍历所有剩下的名字，随机生成一个分数对象。与代表每个人的对象合并
            * @第三步：从0开始，截取指定的抽奖数量的元素
            * @第四步：标记被抽中的人员，改变其显示的颜色。
            *
            * @最后，将被抽中的人员名单对象，json序列化存入localstorage对象
            * */
            var lottery = function (count) {

                /*获取画布内a标签*/
                var list = canvas.getElementsByTagName('a');

                var color = 'yellow';

                var ret = member

                    /*过滤成员，如果没有在已被抽中的名单内，则返回该元素组成新数组*/
                    .filter(function (m, index) {

                        /*添加索引*/
                        m.index = index;
                        return !choosed[m.name];
                    })
                    /*遍历元素进行处理*/
                    /*m代表单个元素*/
                    .map(function (m) {

                        /*m是一个对象*/

                        /*合并两个对象*/
                        let ob = Object.assign({
                            score: Math.random()
                        }, m);


                        /*作为新元素*/
                        return ob;

                    })
                    /*排序*/
                    .sort(function (a, b) {
                        return a.score - b.score;
                    })
                    /*截取数组*/
                    .slice(0, count)

                    /*遍历循环元素*/
                    .map(function (m) {

                        /*新增一个被抽中的员工*/

                        choosed[m.name] = 1;

                        /*重新合并*/
                        return m.name;

                    });


                /*更新被抽中过的名单*/
                localStorage.setItem('choosed', JSON.stringify(choosed));

                return ret;
            };


            /*实例化vue*/
            let vm = new Vue({
                /*挂载*/
                el: '#app',
                /*vue的数据*/
                data: {
                    /*默认的抽奖人数*/
                    selected: 1,

                    /*是否正在抽奖*/
                    running: 0,

                    fullState: "全屏",

                    /*抽奖步骤*/
                    status: ["开始抽奖", "停！", "继续抽奖"],

                    /*抽奖奖品和数量*/
                    /* 奖品名、级别、级别、图片、中奖人*/
                    prizes: [
                        {
                            name: "幸运奖", prize: "", level: 5, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "幸运奖", prize: "", level: 5, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "幸运奖", prize: "", level: 5, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "幸运奖", prize: "", level: 5, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "幸运奖", prize: "", level: 5, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "三等奖", prize: "", level: 4, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "三等奖", prize: "", level: 4, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "二等奖", prize: "", level: 3, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "一等奖", prize: "", level: 2, "url": "img/prize/common.png", person: ""
                        },
                        {
                            name: "特等奖", prize: "", level: 1, "url": "img/prize/common.png", person: ""
                        }
                    ],
                    /*正在抽第几个奖*/
                    position: 0,
                    /*是否展示抽奖信息*/
                    showResult: false,
                    showSettings: false,
                },
                /*生命周期-挂载完毕*/
                computed: {

                    /*奖品列表*/
                    prizesRverese: function () {

                        let temp = [];

                        for (let i = this.prizes.length - 1; i >= 0; i--) {
                            temp.push(this.prizes[i])
                        }
                        return temp;
                    }
                },
                mounted() {

                    /*vue实例创建完毕，开始创建词云*/
                    createCanvas(this);

                    /*将layer作为全局对象*/
                    layui.use(["layer"], function () {
                        window.layer = layui.layer;
                    });


                },
                methods: {

                    /*重置所有中奖记录
                    * */
                    reset: function () {

                        /*如果不是待抽奖状态*/
                        if (this.running != 0) {
                            return;
                        }

                        let index = layer.confirm('确定要重置么？所有之前的抽奖历史将被清除！', function () {
                            location.reload();
                        });


                    },
                    toggle: function () {


                        if (this.position >= this.prizes.length) {

                            /*所有奖品抽完了，当前奖品等级0*/
                            this.running = 0;

                            layer.msg("所有奖品都抽完了！");
                            return;

                        }

                        /*判断是否正在抽奖*/

                        /*是否展示了抽奖结果*/
                        if (this.showResult) {

                            this.showResult = !this.showResult;
                            /*进入待抽奖的状态*/
                            this.running = 0;

                            $('#main').removeClass('mask');

                            return;
                        }

                        /*如果正在抽奖*/
                        if (this.running == 1) {

                            /*将词云的速度转换为正常速度*/
                            TagCanvas.SetSpeed('myCanvas', speed());


                            /*随机生成抽奖名单*/
                            var ret = lottery(this.selected);

                            /*如果所有人都被抽中了，提示无可抽奖人员*/
                            if (ret.length === 0) {

                                layer.msg("所有人都中奖了！");

                                this.running = 0;

                                return;

                            } else {

                                $('#main').addClass('mask');
                                /*显示抽奖结果*/
                                /*$('#result').find(".item2").text(ret[0]);
                                $('#result').fadeIn();
                                */
                                let level = "";


                                /*判断当前的奖品等级*/
                                switch (this.prizes[this.position].level) {

                                    case 1:
                                        level = "一等奖";
                                        break;
                                    case 2:
                                        level = "二等奖";
                                        break;
                                    case 3:
                                        level = "三等奖";
                                        break;
                                    default:

                                }

                                /*中奖信息*/
                                this.prizes[this.position].person = ret[0];


                                /*重新加载人员名单*/
                                /*移除词云*/
                                $("#myCanvas").remove();
                                /*重新创建词云*/
                                createCanvas(this);


                                /*记录中奖时间和名单到本地*/
                                localStorage.setItem(new Date().toString(), ret[0]);


                            }


                            this.running = 2;
                            let bgaudio = document.getElementById('bgmusic')
                            bgaudio.pause();
                            let musicimg = document.getElementById('music')
                            musicimg.className = 'rui-animation-play-paused'
                            let startaudio = document.getElementById('startmusic')
                            startaudio.pause();
                            let stopaudio = document.getElementById('stopmusic')
                            stopaudio.play();
                            setTimeout(() => {
                                stopaudio.pause();
                                stopaudio.currentTime = 0
                            }, 1500)

                            /*进入中奖结果公式状态*/
                        } else if (this.running == 2) {
                            /*隐藏滤镜*/
                            $('#main').removeClass('mask');

                            /*进入待抽奖的状态*/
                            this.running = 0;

                            this.position++; //下一个待抽奖品

                        } else {
                            let bgaudio = document.getElementById('bgmusic')
                            bgaudio.pause();
                            let musicimg = document.getElementById('music')
                            musicimg.className = 'rui-animation-play-paused'
                            let startaudio = document.getElementById('startmusic')
                            startaudio.play();
                            /*加快词云的旋转速度*/
                            TagCanvas.SetSpeed('myCanvas', [3, 1]);
                            /*进入抽奖的状态*/
                            this.running = 1;

                        }


                    },
                    /*全屏切换*/
                    toggleFullScreen: function () {

                        /*如果不是待抽奖状态*/
                        if (this.running != 0) {
                            return;
                        }

                        /*是否处于全屏*/
                        if (!document.fullscreenElement) {

                            this.fullState = "正常";
                            document.documentElement.requestFullscreen();

                        } else {

                            if (document.exitFullscreen) {
                                this.fullState = "全屏";
                                document.exitFullscreen();
                            }

                        }
                    },
                    /*显示中奖名单*/
                    showList: function () {

                        /*如果正在抽奖*/
                        if (this.running == 1) {
                            return;
                        }


                        /*进入待抽奖的状态*/
                        this.running = 0;
                        if (localStorage.getItem('choosed')) {
                            let nowPosition = Object.keys(JSON.parse(localStorage.getItem('choosed'))).length
                            this.position = nowPosition
                        }


                        if (this.showResult) {
                            $('#main').removeClass('mask');
                        } else {
                            $('#main').addClass('mask');
                        }

                        /*改变显示的状态*/
                        this.showResult = !this.showResult;
                    },
                    // 音乐暂停与播放
                    stopOrGoon: function (event) {
                        let bgaudio = document.getElementById('bgmusic')
                        if (event.target.className.indexOf('rui-animation-play-paused') > -1) {
                            event.target.className = 'rui-audio-rotate-360';
                            bgaudio.play()
                        } else {
                            event.target.className = 'rui-audio-rotate-360 rui-animation-play-paused';
                            bgaudio.pause();
                        }
                    }
                }
            });
        })();
    </script>
</body>

</html>