使用ArkTs进行计算器的实现

最新推荐文章于 2024-08-04 00:39:09 发布
最新推荐文章于 2024-08-04 00:39:09 发布
阅读量693 收藏 14
点赞数 23
文章标签： 前端 harmonyos 华为 typescript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74943910/article/details/140805647
版权

使用ArkTs进行计算器的实现,基于deveco-studio3.1.1，新版未尝试

1、写出大致的计算器构造

在calcultorDemo.ets文件中

import {calculatorResult} from './calculatorResult'
import numberstack  from './NumberStack'
import characterstack from './CharacterStack'
@Entry
@Component
struct calcultorDemo {
  @State value:string =''
   @State result:string=''
  @State opacityValue:number=0
  @State fontSizeValue:number=30
  numbers :string[]=['(',')','÷','×','1','2','3','-','4','5','6','+','7','8','9']
  numbers2:string[]=['%','0','.']
  build() {
    Column(){
      calculatorResult({value:$value,result:this.result,opacityValue:$opacityValue,fontSizeValue:$fontSizeValue})
      Column(){//计算机主体页面
        Grid(){
          GridItem(){
            Text('MC')
              .TextStyle()
          }
          .oneStyle()//MC（清零）工具

          GridItem(){
            Text('MR')
              .TextStyle()
          }
          .oneStyle()

          GridItem(){
            Image($r('app.media.delete'))
              .fillColor(Color.Blue)
              .height(40)
          }
          .oneStyle()
          .onClick(()=>{
            this.value=this.value.slice(0,this.value.length-1)
            this.result=''
          })

          GridItem(){
            Text('C')
              .TextStyle()
          }
          .oneStyle()
          .onClick(()=>{
            this.value=''
            this.result=''
          })

          ForEach(this.numbers,item=>{
            GridItem(){
              Text(item)
                .TextStyle()
            }
            .onClick(()=>{
              if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {
                return
              }//判断点击的第一个字符是不是运算符，若是则返回
              if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||
              this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||
              this.value[this.value.length - 1] === '%') {
                // 如果当前点击的是运算符，则替换最后一个运算符
                if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {
                  this.value = this.value.slice(0, this.value.length - 1) + item
                } else {
                  this.value += item
                }
              } else {
                this.value = this.value.concat(item)
              }
            })
            .oneStyle()
          })

          GridItem(){
            Text('=')
              .TextStyle()
              .fontColor(Color.White)
          }
          .rowStart(5)
          .rowEnd(6)
          .borderRadius(40)
          .backgroundColor(Color.Blue)
          .onClick(()=>{
            this.result=total(checkParentheses(this.value+'#').cleanedExpression)
            this.opacityValue=1
            this.fontSizeValue=50
          })

          ForEach(this.numbers2,item=>{
            GridItem(){
              Text(item)
                .TextStyle()
            }
            .onClick(()=>{this.value=this.value.concat(item)})
            .oneStyle()
          })
        }
        .width('100%')
        .height(500)
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
        .columnsGap(8)
        .rowsGap(12)
        .padding(12)
        .backgroundColor('#fff6f0f0')
        .borderRadius({topLeft:20,topRight:20})
      }
      .layoutWeight(1)
      .justifyContent(FlexAlign.End)
    }
    .height('100%')
  }
}
@Styles function oneStyle(){
  .backgroundColor(Color.White)
  .height(70)
  .width(70)
  .borderRadius(40)
  .shadow({color:Color.Gray,radius:5})
}
@Extend(Text) function TextStyle() {
  .fontSize(25)
  .fontWeight(400)
}

以上代码写出计算机的键盘部分，使用Grid组件进行键盘的分隔，以及对相同功能的按钮进行ForEach循环渲染减少占有空间
在这里插入图片描述

在calculatorResult.ets中

进行键盘输入（TextInput）和输出（Text）的编写

@Component
export struct  calculatorResult{
  @Link value:string
  @Prop result:string
  @Link opacityValue:number
  @Link fontSizeValue:number
  build() {
      Column(){
        TextInput({text:this.value})
          .height(80)
          .margin({top:60})
          .placeholderFont({size:60})
          .fontSize(60)
          .fontWeight(450)
          .textAlign(TextAlign.End)
          .backgroundColor(Color.White)
        Text(this.result)
          .opacity(this.opacityValue)
          .width('100%')
          .height(60)
          .fontSize(this.fontSizeValue)
          .fontWeight(450)
          .textAlign(TextAlign.End)
          .animation({duration:500})
            // @ts-ignore
          .textOverflow(TextOverflow.Clip)
      }
  }
}

