JavaScript-简易计算器

最新推荐文章于 2022-08-18 16:37:09 发布

谢飞飞啦

最新推荐文章于 2022-08-18 16:37:09 发布

阅读量252

点赞数

分类专栏：学习日志文章标签： js html css

本文链接：https://blog.csdn.net/weixin_46217915/article/details/113034898

版权

HTML CSS JavaScript 计算器前端开发

关键词由CSDN通过智能技术生成

学习日志专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

前言
一、所用知识点
二、代码奉上
- 1.H5和CSS
- 2.JS
总结

前言

提示：初学JS,方法都是比较简单的，如果各位道友有什么更好的方法，欢迎交流

提示：以下是本篇文章正文内容，下面案例可供参考

一、所用知识点

1，通过H5中的onclick属性与JS传输数据，
2，JS的函数（真的和java颇为相像）
3，JS通过H5的id查找，寻找目标，传送数据,

二、代码奉上

1.H5和CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            /*background-color: #1b1e21;*/
        }
        input{
            width: 30px;
            border: 0;
            padding: 0;
        }
        #txt{
            width: 135px;
        }
        #AC{
            width: 65px;
        }
        #txt0{
            width: 65px;
        }


    </style>
</head>
<body>
  <div class="calculator">
      <input type="text"  id="txt" readonly><br>
      <input type="button" id="AC" onClick="Clear()" value="AC">
      <input type="button" id="/" onClick="TNumber(this.value)" value="/">
      <input type="button" id="%" onClick="TNumber(this.value)" value="%"><br>

      <input type="button" id="7" value="7" onClick="TNumber(this.value)">
      <input type="button" id="8" value="8" onClick="TNumber(this.value)">
      <input type="button" id="9" value="9" onClick="TNumber(this.value)">
      <input type="button" id="+" value="+" onClick="TNumber(this.value)"><br>

      <input type="button" id="4" value="4" onClick="TNumber(this.value)">
      <input type="button" id="5" value="5" onClick="TNumber(this.value)">
      <input type="button" id="6" value="6" onClick="TNumber(this.value)">
      <input type="button" id="-" value="-" onClick="TNumber(this.value)"><br>
<!--我发现他好像对onclick的大小写没有什么分别，onclick和onClick都可以用-->
      <input type="button" id="1" value="1" onClick="TNumber(this.value)">
      <input type="button" id="2" value="2" onclick="TNumber(this.value)">
      <input type="button" id="3" value="3" onclick="TNumber(this.value)">
      <input type="button" id="txt*" value="*" onclick="TNumber(this.value)"><br>

      <input type="button" id="txt0" value="0" onclick="TNumber(this.value)">
      <input type="button" id="txt." value="." onclick="TNumber(this.value)">
      <input type="button" id="txt=" value="=" onclick="Calculator()">

  </div>
  <script type="text/javascript" src="简易计算器2.js"></script>
</body>
</html>

2.JS

/*读取id为txtNum的文本,建立沟通桥梁*/
var text=document.getElementById("txt");

var numObj="";
var Total=0;

/*输入*/
function TNumber(obj)
{
    numObj+=obj;
    text.value=numObj;//字符串连接，对系显示数字的框进行重写
}

/*计算*/
function Calculator()
{
    var str=text.value;
    Total=eval(text.value);//编译输入文本框的内容，eval()函数有计算功能
    text.value=str+"="+Total;//重写显示内容，并赋值输出
    numObj="";//重归于空字符串

}

/*清屏*/
function Clear()
{
    text.value="";
    numObj="";
}

总结

以上就是今天要讲的内容，如有错误，欢迎告知，如有新思想，欢迎交流。

谢飞飞啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-简易计算器

文章目录前言一、所用知识点二、代码奉上1.H5和CSS2.JS总结前言提示：初学JS,方法都是比较简单的，如果各位道友有什么更好的方法，欢迎交流提示：以下是本篇文章正文内容，下面案例可供参考一、所用知识点1，通过H5中的onclick属性与JS传输数据，2，JS的函数（真的和java颇为相像）3，JS通过H5的id查找，寻找目标，传送数据,二、代码奉上1.H5和CSS<!DOCTYPE html><html lang="en"><head>.
复制链接

扫一扫

专栏目录