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 魔术计算器页面
演示
代码下载
https://wwbtv.lanzout.com/i8iCz3jskkmd
魔术计算器代码
也可以直接复制新建一个index.html 页面使用
text
<!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>