经过以上两个文件的渲染后，计算机的大概形状显示出来，如图所示：
在这里插入图片描述

2、进行计算机的功能部分

给每个按钮分别添加点击事件

1、对1，2，3，4，5，6，7，8，9，+, - , × ,÷添加存储表达式的点击事件，定义 @State value:string =‘’ 在每次进行点击时，对所点击的内容做出判断，储存所点击的内容。

.onClick(()=>{
              if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {
                return
              }//判断点击的第一个字符是不是运算符，若是则返回
              if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||
              this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||
              this.value[this.value.length - 1] === '%') {
                // 如果在上一个字符是运算符时，当前点击的是运算符，则替换最后一个运算符
                if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {
                  this.value = this.value.slice(0, this.value.length - 1) + item
                } else {
                //若当前点击不是运算符而是数字时，则继续输入表达式
                  this.value += item
                }
              } else {
                this.value = this.value.concat(item)
              }
            })

2、对删除按钮:定义 @State result:string=''进行计算机结果的保存，方便后续渲染在Text组件中。

.onClick(()=>{
            this.value=this.value.slice(0,this.value.length-1)
            this.result=''
          })

3、对于清零工具则将value和result都置为空

.onClick(()=>{
            this.value=''
            this.result=''
          })

完成value的计算事件，利用栈进行算术表达式的求值：

主要思路：
1、将中缀表达式转为后缀表达式；
2、对后缀表达式求值；
具体可参考：栈的应用-表达式求值

代码如下：
1、在calcultorDemo.ets中：

//检查括号是否多余，且若前括号多余则去掉多余的前括号
function checkParentheses(expression: string): { valid: boolean, cleanedExpression: string } {
  let stack = []
  let cleanedExpression = expression
//判断表达式括号是否对应
  for (let ch of expression) {
    if (ch === '(') {
      stack.push(ch)
    } else if (ch === ')') {//后括号多余则直接返回错误
      if (stack.length === 0) {
        return { valid: false, cleanedExpression: expression }
      }
      stack.pop()
    }
  }
  //若不对应，去掉多余的前括号
  while (stack.length > 0) {
    let index = cleanedExpression.indexOf('(')
    if (index !== -1) {
      cleanedExpression = cleanedExpression.slice(0, index) + cleanedExpression.slice(index + 1)
    }
    stack.pop()
  }
  console.log(cleanedExpression)
  return { valid: stack.length === 0, cleanedExpression }

}

//对表达式求值
function total(expression:string){
  characterstack.push('#')
  let i=0
  let ch=expression[i]
  while (ch!='#'||characterstack.peek()!='#') {
    if(!Instring(ch)){//进行多位数的入栈
      let numStr = ch
      while (i + 1 < expression.length && !Instring(expression[i + 1])) {
        ch = expression[++i]
        numStr += ch
      }
      numberstack.push(numStr)
      ch = expression[++i]
    }
    else{

      switch (Precede(characterstack.peek(),ch)){
        case '<':{
          characterstack.push(ch);
          ch=expression[++i]
          break
        }
        case '>':{
          let theta= characterstack.pop()
          let b=numberstack.pop()
          let a=numberstack.pop()
          numberstack.push(Operate(a,theta,b))
          break
        }
        case '=':{
          characterstack.pop()
          ch=expression[++i]
          break
        }
      }
    }
  }
  return numberstack.peek()
}


//判断ch是否为运算符
function Instring(ch:string){
  let num:string[]=['+','-','(',')','÷','×','#','%']
  return num.includes(ch)
}


//判断运算符的优先级
function Precede(thetal:string,thetal2:string):string{
  if((thetal=='('&&thetal2==')')||(thetal=='#'&&thetal2=='#')){
    return '='
  }
  else if(thetal=='('||thetal=='#'||thetal2=='('||(thetal=='+'||thetal=='-')&&(thetal2=='×'||thetal2=='÷'||thetal2=='%')){
    return '<'
  }
  else return '>'
}


//计算两数的运算结果
function Operate(first:string,theta:string,second:string):string{
  switch (theta){
    case '+':
      return ((+first)+(+second)).toString()
    case '-':
      return ((+first)-(+second)).toString()
    case '×':
      return ((+first)*(+second)).toString()
    case '÷':
      return ((+first)/(+second)).toString()
    case '%':
      return ((+first)%(+second)).toString()
  }
  return 'NaN'
}

2、在CharacterStack.ets中进行字符栈的初始化，并进行导出；

