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://jsq-ecj.pages.dev
代码下载#

https://wwbtv.lanzout.com/i8iCz3jskkmd
魔术计算器代码#

也可以直接复制新建一个index.html 页面使用
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>魔术计算器</title>
7
  <style>
8
    :root {
9
      --bg-page: #000000;
10
      --bg-card: #000000;
11
      --btn-dark: #333333;
12
      --btn-light: #a5a5a5;
13
      --btn-orange: #ff9f0a;
14
      --text-primary: #ffffff;
15
      --text-secondary: #8e8e93;
16
    }
17
    * {
18
      margin: 0;
19
      padding: 0;
20
      box-sizing: border-box;
21
      -webkit-tap-highlight-color: transparent;
22
      user-select: none;
23
    }
24
    body {
25
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
26
      background-color: var(--bg-page);
27
      min-height: 100vh;
28
      display: flex;
29
      justify-content: center;
30
      align-items: center;
31
      padding: 0;
32
    }
33
    .calculator-card {
34
      background-color: var(--bg-card);
35
      width: 100%;
36
      max-width: 390px;
37
      height: 100vh;
38
      max-height: 844px;
39
      display: flex;
40
      flex-direction: column;
41
      overflow: hidden;
42
    }
43
    .calculator-container {
44
      display: flex;
45
      flex-direction: column;
46
      flex: 1;
47
      padding: 20px 16px;
48
    }
49
    .display-container {
50
      display: flex;
51
      flex-direction: column;
52
      justify-content: flex-end;
53
      align-items: flex-end;
54
      padding: 10px 8px 24px;
55
      flex: 1;
56
      min-height: 200px;
57
    }
58
    .display-expression {
59
      color: var(--text-secondary);
60
      font-size: 24px;
61
      font-weight: 300;
62
      min-height: 30px;
63
      margin-bottom: 8px;
64
      letter-spacing: 1px;
65
    }
66
    .display-result {
67
      color: var(--text-primary);
68
      font-size: 80px;
69
      font-weight: 200;
70
      line-height: 1;
71
      letter-spacing: -2px;
72
      transition: font-size 0.2s ease;
73
    }
74
    .display-result.small {
75
      font-size: 56px;
76
    }
77
    .display-result.smaller {
78
      font-size: 42px;
79
    }
80
    .buttons-grid {
81
      display: grid;
82
      grid-template-columns: repeat(4, 1fr);
83
      gap: 12px;
84
    }
85
    .btn {
86
      aspect-ratio: 1 / 1;
87
      border-radius: 50%;
88
      border: none;
89
      font-size: 32px;
90
      font-weight: 400;
91
      cursor: pointer;
92
      display: flex;
93
      align-items: center;
94
      justify-content: center;
95
      transition: all 0.1s ease;
96
      position: relative;
97
      overflow: hidden;
98
      background: var(--btn-dark);
99
      color: var(--text-primary);
100
    }
101
    .btn::after {
102
      content: '';
103
      position: absolute;
104
      inset: 0;
105
      background: rgba(255, 255, 255, 0);
106
      transition: background 0.1s;
107
      border-radius: 50%;
108
    }
109
    .btn:active::after {
110
      background: rgba(255, 255, 255, 0.2);
111
    }
112
    .btn:active {
113
      transform: scale(0.95);
114
    }
115
    .btn-operator {
116
      background: var(--btn-orange);
117
      font-size: 36px;
118
    }
119
    .btn-operator.selected {
120
      background: var(--text-primary);
121
      color: var(--btn-orange);
122
    }
123
    .btn-function {
124
      background: var(--btn-light);
125
      color: #000000;
126
      font-size: 28px;
127
    }
128
    .btn-zero {
129
      grid-column: span 2;
130
      aspect-ratio: auto;
131
      border-radius: 999px;
132
      justify-content: flex-start;
133
      padding-left: 32px;
134
    }
135
    .btn-zero::after {
136
      border-radius: 999px;
137
    }
138
    @media (prefers-reduced-motion: reduce) {
139
      .btn, .display-result { transition: none; }
140
    }
141
  </style>
142
</head>
143
<body>
144
  <div class="calculator-card">
145
    <div class="calculator-container">
146
      <div class="display-container">
147
        <div class="display-expression" id="expression"></div>
148
        <div class="display-result" id="result">0</div>
149
      </div>
150

151
      <div class="buttons-grid">
152
        <button class="btn btn-function" data-action="clear">AC</button>
153
        <button class="btn btn-function" data-action="toggle">+/−</button>
154
        <button class="btn btn-function" data-action="percent">%</button>
155
        <button class="btn btn-operator" data-action="operator" data-value="÷">÷</button>
156

157
        <button class="btn btn-number" data-action="number" data-value="7">7</button>
158
        <button class="btn btn-number" data-action="number" data-value="8">8</button>
159
        <button class="btn btn-number" data-action="number" data-value="9">9</button>
160
        <button class="btn btn-operator" data-action="operator" data-value="×">×</button>
