Browse Source

feat: "更换抽奖页"

Ritchie 1 year ago
parent
commit
eb94148bfa
23 changed files with 4680 additions and 258 deletions
  1. BIN
      2.JPG
  2. BIN
      4.JPG
  3. BIN
      5.JPG
  4. BIN
      6.jpg
  5. 14 0
      README.md
  6. BIN
      back.jpg
  7. BIN
      back1.jpg
  8. BIN
      back2.png
  9. 57 0
      css/reset.css
  10. 141 0
      css/wall.css
  11. 0 0
      img/back.jpg
  12. BIN
      img/btn_exit.png
  13. 0 0
      img/favicon.ico
  14. BIN
      img/header-bg.png
  15. BIN
      img/icon-wall.jpg
  16. BIN
      img/title.png
  17. BIN
      img/title_old.png
  18. 269 258
      index.html
  19. 92 0
      js/member.js
  20. 2102 0
      js/tagcanvas.js
  21. 6 0
      js/vue.js
  22. 1909 0
      js/zepto.js
  23. 90 0
      result.html

BIN
2.JPG


BIN
4.JPG


BIN
5.JPG


BIN
6.jpg


+ 14 - 0
README.md

@@ -0,0 +1,14 @@
+# N年前写的年会抽奖程序
+
+[demo](https://fouber.github.io/lottery/)
+
+
+
+## 抽奖流程:
+
+1. 选择当次要抽奖的人数(30、10、5、2、1)
+2. 点击『开始』按钮,进入抽奖状态(这个过程仍可修改抽奖人数)
+3. 点击『停!』按钮,生成抽奖结果
+4. 点击任意人数按钮,可以回到闲置状态,已中奖的用户标记为黄色,不会二次命中
+
+PS:滚动鼠标滚轮,可以放大或缩小球体

BIN
back.jpg


BIN
back1.jpg


BIN
back2.png


+ 57 - 0
css/reset.css

@@ -0,0 +1,57 @@
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
+form, fieldset, input, textarea, p, blockquote, th, td {
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset, img {
+    border: 0;
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+    font-weight: normal;
+    font-style: normal;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+caption, th {
+    text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6, i {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 100%;
+}
+
+q:before, q:after {
+    content:'';
+}
+
+abbr, acronym {
+    border: 0;
+}
+
+body {
+    font-family: "Hiragino Sans GB","DroidSansFallback","Microsoft YaHei","微软雅黑",arial,simsun;
+    color: #333;
+    line-height: 22px;
+    font-size: 16px;
+}

+ 141 - 0
css/wall.css

@@ -0,0 +1,141 @@
+html, body {width: 100%; height: 100%;}
+.wall {width: 100%; height: 100%;
+    /* background-image: url(../img/icon-wall.jpg); */
+    background-image: url(../img/back.jpg);
+    overflow: hidden;
+    background-color: #121936;
+    background-size: 100% 100% ;
+    background-position: center center;
+    background-repeat: no-repeat;}
+.photos-wall {width:100%; height:100%;}
+.messages {width: 30%;  float: left;  position: relative; top: 52px; left: 0}
+
+
+/*照片墙*/
+.wall .photos {width: 75%; height: 50%; float: left; position: relative; top: 270px; left: 100px; padding-left: 130px;}
+.wall .photo-title {
+    position: absolute;
+    top: -280px; left: 50%;
+    background: url(../img/title.png) no-repeat 0 0;
+    background-size: 100% auto;
+    width: 800px; height: 350px;
+    margin-left: -350px;
+}
+/*
+.wall .photo-title{position: absolute; top:-137px ;left:50%; background: url(../img/title.png) no-repeat 0 0;
+    background-size:380px 107px; width:380px; height: 107px; margin-left:-190px;}*/
+.wall .photo-content{width:100%;height: 100%; margin:0 auto; position: relative;}
+.wall .photo {position: absolute;}
+.wall .photo .photo-inner{position: relative; width:100%;height: 100%;}
+.wall .photo .photo-inner .img-wrap{position: absolute; top:0; left:0;}
+.wall .photo .photo-inner .old{z-index: 10; opacity: 1; -webkit-transform-origin: center center;  /*-webkit-transition:all 2s linear;*/}
+.wall .photo .photo-inner .new{z-index: 11; opacity: 0; -webkit-transform-origin: center center; /*-webkit-transition:all 2s linear;*/}
+.wall .photo .photo-inner .show{-webkit-animation: show_photo 2s ease-in-out;}
+.wall .photo .photo-inner .hide{-webkit-animation: hide_photo 2s ease-in-out;}
+@-webkit-keyframes show_photo{
+    0% {opacity:0;-webkit-transform:scale(0, 0);}
+    100% { opacity:1;-webkit-transform:scale(1, 1);}
+}
+@-webkit-keyframes hide_photo{
+    0% {opacity:1;}
+    100% { opacity:0;}
+}
+/*.wall .photo .photo-inner .old{z-index: 10; opacity: 1; -webkit-transition:all 2s linear;}*/
+/*.wall .photo .photo-inner .new{z-index: 11; opacity: 0; -webkit-transition:all 2s linear;}*/
+/*.wall .photo .photo-inner .show{opacity: 1;}*/
+/*.wall .photo .photo-inner .hide{opacity: 0;}*/
+
+.wall .photo img {
+    width: 100%; height: 100%;
+    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
+}
+
+.wall .pos-0 {top:10px; left:0;width:65px; height:65px;}
+.wall .pos-1 {top:30px; left:70px;width:70px; height:70px;}
+.wall .pos-2 {top:0; left:145px;width:100px;height:100px;}
+.wall .pos-3 {top:30px; left:250px;width:70px; height:70px;}
+.wall .pos-4 {top:55px; left:325px;width:100px;height:100px;}
+.wall .pos-5 {top:70px; left:430px;width:85px;height:85px;}
+.wall .pos-6{top:15px; left:520px;width:65px;height:65px;}
+.wall .pos-7{top:-15px; left:595px;width:80px;height:80px;}
+
+.wall .pos-8{top:105px; left:40px;width:80px;height:80px;}
+.wall .pos-9{top:105px; left:125px;width:80px;height:80px;}
+.wall .pos-10{top:105px; left:210px;width:110px;height:110px;}
+.wall .pos-11{top:160px; left:325px;width:85px;height:85px;}
+.wall .pos-12{top:160px; left:415px;width:80px;height:80px;}
+.wall .pos-13{top:160px; left:500px;width:100px;height:100px;}
+.wall .pos-14{top:85px; left:520px;width:70px;height:70px;}
+
+.wall .pos-15{top:265px; left:-55px;width:80px;height:80px;}
+
+.wall .pos-16{top:190px; left:30px;width:70px;height:70px;}
+.wall .pos-17{top:190px; left:105px;width:100px;height:100px;}
+
+.wall .pos-18{top:220px; left:210px;width:110px;height:110px;}
+
+.wall .pos-19{top:250px; left:325px;width:85px;height:85px;}
+.wall .pos-20{top:245px; left:415px;width:75px;height:75px;}
+.wall .pos-21{top:265px; left:500px;width:85px;height:85px;}
+.wall .pos-22{top:70px; left:595px;width:85px;height:85px;}
+.wall .pos-23{top:160px; left:605px;width:75px;height:75px;}
+.wall .pos-24{top:240px; left:605px;width:65px;height:65px;}
+.wall .pos-25{top:310px; left:650px;width:60px;height:60px;}
+.wall .pos-26{top:265px; left:37px;width:65px;height:65px;}
+.wall .pos-27{
+    top: 15px;
+left: 685px;
+width: 65px;
+height: 65px;}
+.wall .pos-28{top: -67px;
+left: 685px;
+width: 75px;
+height: 75px;}
+
+
+
+.wall .pos-29{top: 103px;
+left: -44px;
+width: 75px;
+height: 75px;}
+.wall .pos-30{top: -45px;
+left: -81px;
+width: 75px;
+height: 75px;}
+
+.wall .pos-31 {
+top: 295px;
+left: 105px;
+width: 60px;
+height: 60px;
+}
+
+.wall .pos-32 {
+top: 240px;
+left: 675px;
+width: 65px;
+height: 65px;
+}
+
+.wall .messages {width: 25%;  float: right; position: relative; top: 77px; left: 0;}
+/*.wall .messages {width: 25%;float: right;position: relative;top: 80px;left: 0;}*/
+/*.wall .message {  margin: 25px 35px 25px 10px;}*/
+.wall .message {margin: 25px 35px 25px 50px;}
+.wall .message span {line-height: 25px;color: #000000;font-size: 18px;display: inline-block;padding: 5px;margin: 0;}
+
+.wall .message{height: auto;overflow: hidden;opacity: 1;}
+.wall .message.newMsg {-webkit-animation: change_height .7s linear;}
+    @-webkit-keyframes change_height{
+        0% {opacity:0;height: 0;}
+        100% { opacity:1;height:32px;}
+    }
+
+.wall .message .message-inner{position: relative; float:right; display: inline-block; background: #ffffff; border: 1px solid #ffffff; border-radius: 4px;margin-right: 20px;}
+
+.wall .message .message-inner:before {content: '';width: 0;height: 0;border-width: 5px 11px 0px 11px;position: absolute;border-style: solid;border-color: transparent transparent transparent #ffffff;right: -19px;bottom: -1px;}
+  
+#qrcode{width:105px;height:105px;position: absolute;top:20px;left:20px;}
+#qrcode img{width:100%;}
+#qrcode {background: white; padding: 5px;}
+
+.logo{color:#D13C3F;font-family: "Microsoft YaHei"; font-weight: bold; font-size: 13px; position: absolute;left:20px; bottom:20px;}

3.jpg → img/back.jpg


BIN
img/btn_exit.png


favicon.ico → img/favicon.ico


BIN
img/header-bg.png


BIN
img/icon-wall.jpg


BIN
img/title.png


BIN
img/title_old.png


+ 269 - 258
index.html

@@ -1,269 +1,280 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>申泽智能科技</title>
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <style>
-      body {
-        text-align: center;
-        background-color: #f2f2f2;
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-      #container {
-        width: auto;
-        height: 585px;
-        max-width: 1200px;
-        margin: 50px auto;
-        padding: 20px;
-        /* background-color: #f2d1c3; */
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-        background-image: url("./back.jpg");
-        background-size: cover;
-        background-position: top center;
-        background-repeat: no-repeat;
-        border-radius: 8px; /* 边框圆角 */
-      }
-      h1 {
-        font-size: 30px;
-        font-weight: bold;
-        color: #fcfcfc;
-        margin-bottom: 30px;
-      }
-      label {
-        display: block;
-        text-align: left;
-        font-weight: bold;
-        margin-bottom: 5px;
-        margin-left: 10px;
-      }
-      textarea {
-        height: 150px;
-      }
-      input {
-        height: 30px;
-      }
-      textarea,
-      input[type="text"] {
-        width: 100%;
-        /* padding: 10px; */
-        border: 3px solid #94e07fa8;
-        border-radius: 5px; /* 边框圆角 */
-        resize: none;
-        margin-left: -4px;
-        margin-right: -4px;
-        font-size: 24px;
-        font-style: bold;
-        font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-      }
-      input:focus,
-      textarea:focus {
-        outline: none;
-        border: 3px solid #e053018a;
-      }
-
-      button {
-        background-color: #e79b54;
-        color: #fff;
-        border: none;
-        padding: 10px 20px;
-        font-size: 16px;
-        font-weight: bold;
-        border-radius: 3px;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        margin-top: 10px;
-      }
-      button:hover {
-        background-color: #e8750a;
-      }
-      .result-container {
-        margin-top: 20px;
-      }
-      .result-container h2 {
-        font-size: 18px;
-        margin-bottom: 10px;
-        color: #333;
-      }
-      .result-container p {
-        font-size: 28px;
-        font-weight: bold;
-        color: #ea4f0d;
-        animation: blink 1.5s infinite;
-      }
-      @keyframes blink {
-        0% {
-          opacity: 1;
+<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>
+    <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="css/reset.css">
+    <link rel="stylesheet" type="text/css" href="css/wall.css">
+    <style type="text/css">
+        body, html {
+            width: 100%;
+            height: 100%;
         }
-        50% {
-          opacity: 0;
+        .result {
+            position: absolute;
+            height: 320px;
+            width: 100%;
+            left: 0; top: 50%;
+            margin-top: -160px;
+            text-align: center;
+            padding: 10px;
+            display: none;
         }
-        100% {
-          opacity: 1;
+        .result span {
+            display: inline-block;
+            font-size: 25px;
+            width: 150px;
+            background: #fff;
+            line-height: 30px;
+            color: #000;
+            margin: 5px;
+            border-radius: 10px;
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
+            padding: 10px 0;
         }
-      }
-
-      .custom-select {
-        position: relative;
-        width: 130px;
-        margin: 5px auto;
-      }
-
-      .custom-select select {
-        width: 100%;
-        padding: 8px;
-        border: 2px solid #a77fe0a8;
-        border-radius: 5px; /* 边框圆角 */
-      }
-
-      .pull-right {
-        float: right;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-      <h1>申泽智能讲师文化活动抽奖环节</h1>
-
-      <div class="custom-select pull-right">
-        <select name="selectSection" id="departmentSelect">
-          <option value="">选择部门</option>
-          <option value="RD">研发&综合中心</option>
-          <option value="PD">生产部</option>
-          <option value="MD">营销部</option>
-        </select>
-      </div>
-
-      <br />
-      <div>
-        <label for="namesInput">请输入观众人名单:</label>
-        <textarea
-          id="namesInput"
-          rows="4"
-          placeholder="请使用逗号分隔多个人名"
-        ></textarea>
-      </div>
-
-      <div>
-        <label for="excludedNamesInput">请输入被排除的主持人和讲师:</label>
-        <input
-          type="text"
-          id="excludedNamesInput"
-          placeholder="请使用逗号分隔多个人名"
-        />
-      </div>
-      <br />
-      <br />
-      <button id="submitBtn" onclick="selectRandomName()">抽取随机人名</button>
-      <div class="result-container">
-        <h2>本次幸运观众是:</h2>
-        <p id="randomName"></p>
-      </div>
-    </div>
-
-    <script>
-      // 只允许输入中英文字符,空格
-      var inputPattern = /^[\u4e00-\u9fa5a-zA-Z\s,,]+$|^$/;
-
-      document
-        .getElementById("submitBtn")
-        .addEventListener("click", function () {
-          // 获取用户输入的人名单
-          var namesInput = document.getElementById("namesInput").value;
-          var excludedNamesInput =
-            document.getElementById("excludedNamesInput").value;
-
-          if (
-            !inputPattern.test(namesInput) ||
-            !inputPattern.test(excludedNamesInput)
-          ) {
-            alert("非法字符,请重新输入!");
-            return;
-          }
-
-          // 将中文逗号全局替换成英文逗号
-          namesInput = namesInput.replace(/,/g, ",");
-          excludedNamesInput = excludedNamesInput.replace(/,/g, ",");
-
-          var namesArray = namesInput.split(",").map((name) => name.trim());
-          var excludedNamesArray = excludedNamesInput
-            .split(",")
-            .map((name) => name.trim());
-
-          selectRandomName(namesArray, excludedNamesArray);
-        });
-
-      document
-        .getElementById("departmentSelect")
-        .addEventListener("change", function () {
-          var selectDepartment = this.value;
-          var namesInput = document.getElementById("namesInput");
-
-          if (selectDepartment === "RD") {
-            namesInput.value =
-              "张凤兰, 王巧贤, 阮珊珊, 谢焕婷, 李婕妤, 李广, 高旭坤, 刘云, 邓远锋, 吴宗澍, 曾文龙, 黄彦, 刘银华, 肖夜华, 严成发, 文孔燊, 洪序滨, 江锦文, 张乐瑶, 张镜明, 陈智雄, 陈珍旭, 王莞琳, 王和富, 王则钰, 王杰, 蔡文怡, 陈智慧, 邓诗敏";
-          } else if (selectDepartment === "PD") {
-            namesInput.value = "张三, 李四, 王五";
-          } else if (selectDepartment === "MD") {
-            namesInput.value = "a, b, c";
-          }
-        });
-
-      function selectRandomName(namesArray, excludedNamesArray) {
-        // 过滤被排除的人名
-        var filteredNames = filterNames(namesArray, excludedNamesArray);
-        if (filteredNames.length === 0) {
-          document.getElementById("randomName").innerHTML = "没有可抽取的人名";
-          return;
+        button, input, optgroup, select, textarea {
+            color: inherit;
+            font: inherit;
+            margin: 0;
+            border: none;
         }
-
-        // 使用洗牌算法对过滤后的人名数组进行随机排序
-        for (var i = filteredNames.length - 1; i > 0; i--) {
-          var j = Math.floor(Math.random() * (i + 1));
-          var temp = filteredNames[i];
-          filteredNames[i] = filteredNames[j];
-          filteredNames[j] = temp;
+        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;
         }
 
-        var currentIndex = 0;
-        var interval = setInterval(function () {
-          // var randomIndex = Math.floor(Math.random() * filteredNames.length);
-          document.getElementById("randomName").innerHTML =
-            "是(¬‿¬): " + filteredNames[currentIndex] + " ?";
-            currentIndex++;
-            if (currentIndex === filteredNames.length) {
-              clearInterval(interval);
-            }
-        }, 400);
-
-        setTimeout(() => {
-          clearInterval(interval);
-          var luckyPerson =
-            namesArray[Math.floor(Math.random() * namesArray.length)];
-          while (excludedNamesArray.includes(luckyPerson)) {
-            luckyPerson =
-              namesArray[Math.floor(Math.random() * namesArray.length)];
-          }
-          document.getElementById("randomName").innerHTML =
-            "恭喜 " + luckyPerson + "  中奖o(^▽^)o";
-        }, 4000);
-      }
+        .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;
+        }
+        .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));
+        }
 
-      function filterNames(namesArray, excludedNamesArray) {
-        var filteredNames = [];
-        for (var i = 0; i < namesArray.length; i++) {
-          var name = namesArray[i].trim();
-          if (name !== "" && !excludedNamesArray.includes(name)) {
-            filteredNames.push(name);
-          }
+        .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);
         }
-        return filteredNames;
-      }
-    </script>
-  </body>
+        .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:50px;
+        }
+        .mask {
+            -webkit-filter:blur(5px);
+            filter:blur(5px);
+        }
+        #main {
+            -webkit-transition: all 1s;
+            transition: all 1s;
+        }
+        .result-btn {
+            margin-top: 20px;
+            text-align: right;
+            margin-right: 30px;
+            text-decoration: none;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+<div id="main" class="wall">
+    <div class="result-btn">
+        <!-- 右上角获奖名单入口 -->
+       <a href="./result.html" target="_blank">历史获奖名单</a>
+    </div>
+</div>
+<div id="result" class="result">
+</div>
+<div id="tools" class="tools">
+    <!-- 选择几个人中奖的按钮 -->
+     <!-- <button
+        v-for="value in btns"
+        @click="onClick(value)"
+        class="pure-button"
+        :class="{ 'button-error': selected == value}"
+       >{{value}}</button> -->
+    <button
+       class="pure-button"
+       @click="toggle"
+       :class="{'button-secondary': !running,
+               'button-success': running}">{{running?'停!':'抽取'}}</button>
+    <button class="pure-button button-warning" @click="reset">重置</button>
+</div>
+<script type="text/javascript" src="js/zepto.js"></script>
+<script type="text/javascript" src="js/vue.js"></script>
+<script type="text/javascript" src="js/tagcanvas.js"></script>
+<script type="text/javascript" src="js/member.js"></script>
+<script type="text/javascript">
+    (function(){
+        var choosed = JSON.parse(localStorage.getItem('choosed')) || {};
+        console.log(choosed);
+        var speed = function(){
+            return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
+        };
+        var getKey = function(item){
+            // return item.name + '-' + item.phone;
+            return item.name;
+        };
+        var createHTML = function(){
+            var html = [ '<ul>' ];
+            member.forEach(function(item, index){
+                item.index = index;
+                var key = getKey(item);
+                var color = choosed[key] ? 'yellow' : 'white';
+                html.push('<li><a href="#" style="color: ' + color + ';">' + item.name + '</a></li>');
+            });
+            html.push('</ul>');
+            return html.join('');
+        };
+        var lottery = function(count){
+            var list = canvas.getElementsByTagName('a');
+            var color = 'yellow';
+            var ret = member
+                .filter(function(m, index){
+                    m.index = index;
+                    return !choosed[getKey(m)];
+                })
+                .map(function(m){
+                    return Object.assign({
+                      score: Math.random()
+                    }, m);
+                })
+                .sort(function(a, b){
+                    return a.score - b.score;
+                })
+                .slice(0, count)
+                .map(function(m){
+                  choosed[getKey(m)] = 1;
+                  list[m.index].style.color = color;
+                //   return m.name + '<br/>' + m.phone; // 弹出人员的姓名和电话
+                  return m.name + '<br/>'; 
+                });
+            localStorage.setItem('choosed', JSON.stringify(choosed));
+            return ret;
+        };
+        var canvas = document.createElement('canvas');
+        canvas.id = 'myCanvas';
+        canvas.width = document.body.offsetWidth;
+        canvas.height = document.body.offsetHeight;
+        document.getElementById('main').appendChild(canvas);
+        new Vue({
+            el: '#tools',
+            data: {
+                selected: 1, // 默认选择的抽取人数
+                running: false,
+                // btns: [
+                //     // 选择被抽中的人数
+                //     2, 1
+                // ]
+            },
+            mounted () {
+                canvas.innerHTML = createHTML();
+                TagCanvas.Start('myCanvas', '', {
+                    textColour: null,
+                    initial: speed(),
+                    dragControl: 1,
+                    textHeight: 14
+                });
+            },
+            methods: {
+                reset: function(){
+                    if(confirm('确定要重置么?所有之前的抽奖历史将被清除!')){
+                        localStorage.clear();
+                        location.reload(true);
+                    }
+                },
+                onClick: function(num){
+                    $('#result').css('display', 'none');
+                    $('#main').removeClass('mask');
+                    this.selected = num;
+                },
+                toggle: function(){
+                    if(this.running){
+                        TagCanvas.SetSpeed('myCanvas', speed());
+                        var ret = lottery(this.selected);
+                        if (ret.length === 0) {
+                            $('#result').css('display', 'block').html('<span>已抽完</span>');
+                            return
+                        }
+                        $('#result').css('display', 'block').html('<span>' + ret.join('</span><span>') + '</span>');
+                        TagCanvas.Reload('myCanvas');
+                        setTimeout(function(){
+                            localStorage.setItem(new Date().toString(), JSON.stringify(ret));
+                            $('#main').addClass('mask');
+                        }, 300);
+                    } else {
+                        $('#result').css('display', 'none');
+                        $('#main').removeClass('mask');
+                        TagCanvas.SetSpeed('myCanvas', [5, 1]);
+                    }
+                    this.running = !this.running;
+                }
+            }
+        });
+    })();
+</script>
+</body>
 </html>

+ 92 - 0
js/member.js

@@ -0,0 +1,92 @@
+var member = [
+  {
+    "name": "张凤兰"
+  },
+  {
+    "name": "王巧贤"
+  },
+  {
+    "name": "阮珊珊"
+  },
+  {
+    "name": "谢焕婷"
+  },
+  {
+    "name": "李婕妤"
+  },
+  {
+    "name": "李广"
+  },
+  {
+    "name": "高旭坤"
+  },
+  {
+    "name": "刘云"
+  },
+  {
+    "name": "邓远锋"
+  },
+  {
+    "name": "吴宗澍"
+  },
+  {
+    "name": "曾文龙"
+  },
+  {
+    "name": "黄彦"
+  },
+  {
+    "name": "刘银华"
+  },
+  {
+    "name": "肖夜华"
+  },
+  {
+    "name": "严成发"
+  },
+  {
+    "name": "文孔燊"
+  },
+  {
+    "name": "洪序滨"
+  },
+  {
+    "name": "江锦文"
+  },
+  {
+    "name": "张乐瑶"
+  },
+  {
+    "name": "张镜明"
+  },
+  {
+    "name": "陈智雄"
+  },
+  {
+    "name": "陈珍旭"
+  },
+  {
+    "name": "王莞琳"
+  },
+  {
+    "name": "王和富"
+  },
+  {
+    "name": "王则钰"
+  },
+  {
+    "name": "王杰"
+  },
+  {
+    "name": "蔡文怡"
+  },
+  {
+    "name": "陈智慧"
+  },
+  {
+    "name": "邓诗敏"
+  },
+  {
+    "name": "蒋后平"
+  }
+]

File diff suppressed because it is too large
+ 2102 - 0
js/tagcanvas.js


File diff suppressed because it is too large
+ 6 - 0
js/vue.js


File diff suppressed because it is too large
+ 1909 - 0
js/zepto.js


+ 90 - 0
result.html

@@ -0,0 +1,90 @@
+<!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>
+    <link rel="stylesheet" type="text/css" href="css/reset.css">
+    <link rel="stylesheet" type="text/css" href="css/wall.css">
+    <style type="text/css">
+        .wall { 
+            overflow: scroll;
+            background-repeat: repeat;
+        }
+        ::-webkit-scrollbar {
+            display: none;
+        }
+        body, html {
+            width: 100%;
+            height: 100%;
+        }
+        .mask {
+            -webkit-filter:blur(5px);
+            filter:blur(5px);
+        }
+        #main {
+            -webkit-transition: all 1s;
+            transition: all 1s;
+        }
+        .result-list {
+            text-align: center;
+            color: #4de7c8;
+            font-size: 30px;
+            line-height: 50px;
+            margin-top: 50px;
+            margin-bottom: 50px;
+            font-family: '幼圆';
+        }
+        .result-title {
+            text-align: center;
+            color: #4de7c8;
+            font-size: 40px;
+            margin-top: 100px;
+            font-family: '幼圆';
+        }
+
+    </style>
+</head>
+<body>
+<div id="main" class="wall">
+    <div class="result-title">获奖名单</div>
+    <div class="result-list" v-for="result in results">
+        <div v-for="item in result">
+            {{item}}
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="js/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+        el: '#main',
+        data: {
+            results: []
+        },
+        mounted () {
+            let vm = this
+            let locals = window.localStorage
+            let str_results = []
+            // 遍历(排除choosed)
+            for(let i = 0; i<localStorage.length; i++){
+                if (localStorage.key(i) !== 'choosed') {
+                    str_results.push(localStorage.getItem(localStorage.key(i)))
+                }
+            }
+            // 分割每个string, 并将</br>换成空格
+            let results = []
+            for(let nameList of str_results) {
+                let temp = JSON.parse(nameList)
+                temp = temp.map(item => {return item.replace('<br/>', ' ')})
+                results.push(temp)
+            }
+            
+            // 根据长度进行排序,名单短的放在前面
+            results = results.sort((x, y) => { return x.length - y.length;})
+            this.results = results
+        },
+    })
+</script>
+</body>
+</html>