//运算符栈
 class CharacterStack{
  private characters:string[]

  constructor() {
    this.characters=[]
  }
  //入栈
  push(item:string){
    this.characters.push(item)
  }
  //出栈
  pop(){
    return this.characters.pop()
  }
  //返回栈顶元素
  peek(){
    return this.characters[this.characters.length-1]
  }
  //判断栈是否为空
  isEmpty(){
    return this.characters.length===0
  }
  //清空栈内元素
  clear(){
    this.characters=[]
  }
  //获取栈内元素数量
  size():number{
    return this.characters.length
  }
}
const characterstack =new CharacterStack()
export default  characterstack

3、在NumberStack.ets中进行数字栈的初始化，并进行导出；

//数字栈
export class NumberStack{
  private numbers:string[]

  constructor() {
    this.numbers=[]
  }
  //入栈
  push(item:string){
    this.numbers.push(item)
  }
  //出栈
  pop(){
    return this.numbers.pop()
  }
  //返回栈顶元素
  peek(){
    return this.numbers[this.numbers.length-1]
  }
  //判断栈是否为空
  isEmpty(){
    return this.numbers.length===0
  }
  //清空栈内元素
  clear(){
    this.numbers=[]
  }
  //获取栈内元素数量
  size():number{
    return this.numbers.length
  }
}
const numberstack =new NumberStack()
export default  numberstack

已解决问题：
1、括号不对应，对前括号去掉，或直接报错；
2、重复输入符号的问题；
3、首相为符号的问题；

存在问题：
1、“3-”不可以输出正常的3；
在这里插入图片描述
2、对负数不可进行计算；…(存在未发现问题)

3、完整代码（一个文件）

@Entry
@Component
struct calcultorDemo {
  @State value:string =''
  @State result:string=''
  @State opacityValue:number=0
  @State fontSizeValue:number=30
  numbers :string[]=['(',')','÷','×','1','2','3','-','4','5','6','+','7','8','9']
  numbers2:string[]=['%','0','.']
  build() {
    Column(){
      Column(){
        TextInput({text:this.value})
          .height(80)
          .margin({top:60})
          .placeholderFont({size:60})
          .fontSize(60)
          .fontWeight(450)
          .textAlign(TextAlign.End)
          .backgroundColor(Color.White)
        Text(this.result)
          .opacity(this.opacityValue)
          .width('100%')
          .height(60)
          .fontSize(this.fontSizeValue)
          .fontWeight(450)
          .textAlign(TextAlign.End)
          .animation({duration:500})
            // @ts-ignore
          .textOverflow(TextOverflow.Clip)
      }
      Column(){//计算机主体页面
        Grid(){
          GridItem(){
            Text('MC')
              .TextStyle()
          }
          .oneStyle()//MC（清零）工具

          GridItem(){
            Text('MR')
              .TextStyle()
          }
          .oneStyle()

          GridItem(){
            Image($r('app.media.delete'))
              .fillColor(Color.Blue)
              .height(40)
          }
          .oneStyle()
          .onClick(()=>{
            this.value=this.value.slice(0,this.value.length-1)
            this.result=''
          })

          GridItem(){
            Text('C')
              .TextStyle()
          }
          .oneStyle()
          .onClick(()=>{
            this.value=''
            this.result=''
          })

          ForEach(this.numbers,item=>{
            GridItem(){
              Text(item)
                .TextStyle()
            }
            .onClick(()=>{
              if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {
                return
              }//判断点击的第一个字符是不是运算符，若是则返回
              if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||
              this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||
              this.value[this.value.length - 1] === '%') {
                // 如果当前点击的是运算符，则替换最后一个运算符
                if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {
                  this.value = this.value.slice(0, this.value.length - 1) + item
                } else {
                  this.value += item
                }
              } else {
                this.value = this.value.concat(item)
              }
            })
            .oneStyle()
          })

          GridItem(){
            Text('=')
              .TextStyle()
              .fontColor(Color.White)
          }
          .rowStart(5)
          .rowEnd(6)
          .borderRadius(40)
          .backgroundColor(Color.Blue)
          .onClick(()=>{
            this.result=total(checkParentheses(this.value+'#').cleanedExpression)
            this.opacityValue=1
            this.fontSizeValue=50
          })

          ForEach(this.numbers2,item=>{
            GridItem(){
              Text(item)
                .TextStyle()
            }
            .onClick(()=>{this.value=this.value.concat(item)})
            .oneStyle()
          })
        }
        .width('100%')
        .height(500)
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
        .columnsGap(8)
        .rowsGap(12)
        .padding(12)
        .backgroundColor('#fff6f0f0')
        .borderRadius({topLeft:20,topRight:20})
      }
      .layoutWeight(1)
      .justifyContent(FlexAlign.End)
    }
    .height('100%')
  }
}
@Styles function oneStyle(){
  .backgroundColor(Color.White)
  .height(70)
  .width(70)
  .borderRadius(40)
  .shadow({color:Color.Gray,radius:5})
}
@Extend(Text) function TextStyle() {
  .fontSize(25)
  .fontWeight(400)
}