161

162
        <button class="btn btn-number" data-action="number" data-value="4">4</button>
163
        <button class="btn btn-number" data-action="number" data-value="5">5</button>
164
        <button class="btn btn-number" data-action="number" data-value="6">6</button>
165
        <button class="btn btn-operator" data-action="operator" data-value="−">−</button>
166

167
        <button class="btn btn-number" data-action="number" data-value="1">1</button>
168
        <button class="btn btn-number" data-action="number" data-value="2">2</button>
169
        <button class="btn btn-number" data-action="number" data-value="3">3</button>
170
        <button class="btn btn-operator" data-action="operator" data-value="+">+</button>
171

172
        <button class="btn btn-number btn-zero" data-action="number" data-value="0">0</button>
173
        <button class="btn btn-number" data-action="decimal">.</button>
174
        <button class="btn btn-operator" data-action="equals">=</button>
175
      </div>
176
    </div>
177
  </div>
178

179
  <script>
180
    // ========== 状态变量 ==========
181
    let displayValue = '0';
182
    let firstOperand = null;
183
    let operator = null;
184
    let waitingForSecondOperand = false;
185
    let justCalculated = false;
186

187
    let isMagicMode = false;
188
    let magicTargetTime = 0;
189
    let magicSequence = '';
190
    let magicIndex = 0;
191
    let magicBaseResult = 0;
192

193
    // ========== DOM 元素 ==========
194
    const resultDisplay = document.getElementById('result');
195
    const expressionDisplay = document.getElementById('expression');
196

197
    // ========== 工具函数 ==========
198
    function getCurrentTimeValue() {
199
      const now = new Date();
200
      const month = now.getMonth() + 1;
201
      const day = now.getDate();
202
      const hour = now.getHours();
203
      const minute = now.getMinutes();
204
      return parseInt(`${month}${day}${hour}${minute}`);
205
    }
206

207
    function formatNumber(numStr) {
208
      if (numStr === 'Error') return 'Error';
209
      if (numStr.includes('.')) {
210
        const parts = numStr.split('.');
211
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
212
        return parts.join('.');
213
      }
214
      return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
215
    }
216

217
    function updateDisplay() {
218
      resultDisplay.classList.remove('small', 'smaller');
219
      if (displayValue.length > 9) {
220
        resultDisplay.classList.add('smaller');
221
      } else if (displayValue.length > 6) {
222
        resultDisplay.classList.add('small');
223
      }
224
      resultDisplay.textContent = formatNumber(displayValue);
225
    }
226

227
    function updateExpression(str) {
228
      expressionDisplay.textContent = str;
229
    }
230

231
    function highlightOperator(op) {
232
      clearOperatorHighlight();
233
      document.querySelectorAll('.btn-operator').forEach(btn => {
234
        if (btn.dataset.value === op) btn.classList.add('selected');
235
      });
236
    }
237

238
    function clearOperatorHighlight() {
239
      document.querySelectorAll('.btn-operator').forEach(btn => {
240
        btn.classList.remove('selected');
241
      });
242
    }
243

244
    // ========== 核心逻辑 ==========
245
    function inputNumber(value) {
246
      if (isMagicMode) {
247
        if (magicIndex < magicSequence.length) {
248
          if (magicIndex === 0) {
249
            displayValue = magicSequence[magicIndex];
250
          } else {
251
            displayValue += magicSequence[magicIndex];
252
          }
253
          magicIndex++;
254
          updateDisplay();
255
        }
256
        return;
257
      }
258

259
      if (waitingForSecondOperand) {
260
        displayValue = value;
261
        waitingForSecondOperand = false;
262
      } else {
263
        if (displayValue === '0' && value !== '0') {
264
          displayValue = value;
265
        } else if (displayValue !== '0') {
266
          if (displayValue.replace(/[^0-9]/g, '').length < 9) {
267
            displayValue += value;
268
          }
269
        }
270
      }
271
      justCalculated = false;
272
      clearOperatorHighlight();
273
      updateDisplay();
274
    }
275

276
    function inputDecimal() {
277
      if (isMagicMode) return;
278
      if (waitingForSecondOperand) {
279
        displayValue = '0.';
280
        waitingForSecondOperand = false;
281
      } else if (!displayValue.includes('.')) {
282
        displayValue += '.';
283
      }
284
      justCalculated = false;
285
      updateDisplay();
286
    }
287

