利用JavaScript在html页面做一个计算器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、html组成二、html和css,js基础知识***1.html******2.css****3.javascript*代码一些细节未解决的bug前言提示：这里可以添加本文要记录的大概内容：提示：以下是本篇文章正文内容，下面案例可供参考一、html组成我们所要做的计算器可由两种方式构成1.可以用table标签和tr，t

我吃白葡萄

11448人浏览 · 2022-03-31 20:48:42

我吃白葡萄 · 2022-03-31 20:48:42 发布

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

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

一、html组成

在这里插入图片描述
我们所要做的计算器可由两种方式构成
1.可以用table标签和tr，th，td标签构成，然后用css对他们的属性进行操作得到计算器.
2.可以用div容器实现，头部可看成五个div容器,红绿蓝各一个，碉堡计算器一个，结果栏一个，按键由20个div组成

二、html和css,js基础知识

1.html

(1)文本:设置字体，颜色，大小，加粗，斜体，下划线
(2)图片:设置边框，大小，位置
(3)超链接:图片，文本等均可以添加超链接
(4)表格:展示行列结构构成的数据，可以为表格设置大小，背景等，表格里面可以放置所有元素，一般为从数据库取出数据，在前端用表格展示出来
(5)表单:文本框，下拉框，单选框，按钮，文本域等，一般为登录界面
(6)多媒体:视频，音频，游戏等

2.css

对页面元素进行布局和美化
".“对div的clss进行修饰，”#"是定位到id

3.javascript

在浏览器中运行的解释性编程语言，用于进行页面的交互(前后端交互，用户间的交互)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年轻人不要太气盛</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: gray;
            /* border-radius: 10px; */
            /* border-top-left-radius: 10px; */
        }
        #top .point {
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
        #top .red {
            background-color: red;
        }
        #top .blue {
            background-color: blue;
        }
        #top .green {
            background-color: green;
        }
        #calc-title {
            font-size: 22px;
            color: white;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }

        /* 设置结果显示栏样式 */
        #result {
            width: 446px;
            height: 50px;
            margin: auto;
            text-align: right;/*文本内容右对齐*/
            background-color: white;
            border: solid 2px red;
            font-size: 30px;
        }

        /* 设置按钮区域的样式 */
        #button {
            width: 450px;
            height: 422px;
            background-color: gray;
            margin: auto;
        }

        #button div {
            width: 108px;
            height: 80px;
            float: left;
            background-color: #7fffd4;
            margin: 2px;
            line-height: 80px;
            text-align: center;
            font-size: 26px;
        }

        /* 使用伪类选择器设置鼠标悬停效果 */
        #button div:hover {
            background-color: orangered;
        }

    </style>
    <script type="text/javascript">
        //获取一个元素
        function aler(){
        var cal = document.getElementById("calc-title").innerHTML;
        window.alert(cal);
        }
        document.getElementsByClassName("point");
        //输入数字
        function num(number){
        var result = document.getElementById("result")
        result.innerHTML = result.innerHTML + number 
        }//这里的result，不是name里面的
        //输入运算符
        function oper(operator){
        var result = document.getElementById("result")
        result.innerHTML = result.innerHTML + operator
        }
        //计算结果
        function yunsuan(){
            var result= document.getElementById("result")
            var expression = result.innerHTML
            result.innerHTML =eval(expression)//eval是一个可以把里面的字符串当成代码运行，eval可以把字符串转为数字然后执行
        }
        function doback(){
            var result =document.getElementById("result")//这里只是定位到result
            var len=result.innerHTML.length//这里才是取出result的值并取他的总长度
            result.innerHTML =result.innerHTML.substr(0,len-1)//把result里面的值处理后重新放到result里面
            
        }
        function qingkong(){
            var result = document.getElementById("result")
            result.innerHTML = ""

        }
    </script>
</head>
<body >
    <div id="top">
        <div class="point red"></div>
        <div class="point blue"></div>
        <div class="point green"></div>
        <div id="calc-title">碉堡了计算器</div>
    </div>

    <div id="result" name="result" ></div>

    <div id="button">
        <!--当被单击时触发事件-->
        <!--在<script>里面写函数，下面调用函数，传参-->
        <div onclick="qingkong()">AC</div>
        <div>+/-</div>
        <div onclick="oper('%')">%</div>
        <div onclick="oper('/')">÷</div>
        <div onclick="num(7)">7</div>
        <div onclick="num(8)">8</div>
        <div onclick="num(9)">9</div>
        <div onclick="oper('*')">*</div>
        <div onclick="num(4)">4</div>
        <div onclick="num(5)">5</div>
        <div onclick="num(6)">6</div>
        <div onclick="oper('-')">-</div>
        <div onclick="num(1)">1</div>
        <div onclick="num(2)">2</div>
        <div onclick="num(3)">3</div>
        <div onclick="oper('+')">+</div>
        <div onclick="num(0)">0</div>
        <div onclick="doback()">删除</div>
        <div onclick="oper('.')">.</div>
        <div onclick="yunsuan()">=</div>
    </div>

</body>
</html>