Skip to content

Commit 5010a03

Browse files
CommandstoneCommandstone
authored
Create funny_alipay.html
1 parent ce935a3 commit 5010a03

File tree

1 file changed

+131
-0
lines changed

1 file changed

+131
-0
lines changed

‎funny/funny_alipay.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="zh-CN">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>支付宝到账音效生成器</title>
8+
<style>
9+
body {
10+
font-family: 'Arial', sans-serif;
11+
max-width: 600px;
12+
margin: 0 auto;
13+
padding: 20px;
14+
background-color: #f5f5f5;
15+
}
16+
.container {
17+
background-color: white;
18+
padding: 30px;
19+
border-radius: 10px;
20+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
21+
}
22+
h1 {
23+
color: #1677ff;
24+
text-align: center;
25+
}
26+
.control-group {
27+
margin: 20px 0;
28+
}
29+
label {
30+
display: block;
31+
margin-bottom: 8px;
32+
font-weight: bold;
33+
}
34+
input, select {
35+
width: 100%;
36+
padding: 10px;
37+
border: 1px solid #ddd;
38+
border-radius: 4px;
39+
box-sizing: border-box;
40+
}
41+
button {
42+
background-color: #1677ff;
43+
color: white;
44+
border: none;
45+
padding: 12px 25px;
46+
font-size: 16px;
47+
border-radius: 4px;
48+
cursor: pointer;
49+
width: 100%;
50+
margin-top: 15px;
51+
}
52+
.result {
53+
margin-top: 20px;
54+
padding: 15px;
55+
background-color: #f0f9ff;
56+
border-radius: 4px;
57+
text-align: center;
58+
font-size: 20px;
59+
font-weight: bold;
60+
color: #1677ff;
61+
}
62+
.sound-checkbox {
63+
margin: 5px 0;
64+
}
65+
</style>
66+
</head>
67+
<body>
68+
<div class="container">
69+
<h1>支付宝到账音效生成器</h1>
70+
71+
<div class="control-group">
72+
<label for="amount">到账金额</label>
73+
<input type="number" id="amount" placeholder="输入金额" min="0" step="0.01">
74+
</div>
75+
76+
<div class="control-group">
77+
<label>选择音效组合</label>
78+
<div class="sound-checkbox">
79+
<input type="checkbox" id="sound1" value="intro.mp3" checked>
80+
<label for="sound1">开场音效</label>
81+
</div>
82+
<div class="sound-checkbox">
83+
<input type="checkbox" id="sound2" value="amount.mp3" checked>
84+
<label for="sound2">金额播报</label>
85+
</div>
86+
<div class="sound-checkbox">
87+
<input type="checkbox" id="sound3" value="end.mp3" checked>
88+
<label for="sound3">结束音效</label>
89+
</div>
90+
</div>
91+
92+
<button onclick="playCombinedSound()">播放组合音效</button>
93+
94+
<div id="result" class="result"></div>
95+
</div>
96+
97+
<script>
98+
function playCombinedSound() {
99+
const amount = document.getElementById('amount').value;
100+
const resultDiv = document.getElementById('result');
101+
102+
if (!amount) {
103+
resultDiv.textContent = '请输入金额';
104+
return;
105+
}
106+
107+
resultDiv.textContent = `支付宝到账 ${amount} 元`;
108+
109+
// 获取选中的音效文件
110+
const selectedSounds = [];
111+
document.querySelectorAll('input[type="checkbox"]:checked').forEach(checkbox => {
112+
selectedSounds.push(checkbox.value);
113+
});
114+
115+
// 顺序播放选中的音效
116+
playSoundsSequentially(selectedSounds);
117+
}
118+
119+
function playSoundsSequentially(sounds, index = 0) {
120+
if (index >= sounds.length) return;
121+
122+
const audio = new Audio(sounds[index]);
123+
audio.play();
124+
125+
audio.onended = function() {
126+
playSoundsSequentially(sounds, index + 1);
127+
};
128+
}
129+
</script>
130+
</body>
131+
</html>

0 commit comments

Comments
 (0)