result.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="screen-orientation" content="portrait">
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
  7. <title>申泽抽奖小程序</title>
  8. <link rel="stylesheet" type="text/css" href="css/reset.css">
  9. <link rel="stylesheet" type="text/css" href="css/wall.css">
  10. <style type="text/css">
  11. .wall {
  12. overflow: scroll;
  13. background-repeat: repeat;
  14. }
  15. ::-webkit-scrollbar {
  16. display: none;
  17. }
  18. body, html {
  19. width: 100%;
  20. height: 100%;
  21. }
  22. .mask {
  23. -webkit-filter:blur(5px);
  24. filter:blur(5px);
  25. }
  26. #main {
  27. -webkit-transition: all 1s;
  28. transition: all 1s;
  29. }
  30. .result-list {
  31. text-align: center;
  32. color: #4de7c8;
  33. font-size: 30px;
  34. line-height: 50px;
  35. margin-top: 50px;
  36. margin-bottom: 50px;
  37. font-family: '幼圆';
  38. }
  39. .result-title {
  40. text-align: center;
  41. color: #4de7c8;
  42. font-size: 40px;
  43. margin-top: 100px;
  44. font-family: '幼圆';
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div id="main" class="wall">
  50. <div class="result-title">获奖名单</div>
  51. <div class="result-list" v-for="result in results">
  52. <div v-for="item in result">
  53. {{item}}
  54. </div>
  55. </div>
  56. </div>
  57. <script type="text/javascript" src="js/vue.js"></script>
  58. <script type="text/javascript">
  59. new Vue({
  60. el: '#main',
  61. data: {
  62. results: []
  63. },
  64. mounted () {
  65. let vm = this
  66. let locals = window.localStorage
  67. let str_results = []
  68. // 遍历(排除choosed)
  69. for(let i = 0; i<localStorage.length; i++){
  70. if (localStorage.key(i) !== 'choosed') {
  71. str_results.push(localStorage.getItem(localStorage.key(i)))
  72. }
  73. }
  74. // 分割每个string, 并将</br>换成空格
  75. let results = []
  76. for(let nameList of str_results) {
  77. let temp = JSON.parse(nameList)
  78. temp = temp.map(item => {return item.replace('<br/>', ' ')})
  79. results.push(temp)
  80. }
  81. // 根据长度进行排序,名单短的放在前面
  82. results = results.sort((x, y) => { return x.length - y.length;})
  83. this.results = results
  84. },
  85. })
  86. </script>
  87. </body>
  88. </html>