Skip to content

Commit 381220d

Browse files
SWXDCSWXDC
committed
main
1 parent 5ac806b commit 381220d

File tree

3 files changed

+174
-36
lines changed

3 files changed

+174
-36
lines changed

‎Tool/Wheel/index.html

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ <h1>半成品</h1>
2525
<button id="resetBtn" onclick="reset()">重設</button>
2626
<hr>
2727
<div class="save-load-block">
28-
<button id="saveBtn" onclick="save()">儲存</button>
29-
<button id="loadBtn" onclick="load()">載入</button>
28+
<button id="saveBtn" onclick="saveContent()">儲存</button>
29+
<button id="loadBtn" onclick="loadContent()">載入</button>
3030
</div>
3131
</div>
3232
</div>
33-
<div class="result-section">
33+
<div class="result-overview">
3434
<div class="current-result">
3535
<div class="result-title">
3636
<h1>本次中籤</h1>
@@ -63,27 +63,42 @@ <h1>中籤紀錄</h1>
6363
<div class="input-wrapper">
6464
<textarea id="inputContent" placeholder="在這裡輸入內容..."></textarea>
6565
</div>
66-
<div class="settings">
67-
<div class="settings-title">
68-
<h1>選項</h1>
66+
<div class="">
67+
<div class="settings">
68+
<div class="settings-title">
69+
<h1>選項</h1>
70+
</div>
71+
<div class="setting">
72+
<div class="setting-checkbox">
73+
<input id="auto-record" class="auto-record" type="checkbox" checked>
74+
<label class="auto-record-label" for="" >自動記錄</label>
75+
<input id="auto-content-remove" class="auto-content-remove" type="checkbox" checked>
76+
<label class="auto-content-remove-label" for="">自動刪除</label>
77+
</div>
78+
<div class="setting-speed">
79+
<label for="">旋轉速度</label>
80+
<select name="" id="customSpinSpeed">
81+
<option value="95">很慢</option>
82+
<option value="94">慢</option>
83+
<option value="92" selected>正常</option>
84+
<option value="85">快</option>
85+
<option value="80">很快</option>
86+
</select>
87+
</div>
88+
</div>
6989
</div>
70-
<div class="setting">
71-
<div class="setting-checkbox">
72-
<input id="auto-record" class="auto-record" type="checkbox" checked>
73-
<label class="auto-record-label" for="" >自動記錄</label>
74-
<input id="auto-content-remove" class="auto-content-remove" type="checkbox" checked>
75-
<label class="auto-content-remove-label" for="">自動刪除</label>
90+
<div class="tools">
91+
<div class="tool-title">
92+
<h1>工具</h1>
7693
</div>
77-
<div class="setting-speed">
78-
<label for="">旋轉速度</label>
79-
<select name="" id="customSpinSpeed">
80-
<option value="95">很慢</option>
81-
<option value="94">慢</option>
82-
<option value="92" selected>正常</option>
83-
<option value="85">快</option>
84-
<option value="80">很快</option>
85-
</select>
86-
94+
<div class="batch">
95+
<h2>批量增加</h2>
96+
<div class="batch-input">
97+
<input id="start" type="text" placeholder="開始">
98+
<span>至</span>
99+
<input id="end" type="text" placeholder="結束">
100+
</div>
101+
<button id="bathBtn" onclick="batch()" class="batch-btn">增加</button>
87102
</div>
88103
</div>
89104
</div>

‎Tool/Wheel/script.js

