脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js计算器

JavaScript实现简单计算器功能

 更新时间：2019年12月19日 15:25:39   作者：郑德帅  
这篇文章主要为大家详细介绍了JavaScript实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

1.实现基本计算器功能，如图

2.逻辑代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <!--设置样式-->
 <style>
 .showdiv{
 text-align: center;
 margin:auto;/*设置居中*/
 border: solid 1px;
 width: 400px;
 height: 500px;
 border-radius: 10px;/*设置边框角度*/
 }
 input[type="text"]{
 margin-top: 10px;
 width: 380px;
 height: 40px;
 font-size: 40px;
 }
 input[type="button"]{
 margin: 10px;
 margin-top: 20px;
 width: 60px;
 height: 80px;
 font-size: 40px;
 font-weight: bold;
 }
 </style>
 <!--设置js代码-->
 <script type="text/javascript">
 /*将按钮的值赋值给输入框*/
 function num(btn){
 //把不能为零去掉
 if(document.getElementById("inp").value.match("除数")){
 document.getElementById("inp").value = "";
 }
 //获取button按钮的value
 var num = btn.value;
 console.log(num +" " +typeof(num))
 //将值赋值给text文本框
 switch(num){
 case "c":
 document.getElementById("inp").value = "";
 break;
 case "=":
 if(document.getElementById("inp").value.match("/")){
 if(document.getElementById("inp").value.split("/")[1] == "0"){
 document.getElementById("inp").value = "除数不能为零";
 }else{
 document.getElementById("inp").value = eval(document.getElementById("inp").value);
 }
 break;
 }else{
 document.getElementById("inp").value = eval(document.getElementById("inp").value);
 break;
 }
 default: 
 document.getElementById("inp").value = document.getElementById("inp").value+num;
 break;
 }
 }
 </script>
 </head>
 <body>
 <div class = "showdiv">
 <input type="text" name="" id="inp" value="" readonly="readonly"/><br />
 <input type="button" name="" id="" value="0" onclick="num(this)"/>
 <input type="button" name="" id="" value="1" onclick="num(this)"/>
 <input type="button" name="" id="" value="2" onclick="num(this)"/>
 <input type="button" name="" id="" value="3" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="4" onclick="num(this)"/>
 <input type="button" name="" id="" value="5" onclick="num(this)"/>
 <input type="button" name="" id="" value="6" onclick="num(this)"/>
 <input type="button" name="" id="" value="7" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="8" onclick="num(this)"/>
 <input type="button" name="" id="" value="9" onclick="num(this)"/>
 <input type="button" name="" id="" value="+" onclick="num(this)"/>
 <input type="button" name="" id="" value="-" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="*" onclick="num(this)"/>
 <input type="button" name="" id="" value="/" onclick="num(this)"/>
 <input type="button" name="" id="" value="=" onclick="num(this)"/>
 <input type="button" name="" id="" value="c" onclick="num(this)"/>
 </div>
 </body>
</html>

关于计算器的精彩文章请查看《计算器专题》 ，更多精彩等你来发现！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • localStorage实现便签小程序

    localStorage实现便签小程序

    这篇文章主要为大家详细介绍了localStorage实现便签小程序的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 100个不能错过的实用JS自定义函数

    100个不能错过的实用JS自定义函数

    本文收集了100个原生态JavaScript编写的常用、实用自定义函数,需要的朋友可以参考下
    2014-03-03
  • 微信小程序API—获取定位的详解

    微信小程序API—获取定位的详解

    这篇文章主要介绍了微信小程序API获取定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JS如何把字符串转换成json

    JS如何把字符串转换成json

    这篇文章主要介绍了JS如何把字符串转换成json,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Ext JS动态加载JavaScript创建窗体的方法

    Ext JS动态加载JavaScript创建窗体的方法

    这篇文章主要介绍了Ext JS动态加载JavaScript创建窗体的方法 ,需要的朋友可以参考下
    2016-06-06
  • 基于Web Audio API实现音频可视化效果

    基于Web Audio API实现音频可视化效果

    这篇文章主要介绍了基于Web Audio API实现音频可视化效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • js实现简易计算器小功能

    js实现简易计算器小功能

    这篇文章主要为大家详细介绍了js实现简易计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果，非常不错，对微博输入框效果感兴趣的朋友通过本文学习吧
    2016-12-12
  • 微信小程序开发实现消息推送

    微信小程序开发实现消息推送

    这篇文章主要为大家详细介绍了微信小程序开发实现消息推送，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • BootStrap便签页的简单应用

    BootStrap便签页的简单应用

    本文通过实例代码给大家简单介绍了bootstrap便签页的简单应用，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-01-01

最新评论