使用html+css+javaScript 完成计算器

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: 使用html+css+javaScript 完成计算器

一、先用html与css搭建骨架

思路:

  1. 将计算器的数字按钮放进一个表格里,
  2. 再通过css修饰
  3. 然后对指定的数字按钮或功能按钮添加事件
  4. 将需要计算的式子放进一个字符串里,最后==通过全局方法eval( )计算==出来

html的骨架搭建

//这里的用一个 div 将内容包住, 然后再align="center" 将计算机居中
<div align="center">
    <div class="main_div">
        <div class="top_div">wswsjwq的计算器</div>
        <textarea id="main_div_area" cols="35px" rows="3px"></textarea>
        <table class="mian_div_table" cellpadding="0" cellspacing="10">
            <tr>
                <td class="cell_nub">7</td>
                <td class="cell_nub">8</td>
                <td class="cell_nub">9</td>
                <td class="cell_nub">+</td>
            </tr>
            <tr>
                <td class="cell_nub">4</td>
                <td class="cell_nub">5</td>
                <td class="cell_nub">6</td>
                <td class="cell_nub">-</td>
            </tr>
            <tr>
                <td class="cell_nub">1</td>
                <td class="cell_nub">2</td>
                <td class="cell_nub">3</td>
                <td class="cell_nub">*</td>
            </tr>
            <tr>
                <td class="cell_nub">0</td>
                //使用onclick="函数()" 添加点击事件
                <td onclick="clearArea()">C</td>
                <td onclick="sum()">=</td>
                <td class="cell_nub">/</td>
            </tr>
        </table>
    </div>
</div>

效果:
在这里插入图片描述

css点缀修饰

        <style type="text/css">
            .main_div {
   
   
                width: 500px;
                height: 350px;
                background-color: #F0F8FF;
            }
            .top_div {
   
   
                height: 50px;
                line-height: 50px;
                background-color: #DFE9F5;
                font-weight: bold;
                font-size: x-large;
                font-family: "宋体";
            }
            .mian_div_table {
   
   
                 width: 500px;
                 height: 150px;
            }
            .mian_div_table td {
   
   
                padding-left: 40px;
                font-size: 30px;
                background-color: #A9A9A9;
            }
            #main_div_area {
   
   
                font-size: xx-large;
            }
        </style>

效果:
在这里插入图片描述
最后的大头javaScript:

    <script type="text/javascript">
        // 获取到每个数字按键的document对象
        var Btn = document.getElementsByClassName("cell_nub");
        //获取文本域对象,***注意此处只能使用id来获取文本域对象***
        var areaObj = document.getElementById("main_div_area");
        //定义一个字符串来接收输入内容
        var Str = "";
        var arr = [];
        //给同一个类添加事件
        for (var i = 0; i < Btn.length; i++) {
   
   
          arr.push(i);
          arr.forEach((value) => {
   
   
            Btn[value].onclick = function () {
   
   
                //打印出按压结果以便观看
              console.log("按压值: "+Btn[value].innerHTML);
              //将值传给拼接字符串的方法add()
              add(Btn[value].innerHTML);
            };
          });
        }

        //字符串拼接方法
        function add(temp){
   
   
            console.log("拼接字符串方法执行");
            console.log(Str.charAt(Str.length-1));
            //如果此时的按压值是+-*/与上一个字符重复,就要覆盖上一次的符号
            if((Str.charAt(Str.length-1)=="+"||Str.charAt(Str.length-1)=="-"||Str.charAt(Str.length-1)=="*")&&(temp=="+"||temp=="-"||temp=="*"||temp=="/")){
   
   
                console.log("此时的按压值 :"+temp);
                //截取0到最后一个,不包括最后一个
                Str=Str.substring(0,Str.length-1);
                console.log("删除重复符号后"+Str);
                Str+=temp;
                console.log("添加后"+Str);
            }else{
   
   
                Str+=temp;
            }
            areaObj.value = Str;
            console.log("字符串Str="+Str);
        }
        //使用eval()求和的方法
        function sum(){
   
   
            console.log("求和方法执行");
            console.log("结果是: "+eval(Str));
            areaObj.value = eval(Str);
        }
        //清除的方法
        function clearArea(){
   
   
            console.log("清除方法执行");
            Str="";
            console.log("清除后"+Str);
            areaObj.value = Str;
        }
    </script>

==当我写javaScript时候遇到的问题;==

  1. 就是获取文本域的标签对象(也叫文本域的DOM对象)时候,我给那个文本域标签使用class命名,获取DOM对象时候,无法修改文本域里的内容
    如图:
    !在这里插入图片描述](https://img-bog.csdnimg.cn/337c4c6992f546a0b84a2c708af23e93)

在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/735d8acd535e4217afe31c91e6b24476.png)

点击数字按键并不能将按键的内容放到文本域里

  1. 在我想将获取的计算式子放到文本域时候老想着使用
    ```cpp
    areaObj.innerHTML = "我是获取的按钮值";

这样无法获取到,因为文本域标签时功能性标签,并不是想div那样的包裹标签,
所以应该用value

areaObj.value = "我是获取的按钮值";

3. 还要再注意一下给一类标签添加事件的代码块

```cpp
            var arr = [];
            //用for循环给获取的一组类标签加事件
        for (var i = 0; i < Btn.length; i++) {
          arr.push(i);
          arr.forEach((value) => {
            Btn[value].onclick = function () {
                //打印出按压结果以便观看
              console.log("按压值: "+Btn[value].innerHTML);
              //将值传给拼接字符串的方法add()
              add(Btn[value].innerHTML);
            };
          });
        }

如果foreach忘记的兄弟们 点这里

  1. 还有一点
    如果要在javaScript里获取对象, 那就要写在body的后面

这是由于脚本语言是从上向下加载顺序有关


若有错误, 及时提出,作者秒回

相关文章
|
1天前
|
前端开发 JavaScript 算法
JavaScript制作简版计算器,提供加减乘除功能
JavaScript制作简版计算器,提供加减乘除功能
5 0
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
10 1
|
4天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
17 2
|
6天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
15 0
|
6天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
14 0
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
6天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
13 2
|
7天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
12天前
|
移动开发 前端开发 JavaScript
[初学者来练]用html+css+javascript个人博客作业需求
【6月更文挑战第3天】该项目旨在通过HTML、CSS和JavaScript创建一个响应式个人博客网站,提升前端开发技术理解与实践能力。主要包括设计简洁页面布局、实现主页展示、文章列表、详情页及评论功能。技术要求使用HTML5/CSS3/JavaScript,可选前端框架,强调代码质量和可维护性。提交内容需包括完整网站、开发文档和测试过的代码。评分标准涉及设计、功能实现、技术应用和文档质量。
14 0