HarmonyOS 鸿蒙Next简单计数器

HarmonyOS 鸿蒙Next简单计数器

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
    <div class="card w-full max-w-md bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-2xl font-bold mb-4">简单计算器</h2>

            <div class="mb-4">
                <input type="text" id="display" readonly 
                    class="input input-bordered w-full text-right text-2xl font-mono bg-gray-50">
            </div>

            <div class="grid grid-cols-4 gap-2">
                <button onclick="clearDisplay()" class="btn btn-error col-span-2">C</button>
                <button onclick="appendToDisplay('/')" class="btn btn-secondary">/</button>
                <button onclick="appendToDisplay('*')" class="btn btn-secondary">×</button>

                <button onclick="appendToDisplay('7')" class="btn">7</button>
                <button onclick="appendToDisplay('8')" class="btn">8</button>
                <button onclick="appendToDisplay('9')" class="btn">9</button>
                <button onclick="appendToDisplay('-')" class="btn btn-secondary">-</button>

                <button onclick="appendToDisplay('4')" class="btn">4</button>
                <button onclick="appendToDisplay('5')" class="btn">5</button>
                <button onclick="appendToDisplay('6')" class="btn">6</button>
                <button onclick="appendToDisplay('+')" class="btn btn-secondary">+</button>

                <button onclick="appendToDisplay('1')" class="btn">1</button>
                <button onclick="appendToDisplay('2')" class="btn">2</button>
                <button onclick="appendToDisplay('3')" class="btn">3</button>
                <button onclick="calculate()" class="btn btn-primary row-span-2">=</button>

                <button onclick="appendToDisplay('0')" class="btn col-span-2">0</button>
                <button onclick="appendToDisplay('.')" class="btn">.</button>
            </div>
        </div>
    </div>
    <script>
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }

        function clearDisplay() {
            document.getElementById('display').value = '';
        }

        function calculate() {
            try {
                const expression = document.getElementById('display').value;
                const result = eval(expression);
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = '错误';
            }
        }
    </script>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next简单计数器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next实现计数器

可以使用ArkTS开发。在EntryAbility.ts中定义计数器状态变量，使用@State装饰器实现数据绑定。UI部分通过Column、Row、Text和Button组件构建界面，Text显示计数值，Button绑定onClick事件触发增减操作。状态变化会自动更新UI，无需手动操作DOM。示例代码：

@Entry
@Component
struct Counter {
  [@State](/user/State) count: number = 0

  build() {
    Column() {
      Text(`${this.count}`)
        .fontSize(50)
      Row() {
        Button('+')
          .onClick(() => this.count++)
        Button('-')
          .onClick(() => this.count--)
      }
    }
  }
}

更多关于HarmonyOS 鸿蒙Next简单计数器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个基于HTML/JS的网页版计算器代码，不涉及HarmonyOS Next原生开发。如果要移植到HarmonyOS Next平台，建议使用ArkUI框架重新开发。以下是关键点：

  1. 在HarmonyOS Next中应该使用ArkTS语言开发
  2. 界面布局建议使用Column/Row等ArkUI组件
  3. 计算逻辑可以保留但需要改为TypeScript实现
  4. 避免使用eval()函数，存在安全隐患
  5. 样式系统使用HarmonyOS的样式规范而非Tailwind CSS

这个计算器示例更适合作为Web应用，如果要开发原生HarmonyOS应用，建议参考官方文档使用ArkUI框架重新实现。

回到顶部