//运算符栈
class CharacterStack{
  private characters:string[]

  constructor() {
    this.characters=[]
  }
  //入栈
  push(item:string){
    this.characters.push(item)
  }
  //出栈
  pop(){
    return this.characters.pop()
  }
  //返回栈顶元素
  peek(){
    return this.characters[this.characters.length-1]
  }
  //判断栈是否为空
  isEmpty(){
    return this.characters.length===0
  }
  //清空栈内元素
  clear(){
    this.characters=[]
  }
  //获取栈内元素数量
  size():number{
    return this.characters.length
  }
}
const characterstack =new CharacterStack()


//数字栈
export class NumberStack{
  private numbers:string[]

  constructor() {
    this.numbers=[]
  }
  //入栈
  push(item:string){
    this.numbers.push(item)
  }
  //出栈
  pop(){
    return this.numbers.pop()
  }
  //返回栈顶元素
  peek(){
    return this.numbers[this.numbers.length-1]
  }
  //判断栈是否为空
  isEmpty(){
    return this.numbers.length===0
  }
  //清空栈内元素
  clear(){
    this.numbers=[]
  }
  //获取栈内元素数量
  size():number{
    return this.numbers.length
  }
}
const numberstack =new NumberStack()


//检查括号是否多余，且若前括号多余则去掉多余的前括号
function checkParentheses(expression: string): { valid: boolean, cleanedExpression: string } {
  let stack = []
  let cleanedExpression = expression

  for (let ch of expression) {
    if (ch === '(') {
      stack.push(ch)
    } else if (ch === ')') {
      if (stack.length === 0) {
        return { valid: false, cleanedExpression: expression }
      }
      stack.pop()
    }
  }
  // 去掉多余的前括号
  while (stack.length > 0) {
    let index = cleanedExpression.indexOf('(')
    if (index !== -1) {
      cleanedExpression = cleanedExpression.slice(0, index) + cleanedExpression.slice(index + 1)
    }
    stack.pop()
  }
  console.log(cleanedExpression)
  return { valid: stack.length === 0, cleanedExpression }

}


function total(expression:string){
  characterstack.push('#')
  let i=0
  let ch=expression[i]
  while (ch!='#'||characterstack.peek()!='#') {
    if(!Instring(ch)){//进行多位数的入栈
      let numStr = ch
      while (i + 1 < expression.length && !Instring(expression[i + 1])) {
        ch = expression[++i]
        numStr += ch
      }
      numberstack.push(numStr)
      ch = expression[++i]
    }
    else{

      switch (Precede(characterstack.peek(),ch)){
        case '<':{
          characterstack.push(ch);
          ch=expression[++i]
          break
        }
        case '>':{
          let theta= characterstack.pop()
          let b=numberstack.pop()
          let a=numberstack.pop()
          numberstack.push(Operate(a,theta,b))
          break
        }
        case '=':{
          characterstack.pop()
          ch=expression[++i]
          break
        }
      }
    }
  }
  return numberstack.peek()
}


//判断ch是否为运算符
function Instring(ch:string){
  let num:string[]=['+','-','(',')','÷','×','#','%']
  return num.includes(ch)
}


//判断运算符的优先级
function Precede(thetal:string,thetal2:string):string{
  if((thetal=='('&&thetal2==')')||(thetal=='#'&&thetal2=='#')){
    return '='
  }
  else if(thetal=='('||thetal=='#'||thetal2=='('||(thetal=='+'||thetal=='-')&&(thetal2=='×'||thetal2=='÷'||thetal2=='%')){
    return '<'
  }
  else return '>'
}