Lines changed: 72 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,46 @@
1+
// 讀取指定名稱的 cookie
2+
function readCookie(name) {
3+
const value = `; ${document.cookie}`; // 為了處理 cookie，添加分號
4+
console.log('Current cookies:', document.cookie); // Debug log，顯示當前 cookie
5+
const parts = value.split(`; ${name}=`); // 根據 cookie 名稱拆分
6+
return parts.length === 2 ? parts.pop().split(';').shift() : null; // 返回 cookie 值，或返回 null
7+
}
8+
9+
// 設置 cookie
10+
function setCookie(name, value, days) {
11+
const expires = `expires=${new Date(Date.now() + days * 864e5).toUTCString()}`;
12+
document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
13+
console.log(`Cookie set: ${name}=${value}`); // 檢查設置的 cookie
14+
}
15+
16+
// 初始化 textarea 的內容
17+
function initializeContent() {
18+
const savedContent = readCookie("savedContent");
19+
content.value = savedContent ? decodeURIComponent(savedContent) : DEFAULT_CONTENT;
20+
}
21+
22+
// 儲存 textarea 的內容到 cookie
23+
function saveContent() {
24+
setCookie("savedContent", inputContent.value, 3650); // 儲存 cookie，有效期 3650 天
25+
alert("內容已儲存!"); // 提示用戶內容已儲存
26+
}
27+
28+
// 讀取 cookie 中的內容並顯示在 textarea 中
29+
function loadContent() {
30+
reset();
31+
const savedContent = readCookie("savedContent");
32+
if (savedContent) {
33+
inputContent.value = decodeURIComponent(savedContent);
34+
alert("內容已讀取!"); // 提示用戶內容已讀取
35+
} else {
36+
alert("沒有找到儲存的內容!"); // 如果沒有找到，則顯示提示
37+
}
38+
}
39+
140
// 用戶資料輸入
241
var inputContent = document.querySelector("#inputContent");
342
var spinSpeedInput = document.querySelector("#customSpinSpeed");
43+
var isBatchMode = true;
444
const DEFAULT_CONTENT = "1\n2\n3\n4\n5\n6";
545
const displayResultElement = document.querySelector("#resultDisplay");
646
const prizeRecordTable = document.querySelector("#recordList");
@@ -10,17 +50,17 @@ let wheelSegments = []; // 將 segments 定義為全局變量
1050
// 更新轉盤的選項
1151
function updateWheelSegments() {
1252
wheelSegments = inputContent.value.split('\n').filter(segment => segment.trim() !== ""); // 更新全局的 segments
13-
if(wheelSegments == ""){
14-
wheelSegments = "#"
53+
if (wheelSegments.length === 0) {
54+
wheelSegments = ["#"];
1555
}
1656
}
1757

1858
// 初始化轉盤內容
1959
function initializeWheelContent() {
2060
spinSpeedMultiplier = (0.9 + spinSpeedInput.value);
2161
inputContent.value = DEFAULT_CONTENT;
22-
prizeRecordTable.innerHTML = ``
23-
displayResultElement.textContent = "#"
62+
prizeRecordTable.innerHTML = ``;
63+
displayResultElement.textContent = "#";
2464
updateWheelSegments();
2565
}
2666

@@ -114,22 +154,45 @@ function recordPrize() {
114154

115155
// 顯示結果
116156
function showSpinResult() {
117-
if(wheelSegments != "#"){
157+
if (wheelSegments[0] != "#") {
118158
const numSegments = wheelSegments.length; // 獲取段數
119159
const winningSegmentIndex = Math.floor((numSegments - (rotationAngle % (2 * Math.PI)) / (2 * Math.PI / numSegments)) % numSegments);
120160
displayResultElement.textContent = wheelSegments[winningSegmentIndex];
121161
recordPrize();
122162
autoRemove();
123-
}else{
163+
} else {
124164
displayResultElement.textContent = "請輸入選項";
125165
}
126166
}
167+
168+
// 批量生成數字
169+
function batch() {
170+
if (isBatchMode) {
171+
inputContent.value = ""; // 如果處於批量模式，清空內容
172+
}
173+
isBatchMode = false; // 退出批量模式
174+
175+
// 獲取用戶輸入的起始和結束數字
176+
const start = parseInt(document.querySelector("#start").value);
177+
const end = parseInt(document.querySelector("#end").value);
178+
179+
// 驗證輸入的數字
180+
if (isNaN(start) || isNaN(end)) {
181+
alert("請輸入有效的數字！"); // 提示用戶輸入有效數字
182+
return; // 退出函數
183+
}
184+
185+
// 從起始數字到結束數字進行迴圈
186+
for (let i = start; i <= end; i++) {
187+
inputContent.value += `${i}\n`; // 使用 \n 來進行換行
188+
}
189+
}
190+
127191
// 自動刪除
128192
function autoRemove() {
129193
var checkbox = document.getElementById('auto-content-remove');
130194

131195
if (checkbox.checked) {
132-
// 獲取贏得的區段索引
133196
const numSegments = wheelSegments.length;
134197
const winningSegmentIndex = Math.floor((numSegments - (rotationAngle % (2 * Math.PI)) / (2 * Math.PI / numSegments)) % numSegments);
135198

@@ -146,13 +209,12 @@ function autoRemove() {
146209
function start() {
147210
startWheelSpin();
148211
}
149-
function reset(){
212+
213+
function reset() {
150214
initializeWheelContent();
151215
renderWheel();
152-
153216
}
154217

155-
156218
// 初始化轉盤
157219
initializeWheelContent();
158220
renderWheel();

‎Tool/Wheel/style.css

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ textarea {
4747
#resetBtn { background-color: #e74c3c; }
4848
#saveBtn { background-color: #3498db; }
4949
#loadBtn { background-color: #f1c40f; color: #333; }
50+
#startBtn:hover, #resetBtn:hover, #saveBtn:hover, #loadBtn:hover, #bathBtn:hover{
51+
opacity: 0.8;
52+
}
5053

5154
/* ------------------- 存取按鈕區塊 ------------------- */
5255
.save-load-block {
@@ -76,7 +79,7 @@ textarea {
7679
}
7780

7881
/* 標題樣式 */
79-
.result-title, .record-title, .settings-title {
82+
.result-title, .record-title{
8083
text-align: center;
8184
color: white;
8285
font-size: 15px;
@@ -94,15 +97,24 @@ textarea {
9497
padding: 10px;
9598
}
9699

97-
/* ------------------- 設定區塊樣式 ------------------- */
100+
/* ------------------- 設定區塊與工具樣式 ------------------- */
101+
/* 設定 */
98102
.settings {
99103
width: 350px;
100104
border: 3px solid #888;
101105
border-radius: 5px;
102-
height: 250px;
103-
margin: 0 20px;
106+
height: 200px;
107+
margin: 0px 20px;
108+
margin-bottom: 100px;
104109

105110
}
111+
.settings-title{
112+
text-align: center;
113+
color: white;
114+
font-size: 15px;
115+
padding: 15px 100px;
116+
background-color: #888;
117+
}
106118
.setting{
107119
padding: 10px;
108120
font-size: 30px;
@@ -123,7 +135,56 @@ textarea {
123135
#customSpinSpeed{
124136
font-size: 25px;
125137
}
138+
/* 工具 */
139+
.tools{
140+
width: 350px;
141+
border: 3px solid #888;
142+
border-radius: 5px;
143+
height: 200px;
144+
margin: 0 20px;
145+
}
146+
.tool-title{
147+
text-align: center;
148+
color: white;
149+
font-size: 15px;
150+
padding: 15px 100px;
151+
background-color: #888;
152+
}
126153

154+
.batch {
155+
text-align: center;
156+
}
157+
158+
.batch h2 {
159+
margin-bottom: 10px;
160+
font-size: 1.2rem;
161+
}
162+
163+
.batch-input {
164+
display: flex;
165+
gap: 5px;
166+
justify-content: center;
167+
align-items: center;
168+
}
169+
170+
.batch-input input {
171+
width: 80px;
172+
padding: 8px;
173+
border: 2px solid #3498db;
174+
border-radius: 5px;
175+
text-align: center;
176+
}
177+
178+
.batch-btn {
179+
border: 0px;
180+
margin-top: 10px;
181+
background: #8e44ad;
182+
color: white;
183+
padding: 10px 50px; /* 設定按鈕內間距 */
184+
font-size: 18px;
185+
border: 0;
186+
border-radius: 20px;
187+
}
127188

128189
/* ------------------- 表格樣式 ------------------- */
129190
table {

0 commit comments

Comments
 (0)