2026马年春晚邓男子《惊喜定格》魔术计算器同款代码
2026马年春晚邓男子《惊喜定格》魔术计算器同款代码
简介
春晚邓男子计算器魔术《惊喜定格》完整源码与原理，可直接部署使用
2026马年春晚邓男子《惊喜定格》魔术计算器同款代码
2026年马年春晚邓男子表演的计算器魔术《惊喜定格》同款代码
魔术的精髓从来不在于技术，而在于表演表演环节
第一步：请路人余先生随意给我一个四位数的数字：得到 a = 1106
第二步：请路人徐先生随意给我一个五位数的数字：得到 a = 88396
第三步：为了避嫌，我现在反转手机，来，路人abcd，你们四个一人点个一两下。好，看这个数字是：2072725，完全随机哦。
第四步：请大家加上这个数字后，点击等号得到：2162227，哇，现在刚好是2月16日22点27分，太巧了！
代码原理
第一步：输入 a + b = （此时一切正常，得出 a + b 的值）
第二步：输入 + 号 （此时屏幕正常显示 + 号，但背后偷偷启动魔术模式。）
第三步：为了方便我们设 x = 当前时间值减去 a+b 的值，假如 x = 2072725。此时无论第一个数字输入的是什么，都要显示2，无论第二个数字输入的是什么都要显示0，以此类推。当2072725输入齐全后，忽略后面的输入。
第四步：点击等号，得出当前时间值。
文件架构
index.html 介绍页面 calculator.html 魔术计算器页面
演示
代码下载
魔术计算器代码
也可以直接复制新建一个index.html 页面使用
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>魔术计算器</title> <style> :root { --bg-page: #000000; --bg-card: #000000; --btn-dark: #333333; --btn-light: #a5a5a5; --btn-orange: #ff9f0a; --text-primary: #ffffff; --text-secondary: #8e8e93; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif; background-color: var(--bg-page); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0; } .calculator-card { background-color: var(--bg-card); width: 100%; max-width: 390px; height: 100vh; max-height: 844px; display: flex; flex-direction: column; overflow: hidden; } .calculator-container { display: flex; flex-direction: column; flex: 1; padding: 20px 16px; } .display-container { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 10px 8px 24px; flex: 1; min-height: 200px; } .display-expression { color: var(--text-secondary); font-size: 24px; font-weight: 300; min-height: 30px; margin-bottom: 8px; letter-spacing: 1px; } .display-result { color: var(--text-primary); font-size: 80px; font-weight: 200; line-height: 1; letter-spacing: -2px; transition: font-size 0.2s ease; } .display-result.small { font-size: 56px; } .display-result.smaller { font-size: 42px; } .buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .btn { aspect-ratio: 1 / 1; border-radius: 50%; border: none; font-size: 32px; font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s ease; position: relative; overflow: hidden; background: var(--btn-dark); color: var(--text-primary); } .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background 0.1s; border-radius: 50%; } .btn:active::after { background: rgba(255, 255, 255, 0.2); } .btn:active { transform: scale(0.95); } .btn-operator { background: var(--btn-orange); font-size: 36px; } .btn-operator.selected { background: var(--text-primary); color: var(--btn-orange); } .btn-function { background: var(--btn-light); color: #000000; font-size: 28px; } .btn-zero { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; justify-content: flex-start; padding-left: 32px; } .btn-zero::after { border-radius: 999px; } @media (prefers-reduced-motion: reduce) { .btn, .display-result { transition: none; } } </style></head><body> <div class="calculator-card"> <div class="calculator-container"> <div class="display-container"> <div class="display-expression" id="expression"></div> <div class="display-result" id="result">0</div> </div>
<div class="buttons-grid"> <button class="btn btn-function" data-action="clear">AC</button> <button class="btn btn-function" data-action="toggle">+/−</button> <button class="btn btn-function" data-action="percent">%</button> <button class="btn btn-operator" data-action="operator" data-value="÷">÷</button>
<button class="btn btn-number" data-action="number" data-value="7">7</button> <button class="btn btn-number" data-action="number" data-value="8">8</button> <button class="btn btn-number" data-action="number" data-value="9">9</button> <button class="btn btn-operator" data-action="operator" data-value="×">×</button>
<button class="btn btn-number" data-action="number" data-value="4">4</button> <button class="btn btn-number" data-action="number" data-value="5">5</button> <button class="btn btn-number" data-action="number" data-value="6">6</button> <button class="btn btn-operator" data-action="operator" data-value="−">−</button>
<button class="btn btn-number" data-action="number" data-value="1">1</button> <button class="btn btn-number" data-action="number" data-value="2">2</button> <button class="btn btn-number" data-action="number" data-value="3">3</button> <button class="btn btn-operator" data-action="operator" data-value="+">+</button>
<button class="btn btn-number btn-zero" data-action="number" data-value="0">0</button> <button class="btn btn-number" data-action="decimal">.</button> <button class="btn btn-operator" data-action="equals">=</button> </div> </div> </div>
<script> // ========== 状态变量 ========== let displayValue = '0'; let firstOperand = null; let operator = null; let waitingForSecondOperand = false; let justCalculated = false;
let isMagicMode = false; let magicTargetTime = 0; let magicSequence = ''; let magicIndex = 0; let magicBaseResult = 0;
// ========== DOM 元素 ========== const resultDisplay = document.getElementById('result'); const expressionDisplay = document.getElementById('expression');
// ========== 工具函数 ========== function getCurrentTimeValue() { const now = new Date(); const month = now.getMonth() + 1; const day = now.getDate(); const hour = now.getHours(); const minute = now.getMinutes(); return parseInt(`${month}${day}${hour}${minute}`); }
function formatNumber(numStr) { if (numStr === 'Error') return 'Error'; if (numStr.includes('.')) { const parts = numStr.split('.'); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); return parts.join('.'); } return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
function updateDisplay() { resultDisplay.classList.remove('small', 'smaller'); if (displayValue.length > 9) { resultDisplay.classList.add('smaller'); } else if (displayValue.length > 6) { resultDisplay.classList.add('small'); } resultDisplay.textContent = formatNumber(displayValue); }
function updateExpression(str) { expressionDisplay.textContent = str; }
function highlightOperator(op) { clearOperatorHighlight(); document.querySelectorAll('.btn-operator').forEach(btn => { if (btn.dataset.value === op) btn.classList.add('selected'); }); }
function clearOperatorHighlight() { document.querySelectorAll('.btn-operator').forEach(btn => { btn.classList.remove('selected'); }); }
// ========== 核心逻辑 ========== function inputNumber(value) { if (isMagicMode) { if (magicIndex < magicSequence.length) { if (magicIndex === 0) { displayValue = magicSequence[magicIndex]; } else { displayValue += magicSequence[magicIndex]; } magicIndex++; updateDisplay(); } return; }
if (waitingForSecondOperand) { displayValue = value; waitingForSecondOperand = false; } else { if (displayValue === '0' && value !== '0') { displayValue = value; } else if (displayValue !== '0') { if (displayValue.replace(/[^0-9]/g, '').length < 9) { displayValue += value; } } } justCalculated = false; clearOperatorHighlight(); updateDisplay(); }
function inputDecimal() { if (isMagicMode) return; if (waitingForSecondOperand) { displayValue = '0.'; waitingForSecondOperand = false; } else if (!displayValue.includes('.')) { displayValue += '.'; } justCalculated = false; updateDisplay(); }
function inputOperator(nextOperator) { if (justCalculated && nextOperator === '+') { isMagicMode = true; magicBaseResult = parseFloat(displayValue); magicTargetTime = getCurrentTimeValue(); let x = magicTargetTime - magicBaseResult; if (x < 0) { isMagicMode = false; console.warn("当前时间值小于计算结果，魔术无法进行"); } else { magicSequence = x.toString(); magicIndex = 0; firstOperand = magicBaseResult; operator = '+'; waitingForSecondOperand = true; updateExpression(formatNumber(magicBaseResult.toString()) + ' +'); highlightOperator('+'); justCalculated = false; return; } }
justCalculated = false; const inputValue = parseFloat(displayValue);
if (firstOperand === null) { firstOperand = inputValue; } else if (operator) { const result = calculate(firstOperand, inputValue, operator); displayValue = String(result); firstOperand = result; updateDisplay(); }
waitingForSecondOperand = true; operator = nextOperator; updateExpression(formatNumber(firstOperand.toString()) + ' ' + nextOperator); highlightOperator(nextOperator); }
function calculate(a, b, op) { switch (op) { case '+': return a + b; case '−': return a - b; case '×': return a * b; case '÷': return b !== 0 ? a / b : 'Error'; default: return b; } }
function inputEquals() { if (isMagicMode) { displayValue = magicTargetTime.toString(); updateDisplay(); updateExpression(''); isMagicMode = false; magicIndex = 0; magicSequence = ''; firstOperand = null; operator = null; waitingForSecondOperand = false; justCalculated = false; clearOperatorHighlight(); return; }
if (operator === null || waitingForSecondOperand) return;
const inputValue = parseFloat(displayValue); const result = calculate(firstOperand, inputValue, operator); const finalResult = Math.round(result * 1000000000) / 1000000000;
updateExpression(formatNumber(firstOperand.toString()) + ' ' + operator + ' ' + formatNumber(inputValue.toString()) + ' =');
displayValue = String(finalResult); updateDisplay();
firstOperand = finalResult; operator = null; waitingForSecondOperand = false; justCalculated = true; clearOperatorHighlight(); }
function clear() { displayValue = '0'; firstOperand = null; operator = null; waitingForSecondOperand = false; justCalculated = false; isMagicMode = false; magicIndex = 0; updateDisplay(); updateExpression(''); clearOperatorHighlight(); document.querySelector('[data-action="clear"]').textContent = 'AC'; }
function toggleSign() { if (isMagicMode) return; if (displayValue !== '0' && displayValue !== 'Error') { displayValue = displayValue.startsWith('-') ? displayValue.slice(1) : '-' + displayValue; updateDisplay(); } }
function inputPercent() { if (isMagicMode) return; displayValue = (parseFloat(displayValue) / 100).toString(); updateDisplay(); }
// ========== 事件绑定 ========== document.querySelectorAll('.btn').forEach(btn => { btn.addEventListener('click', () => { btn.style.transform = 'scale(0.95)'; setTimeout(() => btn.style.transform = '', 100);
const action = btn.dataset.action; const value = btn.dataset.value;
if (action !== 'clear' && displayValue !== '0' && !waitingForSecondOperand) { document.querySelector('[data-action="clear"]').textContent = 'C'; }
switch (action) { case 'number': inputNumber(value); break; case 'operator': inputOperator(value); break; case 'equals': inputEquals(); break; case 'clear': clear(); break; case 'toggle': toggleSign(); break; case 'decimal': inputDecimal(); break; case 'percent': inputPercent(); break; } }); });
document.addEventListener('keydown', (e) => { const key = e.key; if (/[0-9]/.test(key)) inputNumber(key); else if (key === '+') inputOperator('+'); else if (key === '-') inputOperator('−'); else if (key === '*') inputOperator('×'); else if (key === '/') inputOperator('÷'); else if (key === 'Enter' || key === '=') inputEquals(); else if (key === 'Escape') clear(); else if (key === '.') inputDecimal(); });
updateDisplay(); </script></body></html> 2026马年春晚邓男子《惊喜定格》魔术计算器同款代码
https://www.3181314.xyz/posts/2026惊喜定格同款魔术计算器代码/ 评论区
看板娘