js实现简易计算器小功能


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<style>

 ul li{
 list-style: none;
 line-height: 50px;
 }
 .getAnswer{
 width: 20px;
 }
</style>
</head>
<body>
 <form name="calc">
 <h2>简易计算器</h2>
 <ul>
 <li> 第一个数: <input type="text" name="num1" ></li>
 <li> 第二个数: <input type="text" name="num2"></li>
 <li> <input name="getAnswer" type="button" onclick="calcu1()" value="+">
 <input name="getAnswer" type="button" onclick="calcu2()" value="-">
 <input name="getAnswer" type="button" onclick="calcu3()" value="*">
 <input name="getAnswer" type="button" onclick="calcu4()" value="/">
 </li>
 <li>计算结果: <input type="text" name="result" id="result"> </li>
 </ul>
 </form>

 <script type="text/javascript">
 
 function calcu1() {
 var num1=document.calc.num1.value;
 var num2=document.calc.num2.value;
 sum1=parseFloat(num1) + parseFloat(num2); 
 var total = num1+"+"+num2+"="+sum1;  
 document.calc.result.value=total; 
 }
 function calcu2() {
 var num1=document.calc.num1.value;
 var num2=document.calc.num2.value;
 sum1=parseFloat(num1) - parseFloat(num2);
 var total = num1+"-"+num2+"="+sum1; 
 document.calc.result.value=total; 
 }
 function calcu3() {
 var num1=document.calc.num1.value;
 var num2=document.calc.num2.value;
 var total = num1+"*"+num2+"="+parseFloat(num1)*parseFloat(num2); 
 document.calc.result.value=total; 
 }
 function calcu4() {
 var num1=document.calc.num1.value;
 var num2=document.calc.num2.value;
 if (num2==0){ alert("除数不能为0,请重新输入");
  }else{
 var total = num1+"/"+num2+"="+parseFloat(num1) / parseFloat(num2); 
 document.calc.result.value=total; 
 }
 }
</script>
</body>

</html>

运行结果:

js实现简易计算器小功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
微信小程序实现购物车功能
Nov 18 #Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
微信小程序实现日历小功能
Nov 18 #Javascript
微信小程序实现底部弹出模态框
Nov 18 #Javascript
微信小程序实现左滑删除效果
Nov 18 #Javascript
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
用vue写一个日历
2020/11/02 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python绘制玫瑰的实现代码
2020/03/02 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
周年庆典邀请函范文
2014/01/24 职场文书
我爱我家教学反思
2014/05/01 职场文书
新法人代表任命书
2014/06/06 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS