-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path20240118-2.html
More file actions
257 lines (238 loc) · 13 KB
/
Copy path20240118-2.html
File metadata and controls
257 lines (238 loc) · 13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!-- 使用jquery監聽按鈕的練習 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單練習(商品建檔)</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/myall.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center py-5">
<div class="col-md-10 p-3 rounded-3 shadow-lg border border-2 border-dark">
<!-- rounded-3 : 圓角 、 shadow-lg: 陰影 -->
<div class="md-3 form-floating">
<input type="text" class="form-control is-invalid" placeholder="" id="pname" name="pname" list="pname_option">
<label for="">商品名稱</label>
<!-- 下面為推薦選項，上面的input需用list連線datalist的id，來實行會在這個input推薦 -->
<datalist id="pname_option">
<option value="珍珠奶茶">珍珠奶茶</option>
<option value="紅茶">紅茶</option>
<option value="綠茶">綠茶</option>
<option value="開水">開水</option>
</datalist>
<div class="valid-feedback">字數符合規定</div>
<div class="invalid-feedback">字數不符合規定</div>
</div>
<!-- 價格 -->
<div class="mb-3">
<label for="price" class="form-label">價格(NT.)</label>
<input type="number" min="0" max="100" value="50" class="form-control is-valid" id="price" name="price">
<div class="valid-feedback">價格符合規定(1~100)</div>
<div class="invalid-feedback">價格不符合規定(1~100)</div>
</div>
<!-- 下面為下拉式選單 -->
<!-- 甜度 -->
<div class="mb-3">
<select name="sugar" id="sugar" class="form-select" size="4">
<option selected disabled>---選擇甜度---</option>
<option value="全糖">全糖</option>
<option value="半糖">半糖</option>
<option value="少糖">少糖</option>
<option value="無糖">無糖</option>
</select>
</div>
<!-- 冰塊 -->
<div class="mb-3">
<select name="ice" id="ice" class="form-select is-invalid">
<option selected disabled>---選擇冰塊---</option>
<option value="全冰">全冰</option>
<option value="少冰">少冰</option>
<option value="無冰">無冰</option>
</select>
<div class="valid-feedback">已選擇冰塊</div>
<div class="invalid-feedback">請選擇冰塊</div>
</div>
<!-- range及時監聽製作 -->
<div class="mb-3">
<label for="num01" class="form-label">數量(杯): <span class="text-danger" id="num01_text">50</span></label>
<!-- span的字會設定成隨著range變化 -->
<input type="range" class="form-range" min="1" max="100" step="1" id="num01" name="num01">
</div>
<!-- switch及時監聽製作 -->
<div class="form-check form-switch">
<input type="checkbox" name="switch01" id="switch01" class="form-check-input">
<label for="" class="form-check-label">不需要外送</label>
</div>
<!-- 選擇配料，checkbox -->
<div class="my-3">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="chk01" name="chk" value="珍珠">
<label for="chk01" class="form-check-label">珍珠</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="chk02" name="chk" value="粉圓">
<label for="chk02" class="form-check-label">粉圓</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="chk03" name="chk" value="布丁">
<label for="chk03" class="form-check-label">布丁</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="chk04" name="chk" value="椰果">
<label for="chk04" class="form-check-label">椰果</label>
</div>
</div>
<!-- 付錢方法，radio的監聽 -->
<div class="my-3">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="radio01" name="rad" value="刷卡" checked>
<!-- 預設為勾選這個 -->
<label for="radio01" class="form-check-label">刷卡</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="radio01" name="rad" value="line pay">
<label for="radio01" class="form-check-label">line pay</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="radio01" name="rad" value="付現">
<label for="radio01" class="form-check-label">付現</label>
</div>
</div>
<!-- 按鈕監聽，寫script來執行 -->
<div class="text-end">
<button class="btn btn-info" id="ok_btn">確認</button>
</div>
</div>
</div>
</div>
<div class="container">
<div id="showmsg"></div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"> </script>
<script src="js/wow.min.js"></script>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
// 按鈕的旗子，判斷是否符合
var flag_pname=false;
var flag_ice=false;
var flag_price=true; // 因為預設是符合的
$(function(){
// 監聽_及時監聽 #pname，商品名稱的監聽，用is-valid來顯示畫面
$("#pname").bind("input propertychange", function(){
console.log($(this).val().length);
if($(this).val().length>0 && $(this).val().length<7){
// 輸入字數的限制，要符合長度
$(this).addClass("is-valid");
// addClass : 物件的class增加後面寫的東西
$(this).removeClass("is-invalid");
// removeClass : 刪除物件的class裡面的字，刪除的字為跟後面寫的字串一樣
// 按鈕的旗子，判斷是否符合
flag_pname=true;
}else{
// 字數長度不符合時
$(this).addClass("is-invalid");
$(this).removeClass("is-valid");
flag_pname=false;
}
});
// 監聽_及時監聽 #pname，冰塊的監聽，用is-valid來顯示畫面
$("#ice").bind("input propertychange", function(){
if($(this).val() != ""){
// 已選擇甜度
$(this).addClass("is-valid");
// addClass : 物件的class增加後面寫的東西
$(this).removeClass("is-invalid");
// removeClass : 刪除物件的class裡面的字，刪除的字為跟後面寫的字串一樣
// 按鈕的旗子，判斷是否符合
flag_ice=true;
}
});
// 監聽_及時監聽 #pname，價格N.T的監聽，用is-valid來顯示畫面
$("#price").bind("input propertychange", function(){
console.log($(this).val().length);
if($(this).val() <= 100 && $(this).val() > 0){
$(this).addClass("is-valid");
// addClass : 物件的class增加後面寫的東西
$(this).removeClass("is-invalid");
// removeClass : 刪除物件的class裡面的字，刪除的字為跟後面寫的字串一樣
// 按鈕的旗子，判斷是否符合
flag_price=true;
}else{
$(this).addClass("is-invalid");
$(this).removeClass("is-valid");
flag_price=false;
}
});
var switch01='不需要外送!';//紀錄外送的狀態，預設為不勾選
// switch及時監聽-外送，製作
$("#switch01").change(function(){
// change : 右鍵按完彈起、且有變化時
// function : 執行
console.log($(this).is(':checked'));
// this : 目前元件的動作的意思
// checked : 有被開啟
// $(this).is(':checked') : 當有被開啟，$(this).is(':checked')內容為【true】
if($(this).is(':checked')){
$(this).next().text('需要外送!');
// next() :下一個元件
// $(this).next().text('需要外送!'); : 目前元件(在this狀態)的往下數的下一個元件的text為【需要外送!】
switch01='需要外送!';
}else{
$(this).next().text('不需要外送!');
switch01='不需要外送!';
}
})
var num01; //紀錄杯數
//監聽_即時監聽 range #num01
$("#num01").bind("input propertychange", function(){
console.log($(this).val());
$("#num01_text").text($(this).val());
num01 = $(this).val();
});
// 按鈕監聽，按下按鈕(submit)後會執行
$("#ok_btn").click(function(){
if(flag_pname && flag_ice && flag_price){
// 上面if為判斷商品名字、冰塊、價格的輸入有沒有符合規定
console.log($("#pname").val());
console.log($("#price").val());
console.log($("#sugar").val());
console.log($("#ice").val());
// 選擇配料，收集checkbox 加料區的資料
// 創造一個陣列(chkArray)來用
var chkArray=[];
$.each($("input[name='chk']:checked"), function(){
// each 掃描
// input[name='chk']:checked : input的name叫chk的被勾選中
// $.each($("input[name='chk']:checked"), function() : input的name叫chk的被勾選中，這些被勾選中的執行function
console.log($(this).val());
chkArray.push($(this).val());
// push : 丟進去
// chkArray.push($(this).val()); : chkArray陣列，丟進去資料
if(chkArray.length==0){
chkArray.push("不加料");
}
//沒輸入，顯示【不加料】
});
// radio的監聽和收集資料來確定
// 創造一個rad_pay來紀錄結果
var rad_pay;
$.each($("input[name='rad']:checked"), function(){
console.log($(this).val());
rad_pay=$(this).val();
});
$("#showmsg").html("<h1>商品名稱: "+$("#pname").val()+"</h1><h1>價格(NT.): "+$("#price").val()+"</h1><h1>甜度: "+$("#sugar").val()+"</h1><h1>冰塊: "+$("#ice").val()+"</h1><h1>外送需求: "+switch01+"</h1><h1>杯數: "+$("#num01_text").text()+"</h1><h1>加料: "+chkArray.join("/")+"</h1><h1>總價: "+$("#price").val()*$("#num01_text").text()+"元</h1><h1>付款方式: "+rad_pay+"</h1>");
// chkArray.join("/") :陣列內的每筆資料會顯示出來，同時每筆資料會有"/"來隔開
}else{
alert("輸入有錯，請重新輸入");
}
});
});
</script>
</body>
</html>