有100人阅读过
一个在线的计算DMX512灯具地址DIP拨码方法的工具
发布于2025/07/18 更新于2025/07/18
[ 教程仅保证更新时有效，请自行测试。]
发布于2025/07/18 更新于2025/07/18
[ 教程仅保证更新时有效，请自行测试。]
[ 教程仅保证更新时有效，请自行测试。]
可以本地直接用浏览器打开使用，实现DMX512灯具地址《-》DIP拨码 互转。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DMX512 拨码设置工具</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
padding: 2rem;
background-color: #f0f0f0;
margin: 0;
}
h1 {
font-size: 1.5rem;
margin-bottom: 1rem;
text-align: center;
}
h3 {
font-size: 1rem;
text-align: center;
}
.controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
input[type="number"] {
padding: 0.5rem;
width: 120px;
font-size: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
}
.switches {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.switch {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.875rem;
cursor: pointer;
}
.bit-value {
margin-bottom: 0.25rem;
font-weight: bold;
}
.dip {
width: 30px;
height: 60px;
border: 2px solid #333;
border-radius: 4px;
position: relative;
background-color: #fff;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.dip.on::before, .dip.off::before {
content: '';
position: absolute;
left: 5px;
right: 5px;
height: 20px;
border-radius: 2px;
}
.dip.on::before {
background-color: #28a745;
bottom: 5px;
}
.dip.off::before {
background-color: #dc3545;
top: 5px;
}
.dip.inverted.on::before {
top: 5px;
bottom: auto;
}
.dip.inverted.off::before {
top: auto;
bottom: 5px;
}
.label {
margin-top: 0.5rem;
}
.invert-button-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 1rem;
}
@media (max-width: 600px) {
.dip {
width: 24px;
height: 48px;
}
.bit-value, .label {
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<h1>DMX512 地址拨码计算工具</h1>
<div>
<label>
输入地址 (1-512)：
<input type="number" id="dmxAddress" min="1" max="512" value="1">
</label>
</div>
<div id="switches"></div>
<h3>默认向下拨为1(ON)</h3>
<div>
<button id="invertButton">反转开关方向</button>
</div>
<script>
const addressInput = document.getElementById('dmxAddress');
const switchesDiv = document.getElementById('switches');
const invertButton = document.getElementById('invertButton');
let currentAddress = 1;
let bits = [];
let isInverted = false; // 默认不反转，即向下为ON
function calculateAddressFromBits() {
let addr = 0;
for (let i = 0; i < bits.length; i++) {
if (bits[i]) addr += Math.pow(2, i);
}
return addr;
}
function renderSwitches() {
switchesDiv.innerHTML = '';
for (let i = 0; i < 9; i++) {
const wrapper = document.createElement('div');
wrapper.className = 'switch';
wrapper.dataset.index = i;
const bitVal = document.createElement('div');
bitVal.className = 'bit-value';
bitVal.textContent = Math.pow(2, i);
const dip = document.createElement('div');
dip.className = 'dip ' + (bits[i] ? 'on' : 'off');
if (isInverted) {
dip.classList.add('inverted');
}
const label = document.createElement('div');
label.className = 'label';
label.textContent = i + 1;
wrapper.appendChild(bitVal);
wrapper.appendChild(dip);
wrapper.appendChild(label);
wrapper.addEventListener('click', () => {
bits[i] = bits[i] ? 0 : 1;
addressInput.value = calculateAddressFromBits();
renderSwitches();
});
switchesDiv.appendChild(wrapper);
}
}
function updateSwitches(address) {
currentAddress = address;
bits = [];
for (let i = 0; i < 9; i++) {
bits[i] = (address >> i) & 1;
}
renderSwitches();
}
addressInput.addEventListener('input', () => {
let value = parseInt(addressInput.value);
if (isNaN(value) || value < 1 || value > 512) return;
updateSwitches(value);
});
invertButton.addEventListener('click', () => {
isInverted = !isInverted;
renderSwitches();
});
updateSwitches(1);
</script>
</body>
</html>文章对你有帮助吗？
- 一般[0]
- 很赞[0]
- 没用[0]
- 垃圾[0]
- 无语[0]
