【原】無腦操作：HTML5 + CSS + JavaScript實現比賽排程
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>湯胖專用_比賽排程器</title> 9 <style> 10 label { 11 color: red; 12 } 13 14 div { 15 display: inline; 16 margin: 5px; 17 padding: 2px; 18 } 19 20 .initDiv { 21 background-color: black; 22 color: white; 23 } 24 25 .matchDiv { 26 background-color: orange; 27 color: black; 28 } 29 30 .playerDiv { 31 background-color: pink; 32 color: black; 33 } 34 35 .resultDiv{ 36 background-color: green; 37 color: white; 38 } 39 40 .resultData { 41 background-color: blue; 42 color: white; 43 } 44 45 .selectDiv { 46 background-color: #666666; 47 color: white; 48 } 49 </style> 50 </head> 51 52 <body> 53 <fieldset> 54 <legend>湯胖專用_比賽排程器の使用說明</legend> 55 <ol> 56 <li>選擇的檔案必須是utf-8格式</li> 57 <li>使用Chrome瀏覽器或360瀏覽器的極速模式</li> 58 <li>第一輪排程時，選擇要使用的文字檔案（參考模板檔案）</li> 59 <li>後續排程時，先點選重新整理頁面，再點選開始排程，即可使用上輪儲存的過關人員</li> 60 </ol> 61 </fieldset> 62 <hr/> 63 <div> 64 <input type="file" id="btnFiles" /> 65 <input type="button" id="btnPlan" value="步驟2、開始排程" /> 66 <input type="button" id="btnSave" value="步驟3、儲存資料" /> 67 <input type="button" id="btnUpdate" value="步驟4、重新整理頁面" /> 68 <hr/> 69 </div> 70 <script> 71 var arr = []; 72 var resultData = []; 73 74 // 擴充套件陣列功能：實現隨機排序 75 if (!Array.prototype.shuffle) { 76 Array.prototype.shuffle = function () { 77 for (var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = 78 this[j], this[j] = x); 79 return this; 80 }; 81 } 82 83 // 擴充套件陣列功能：實現刪除指定值元素 84 if (!Array.prototype.removeByValue) { 85 Array.prototype.removeByValue = function (val) { 86 for (var i = 0; i < this.length; i++) { 87 if (this[i] == val) { 88 this.splice(i, 1); 89 break; 90 } 91 } 92 }; 93 } 94 95 // 頁面初始化 96 window.onload = function () { 97 var btnFiles = document.getElementById('btnFiles'); 98 var btnPlan = document.getElementById('btnPlan'); 99 var btnSave = document.getElementById('btnSave'); 100 var btnUpdate = document.getElementById('btnUpdate'); 101 102 btnFiles.onchange = importFile; 103 btnPlan.onclick = matchPlan; 104 btnSave.onclick = saveData; 105 btnUpdate.onclick = updatePage; 106 }; 107 108 // 以CSS類名獲取元素 109 var getClass = function (classname) { 110 return document.getElementsByClassName(classname); 111 }; 112 113 var importFile = function () { 114 // 獲取讀取的File物件 115 var selectedFile = document.getElementById("btnFiles").files[0]; 116 if (selectedFile.name) { 117 // 讀取選中檔案的檔名 118 var name = selectedFile.name; 119 // 讀取選中檔案的大小 120 var size = selectedFile.size; 121 122 // 讀取操作 123 var reader = new FileReader(); 124 // 讀取檔案的內容 125 reader.readAsText(selectedFile); 126 127 reader.onload = function () { 128 // 當讀取完成之後會回撥這個函式，然後檔案內容儲存到result 129 var temparr = this.result.split(/[\s\n]/); 130 temparr.forEach(function (v, i) { 131 if (v != '') { 132 arr.push(v); 133 } 134 }); 135 136 // 第一輪排程時，文字檔案內容儲存在sessionStorage中，後續均使用sessionStorage 137 sessionStorage.setItem('resultData', arr); 138 }; 139 } 140 }; 141 142 var matchPlan = function () { 143 if (sessionStorage.getItem('resultData')) { 144 arr = sessionStorage.getItem('resultData').split(','); 145 } 146 147 var initLabel = document.createElement('label'); 148 initLabel.className = 'initLabel'; 149 initLabel.innerText = '初始資料：'; 150 document.body.appendChild(initLabel); 151 152 for (var i = 0; i < arr.length; i++) { 153 var tempdiv = document.createElement('div'); 154 tempdiv.id = 'initDiv' + i; 155 tempdiv.className = 'initDiv'; 156 tempdiv.innerText = arr[i]; 157 document.body.appendChild(tempdiv); 158 } 159 160 // 隨機排序 161 arr.shuffle(); 162 163 // 換行 164 document.body.appendChild(document.createElement('br')); 165 document.body.appendChild(document.createElement('br')); 166 167 // 顯示參賽人員資料 168 var matchLabel = document.createElement('label'); 169 matchLabel.innerText = '隨機排序：'; 170 document.body.appendChild(matchLabel); 171 172 for (var i = 0; i < arr.length; i++) { 173 var tempdiv = document.createElement('div'); 174 tempdiv.id = 'matchDiv' + i; 175 tempdiv.className = 'matchDiv'; 176 tempdiv.innerText = arr[i]; 177 document.body.appendChild(tempdiv); 178 } 179 180 document.body.appendChild(document.createElement('hr')); 181 182 var temp = document.createElement('label'); 183 temp.className = 'initLabel'; 184 temp.innerText = '比賽分組：'; 185 document.body.appendChild(temp); 186 187 // 換行 188 document.body.appendChild(document.createElement('br')); 189 document.body.appendChild(document.createElement('br')); 190 191 for (var i = 0; i < arr.length; i++) { 192 if (i % 2 == 0) { 193 var groupLabel = document.createElement('label'); 194 groupLabel.innerText = "第" + (Math.round(i / 2) + 1) + "組："; 195 document.body.appendChild(groupLabel); 196 197 var player1div = document.createElement('div'); 198 player1div.id = 'playerDiv' + i; 199 player1div.className = 'playerDiv'; 200 player1div.innerText = arr[i]; 201 document.body.appendChild(player1div); 202 } else { 203 var groupLabel = document.createElement('label'); 204 groupLabel.className = 'initLabel'; 205 groupLabel.innerText = " VS "; 206 document.body.appendChild(groupLabel); 207 208 var player2div = document.createElement('div'); 209 player2div.id = 'playerDiv' + i; 210 player2div.className = 'playerDiv'; 211 player2div.innerText = arr[i]; 212 document.body.appendChild(player2div); 213 214 // 換行 215 document.body.appendChild(document.createElement('br')); 216 document.body.appendChild(document.createElement('br')); 217 } 218 } 219 220 document.body.appendChild(document.createElement('hr')); 221 222 var resultLabel = document.createElement('label'); 223 resultLabel.innerText = "過關人員："; 224 document.body.appendChild(resultLabel); 225 226 // 換行 227 document.body.appendChild(document.createElement('br')); 228 document.body.appendChild(document.createElement('相關推薦
【原】無腦操作：HTML5 + CSS + JavaScript實現比賽排程
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" con
【原】無腦操作：Windows 10 + MySQL 5.5 安裝使用及免安裝使用
界面 圖標 ini文件 字符集設置 exe 可能 mon rem 選擇 本文介紹Windows 10環境下， MySQL 5.5的安裝使用及免安裝使用 資源下載： MySQL安裝文件：http://download.csdn.net/detail/lf19820717/
【原】無腦操作：IDEA + maven + SpringBoot + JPA + Thymeleaf實現CRUD及分頁
xtend sla lns ase tid item pen element per 一、開發環境： 1、windows 7 企業版 2、IDEA 14 3、JDK 1.8 4、Maven 3.5.2 5、MariaDB 6、SQLYog 二、Maven設
【原】無腦操作：Gitblit伺服器搭建及IDEA整合Git使用
1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" 3 xmlns:xsi="http://www.w3.org/2001/XM
【原】無腦操作：IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf實現基礎認證許可權
1 package cn.temptation.shiro; 2 3 import org.apache.shiro.spring.web.ShiroFilterFactoryBean; 4 import org.apache.shiro.web.mgt.DefaultWebSecurit
【原】無腦操作：IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf實現基礎授權許可權
1 package cn.temptation.shiro; 2 3 import at.pollux.thymeleaf.shiro.dialect.ShiroDialect; 4 import cn.temptation.dao.ResourceDao; 5 import
【原】無腦操作：ElasticSearch學習筆記（01）
健康 方便 階段 alt hits chrom 信息 repl out 開篇來自於經典的“保安的哲學三問”（你是誰，在哪兒，要幹嘛） 問題一、ElasticSearch是什麽？有什麽用處？ 答：截至2018年12月28日，從ElasticSear
【原】無腦操作：EasyUI Tree實現左鍵只選擇葉子節點、右鍵浮動選單實現增刪改
1 // 記錄新增還是修改 2 var flag; 3 // 臨時儲存選中節點資料 4 var tempNode; 5 6 // 頁面載入 7 $(function () { 8 // 選單樹繫結資料 9 $('#deptTree').
【原】無腦操作：IDEA + maven + SpringBoot + JPA + EasyUI實現CRUD及分頁
1 package cn.temptation.web; 2 3 import cn.temptation.dao.PersonDao; 4 import cn.temptation.model.Person; 5 import cn.temptation.util.Type
【原】無腦操作：Eclipse + Maven + jFinal + MariaDB 環境搭建
cat 結構 add ring filter port bean html 截器 一、開發環境 1、windows 7 企業版 2、Eclipse IDE for Enterprise Java Developers Version: 2019-03 (4.11.0)
【轉載】Python 騷操作：微信遠端控制電腦
轉自Python中文社群 https://mp.weixin.qq.com/s/KPBNKLYvPgJqoUsWR6zBxw 今天帶給大家一個非常有意思的 python 程式，基於 itchat 實現微信控制電腦。你可以通過在微信傳送命令，來拍攝當前電腦的使用者，然後圖片會發送到你的微信上
【轉】網頁禁止後退鍵BackSpace的JavaScript實現（相容IE、Chrome、Firefox、Opera）
1 var forbidBackSpace = function (e) { 2 // 獲取event物件 3 var ev = e || window.event; 4 // 獲取事件源 5 var obj = ev.target || ev.srcEl
【原】Go語言及Web框架Beego環境無腦搭建
本文涉及軟體均以截至到2013年10月12日的最新版本為準 1、 相關軟體準備： 1） go1.2rc1.windows-386.msi，對應32位windows系統安裝使用 下載地址： 2） go1.2rc1.windows-amd64.msi，對應32位windows系統安裝使用 下載地
【JQuery】JQuery學習筆記：JQuery操作HTML，即JQuery DOM操作
1，jQuery DOM操作，設定或獲得內容： 設定，在（）內填入內容即可，有回撥函式； text() - 設定或返回所選元素的文字內容 html() - 設定或返回所選元素的內容（包括 HTML 標記） val() - 設定或返回表單欄位的值 2，jQuery D
【原】iOS：手把手教你釋出程式碼到CocoaPods(Trunk方式)
Change Log: 2015.08.20 - 新增podspec檔案更新方法 2015.08.19 - 首次釋出 概述 關於CocoaPods的介紹不在本文的主題範圍內，如果你是iOS開發者卻不知道CocoaPods，那可能要面壁30秒了。直奔主題，這篇文章主要介紹如果把你的程式碼釋出到Cocoa
【原創】實現一個簡單的移動端左右滑動翻頁+ 點選下標翻頁 利用：HTML5+CSS+Js
//【如何做一個簡單的手機端頁面的翻頁】//第一步：建立移動端頁面內 HTML + CSS 【注】可用彈性佈局 但需要注意的是 外層盒子的定位//第二步： 思考問題 要實現怎樣的效果？//1. 手指滑動時觸發事件【左右】兩個方向 //2.點選footer部分的下
【精】iOS 日期操作總結：NSDate、NSDateFormatter
1、日期（NSDate） ///////////////////////////////////////////////////////////////////////// // //（1）NSDate 初始化 // ////////////////////////////
【轉載】C#工具類：Json操作幫助類
哈希表 封裝 bst repl 遇到 json serial 轉載 res Json序列化和反序列化在程序開發中時常會遇到，在C#中可以使用很多種方法實現對數據的Json序列化和反序列化，封裝一個Json操作工具類來簡化相應的操作，該工具類中包含以下功能：對象轉JSON、數
【原】Sql Server 2008---安裝時卸載Visual Studio
studio ima ext 一段 image 控制面板 選擇 應用 技術 由於數據庫連接不上，所以卸載數據庫，然後安裝的時候出問題報錯，結果是因為vs, 所以就有了卸載vs這一步。某些圖片借用一下。 1. 打開電腦中的控制面板--程序和功能 2.找到要卸載的軟件，但
【NLP】Python實例：基於文本相似度對申報項目進行查重設計
用戶 strip() 字符串 執行 原創 這樣的 string 得到 亂碼問題 Python實例：申報項目查重系統設計與實現 作者：白寧超 2017年5月18日17:51:37 摘要：關於查重系統很多人並不陌生，無論本科還是碩博畢業都不可避免涉及論文查重問題，這也