288
    function inputOperator(nextOperator) {
289
      if (justCalculated && nextOperator === '+') {
290
        isMagicMode = true;
291
        magicBaseResult = parseFloat(displayValue);
292
        magicTargetTime = getCurrentTimeValue();
293
        let x = magicTargetTime - magicBaseResult;
294
        if (x < 0) {
295
          isMagicMode = false;
296
          console.warn("当前时间值小于计算结果，魔术无法进行");
297
        } else {
298
          magicSequence = x.toString();
299
          magicIndex = 0;
300
          firstOperand = magicBaseResult;
301
          operator = '+';
302
          waitingForSecondOperand = true;
303
          updateExpression(formatNumber(magicBaseResult.toString()) + ' +');
304
          highlightOperator('+');
305
          justCalculated = false;
306
          return;
307
        }
308
      }
309

310
      justCalculated = false;
311
      const inputValue = parseFloat(displayValue);
312

313
      if (firstOperand === null) {
314
        firstOperand = inputValue;
315
      } else if (operator) {
316
        const result = calculate(firstOperand, inputValue, operator);
317
        displayValue = String(result);
318
        firstOperand = result;
319
        updateDisplay();
320
      }
321

322
      waitingForSecondOperand = true;
323
      operator = nextOperator;
324
      updateExpression(formatNumber(firstOperand.toString()) + ' ' + nextOperator);
325
      highlightOperator(nextOperator);
326
    }
327

328
    function calculate(a, b, op) {
329
      switch (op) {
330
        case '+': return a + b;
331
        case '−': return a - b;
332
        case '×': return a * b;
333
        case '÷': return b !== 0 ? a / b : 'Error';
334
        default: return b;
335
      }
336
    }
337

338
    function inputEquals() {
339
      if (isMagicMode) {
340
        displayValue = magicTargetTime.toString();
341
        updateDisplay();
342
        updateExpression('');
343
        isMagicMode = false;
344
        magicIndex = 0;
345
        magicSequence = '';
346
        firstOperand = null;
347
        operator = null;
348
        waitingForSecondOperand = false;
349
        justCalculated = false;
350
        clearOperatorHighlight();
351
        return;
352
      }
353

354
      if (operator === null || waitingForSecondOperand) return;
355

356
      const inputValue = parseFloat(displayValue);
357
      const result = calculate(firstOperand, inputValue, operator);
358
      const finalResult = Math.round(result * 1000000000) / 1000000000;
359

360
      updateExpression(formatNumber(firstOperand.toString()) + ' ' + operator + ' ' +
361
        formatNumber(inputValue.toString()) + ' =');
362

363
      displayValue = String(finalResult);
364
      updateDisplay();
365

366
      firstOperand = finalResult;
367
      operator = null;
368
      waitingForSecondOperand = false;
369
      justCalculated = true;
370
      clearOperatorHighlight();
371
    }
372

373
    function clear() {
374
      displayValue = '0';
375
      firstOperand = null;
376
      operator = null;
377
      waitingForSecondOperand = false;
378
      justCalculated = false;
379
      isMagicMode = false;
380
      magicIndex = 0;
381
      updateDisplay();
382
      updateExpression('');
383
      clearOperatorHighlight();
384
      document.querySelector('[data-action="clear"]').textContent = 'AC';
385
    }
386

387
    function toggleSign() {
388
      if (isMagicMode) return;
389
      if (displayValue !== '0' && displayValue !== 'Error') {
390
        displayValue = displayValue.startsWith('-') ? displayValue.slice(1) : '-' + displayValue;
391
        updateDisplay();
392
      }
393
    }
394

395
    function inputPercent() {
396
      if (isMagicMode) return;
397
      displayValue = (parseFloat(displayValue) / 100).toString();
398
      updateDisplay();
399
    }
400

401
    // ========== 事件绑定 ==========
402
    document.querySelectorAll('.btn').forEach(btn => {
403
      btn.addEventListener('click', () => {
404
        btn.style.transform = 'scale(0.95)';
405
        setTimeout(() => btn.style.transform = '', 100);
406

407
        const action = btn.dataset.action;
408
        const value = btn.dataset.value;
409

410
        if (action !== 'clear' && displayValue !== '0' && !waitingForSecondOperand) {
411
          document.querySelector('[data-action="clear"]').textContent = 'C';
412
        }
413

414
        switch (action) {
415
          case 'number': inputNumber(value); break;
416
          case 'operator': inputOperator(value); break;
417
          case 'equals': inputEquals(); break;
418
          case 'clear': clear(); break;
419
          case 'toggle': toggleSign(); break;
420
          case 'decimal': inputDecimal(); break;
421
          case 'percent': inputPercent(); break;
422
        }
423
      });
424
    });
425

426
    document.addEventListener('keydown', (e) => {
427
      const key = e.key;
428
      if (/[0-9]/.test(key)) inputNumber(key);
429
      else if (key === '+') inputOperator('+');
430
      else if (key === '-') inputOperator('−');
431
      else if (key === '*') inputOperator('×');
432
      else if (key === '/') inputOperator('÷');
433
      else if (key === 'Enter' || key === '=') inputEquals();
434
      else if (key === 'Escape') clear();
435
      else if (key === '.') inputDecimal();
436
    });
437

438
    updateDisplay();
439
  </script>
440
</body>
441
</html>
QgxsのBlog

2026马年春晚邓男子《惊喜定格》魔术计算器同款代码#

代码原理#

文件架构#

演示#

代码下载#

魔术计算器代码#
