作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。
HTML:
<div class="calculator"><div class="input-group"><label for="set-input">输入集合元素 (用逗号分隔):</label> <input id="set-input" type="text" placeholder="例如: a, b, c"></div><div class="operations"><button onclick="calculateSubsets()">计算子集</button></div><div class="result"><p>计算结果:</p><p id="result-output">结果: -</p></div></div>
JS:
function getSubsets(set) {
const subsets = [];
const totalSubsets = 1 << set.length; // 2^n
for (let i = 0; i < totalSubsets; i++) {
const subset = [];
for (let j = 0; j < set.length; j++) {
if (i & (1 << j)) {
subset.push(set[j]);
}
}
subsets.push(subset);
}
return subsets;
}
function calculateSubsets() {
const setInput = document.getElementById('set-input').value;
const set = setInput.split(',').map(x => x.trim()).filter(x => x);
if (set.length === 0) {
document.getElementById('result-output').textContent = '请输入有效的集合元素。';
return;
}
const subsets = getSubsets(set);
const result = subsets.map(subset => `{${subset.join(', ')}}`).join(', ');
document.getElementById('result-output').textContent = `所有子集: ${result}`;
}
CSS:
.calculator {
width: 100%;
background-color: #333;
color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
label {
display: block;
margin-bottom: 10px;
font-size: 16px;
}
input, select {
width: 100%!important;
padding: 10px!important;
margin-bottom: 20px;
color: #000000;
border-radius: 5px;
border: 1px solid #555;
font-size: 16px!important;
background-color: #ffffff!important;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
display: block;
margin: 0px;
margin-bottom: 20px;
margin-left: 0px!important;
}
button:hover {
background-color: orange;
}
.result {
margin-top: 20px;
text-align: center;
}
option {
background-color: #ffffff;
}
p {
font-size: 18px;
margin-top: 5px!important;
}