//计算两数的运算结果
function Operate(first:string,theta:string,second:string):string{
  switch (theta){
    case '+':
      return ((+first)+(+second)).toString()
    case '-':
      return ((+first)-(+second)).toString()
    case '×':
      return ((+first)*(+second)).toString()
    case '÷':
      return ((+first)/(+second)).toString()
    case '%':
      return ((+first)%(+second)).toString()
  }
  return 'NaN'
}
了了一。
关注
  • 23
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鸿蒙开发实战项目(十三):简易计算器（ArkTS）
sybh的博客
01-26 1399
基于基础组件、容器组件，实现一个支持加减乘除混合运算的计算器。由于数字都是双精度浮点数，在计算机中是二进制存储数据的，因此小数和非安全整数（超过整数的安全范围[-Math.pow(2, 53)，Math.pow(2, 53)]的数据）在计算过程中会存在精度丢失的情况。
2024鸿蒙OS实战开发项目大全：从入门到精通（含101个实战案例）超详细的鸿蒙实战案例
sybh的博客
05-17 3385
从基础的UI组件到复杂的分布式场景，从ArkTS的细致教学到JS的灵活运用，这一百个项目涵盖了你需要知道的HarmonyOS实战技术和策略。我们会从溪村小镇的细节世界开始，深入多端部署的可能性，感受如购物应用和音乐专辑这样的实用系统是如何在HarmonyOS中获得生命的。忘却繁杂，把握简单，最后我们将以开发您的第一个快应用（初级版和高级版）为终结，为您的鸿蒙OS开发之旅画上完美的句号。这一百个项目不仅仅是教程或示例，它们是设计思维、创新灵感和开发技巧的集大成，是您实战开发HarmonyOS路上的重要伴侣。
OpenHarmony实战开发-如何使用分布式能力实现一个计算器应用
2401_82546228的博客
04-03 766
本示例使用分布式能力实现了一个简单的计算器应用，可以进行简单的数值计算，支持远程拉起另一个设备的计算器应用，两个计算器应用进行协同计算。
鸿蒙ArkUI开发实战：制作一个【简单计数器】
m0_62167422的博客
04-08 1441
RenderNode 负责一个节点的显示信息，它形成的 Render 树维护着整个界面渲染需要用到的信息，包括位置、大小、绘制命令等。Element 是 Component 的实例，表示一个具体的组件节点，它形成的 Element 树负责维持界面在整个运行时的树形结构，方便计算更新时的局部更新算法等。通过简单计数器示例，读者先了解一下 OpenHarmony 应用的组件、页面布局，点击事件以及 @State 修饰符的作用，最后给简单介绍了一下 OpenHarmony 的页面构建流程。
鸿蒙开发实战案例-计算器（附整套源码）
shudaoshanQAQ的博客
03-05 3082
鸿蒙开发实战案例-计算器（附整套源码）
OpenHarmony开发实战：简易计算器（ArkTS）
shudaoshanQAQ的博客
04-03 2251
本篇Codelab基于基础组件、容器组件，实现一个支持加减乘除混合运算的计算器。
OpenHarmony实战开发-使用ArkTS卡片开发一个计算器模型。
m0_70749039的博客
04-02 1189
本示例展示了使用ArkTS卡片开发的计算器模型。
鸿蒙 arkts 计算器 我的资源
05-10
鸿蒙 arkts 计算器 我的资源
OpenHarmony开发实战：简易计算器（ArkTS，2024年最新移动应用开发专业介绍及就业方向
m0_61943758的博客
04-10 1286
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
牛肉胡辣汤
07-19 5847
/ xxx.ets @Entry @Component struct CounterExample { @State value: number = 0 build() { Column() { Counter() { Text(this.value.toString()) }.margin(100) .onInc(() => { this.value++ }) .onDec(() => { this.value-- }) }.width("100%") } }D. 多设备预览时，不支持双向预览功能。
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5030
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
一个计算器的诞生【ArkTS】
最新发布
2302_79763237的博客
08-04 721
逆波兰表达式又称后缀表达式，即每一种运算都放置在运算对象后；我们平时书写的像 3+5x6 ，每一种运算符都放置在运算对象中间，所以叫做中缀表达式。上述式子改写为后缀表达式即为 3 5 6 x +这种式子乍一看可能很难让人理解这byd到底是咋算出来答案的，而要解释原理，我们又要引出一位神秘嘉宾，那就是数据结构中的——栈。
基于 ArkTs 构建的智能多功能计算器
qq_63117516的博客
06-25 140
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
tutu6663的博客
12-01 4544
实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
JavaScript 计算器
allway2的博客
06-02 7290
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
javascript简易计算器
a17783481239的博客
09-18 2753
查看历史记录
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：尺寸设置）
m0_64420071的博客
03-01 4137
ArkTS声明式开发（通用属性：尺寸设置）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值