<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="number1"> <select id="selector"> <option selected>+</option> <option>-</option> <option>*</option> <option>/</option> </select> <input type="text" id="number2"> = <span id="result"></span> <input type="button" onclick="calc()" value="计算"> <script> function calc(){ //获取编辑框1.内容 let num1 = document.getElementById("number1").value; //判断是否为空 if(num1===""){alert("请输入第一个数");return ;} //判断是否为数字 if(isNaN(num1)){alert("请在第一个输入框输入一个数字");return ;} //获取编辑框2.内容 let num2 = document.getElementById("number2").value; if(num2===""){alert("请输入第二个数");return ;} if(isNaN(num2)){alert("请在第二个输入框输入一个数字");return ;} //获取运算符号 let t = document.getElementById("selector").value; //获取第三个编辑框以便计算后显示运算结果 let result = document.getElementById("result"); //将字符串转为数字 try{ num1 = parseFloat(num1) num2 = parseFloat(num2) }catch (err){ alert(err.message) return ; } //当做除法时，除数不能为0 if(t==="/" && num2===0) { alert("除数不能为0") return; } //根据运算符选择相应的计算 switch (t){ case '+': result.innerText = (num1+num2).toString(); break; case '-': result.innerText = (num1-num2).toString(); break; case '*': result.innerText = (num1 * num2).toString(); break; case '/': result.innerText = (num1 / num2).toString(); break; default: result.innerText = "what happen?" } return result.innerText; } </script> </body> </html>
【前端】【JavaScript】简单的加减乘除计算器
2022-11-14
232
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
【前端】【JavaScript】简单的加减乘除计算器
目录
相关文章
|
21天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37
1
2
|
4月前
|
JavaScript
前端开发
Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
71
3
4
|
4月前
|
缓存
JavaScript
前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
95
5
5
|
4月前
|
缓存
前端开发
JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
139
1
1
|
4月前
|
JSON
前端开发
JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
85
4
4
|
4月前
|
资源调度
前端开发
JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤，包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆，以及在 HTML 文件中引用混淆后的文件。通过这些步骤，可以有效提高代码的安全性。
302
2
3
|
4月前
|
设计模式
前端开发
JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
106
4
4
|
4月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
64
2
2
|
6月前
|
存储
前端开发
JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素，以及JavaScript的鼠标事件处理，通过示例代码展示了这些基础知识点在实际开发中的应用。
66
2
2
|
6月前
|
Web App开发
JavaScript
前端开发
前端基础(一)_初识JavaScript
本文介绍了JavaScript的起源、核心组成（ECMAScript、DOM、BOM），并解释了JavaScript的三种引入方式：行内引入、内部引入和外部引入，以及`window.onload`的使用，最后讨论了网页、网站、浏览器和兼容性的概念。
24
2
2
热门文章
最新文章
1
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
2
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
3
从前端视角聊聊通义灵码使用经验，如何更好地提升研发效率
4
详解智能编码在前端研发的创新应用
5
巧用通义灵码，提升前端研发效率
6
智能编码在前端研发的创新应用
7
VSCode AI提效工具，通义灵码前端开发体验
8
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
9
课程预告｜前端开发者如何用好通义灵码，这份实战指南请查收
10
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1
JavaScript基础——JavaScript变量名称命名规范
28
2
如何在React.js中使用Shadcn/UI
74
3
多种脚本批量下载 Docker 镜像：Shell、PowerShell、Node.js 和 C#
41
4
三句话生成 P5.js 粒子特效代码，人人都可以做交互式数字艺术
58
5
打造动态数据可视化：JavaScript与AI的完美结合
15
6
探索JavaScript网页设计的无限可能：从基础到AI集成
13
7
打造动态数据可视化：JavaScript与AI的完美结合
14
8
【通义灵码】三句话生成P5.js粒子特效代码，人人都可以做交互式数字艺术
44
9
【编程向导】Js与Ts差异详解：选择与权衡
18
10
20 个 JavaScript 简化技巧，让你的代码更上一层楼！
20