用JS HTML CSS 实现简单计算器的制作

最新推荐文章于 2024-09-13 23:28:46 发布
最新推荐文章于 2024-09-13 23:28:46 发布
阅读量194 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44318919/article/details/117692220
版权

html部分：

<!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>calculate</title>

    <link rel="stylesheet" href="calculate.css">

    <link rel="stylesheet" href="calculate.js">

 

</head>

 

<body>

    <div class="box">

        <!--大框框-->

        <div class="input">

            <!--输入框-->

            <div class="tip">

                <!--小点点-->

                <div class="tip1"></div>

                <div class="tip2"></div>

                <div class="tip3"></div>

            </div>

            <div>

                <!--输入数字框-->

 

                <!--结果显示框-->

                <input type="text" class="input_box" id="number">

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="AC">

                <ul>

                    <li οnclick="deletes()">AC</li>

                </ul>

            </div>

            <div class="AC">

                <ul>

                    <li οnclick="just()">+/-</li>

                </ul>

            </div>

            <div class="AC">

                <ul>

                    <li οnclick="input('%')">%</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('/')">&divide</li>

                </ul>

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="BC">

                <ul>

                    <li οnclick="input('7')">7</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('8')">8</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('9')">9</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('*')">&times</li>

                </ul>

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="BC">

                <ul>

                    <li οnclick="input('4')">4</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('5')">5</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('6')">6</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('-')">-</li>

                </ul>

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="BC">

                <ul>

                    <li οnclick="input('1')">1</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('2')">2</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('3')">3</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('+')">+</li>

                </ul>

            </div>

        </div>

        <div class="bottom">

            <div class="CD">

                <ul>

                    <li οnclick="input('0')" class="CD_li">0</li>

                </ul>

            </div>

            <div class="bottom_tip">

                <ul>

                    <li οnclick="input('.')" class="CD_li">.</li>

                </ul>

            </div>

            <div class="bottom_orange">

                <ul>

                    <li οnclick="output('=')">=</li>

                </ul>

            </div>

        </div>

    </div>

    <script src="calculate.js"></script>

</body>

</html>

CSS部分：

*{

    padding: 0;

    margin: 0;

    list-style: none;

}

*{

    user-select: none;

}

.hover{

    opacity: 0.8;

}

.box{

    width: 480px;

    height: 570px;

    border-radius: 20px;

    border: 3px solid black;

    position: relative;

    justify-content: center;

    margin: 150px auto;

    background-color: #010101;

}

.input{

    width:460px;

    height: 120px;

    background-color: black;

    border-top-left-radius:15px ;

    border-top-right-radius:15px;

    

}

.input_box{

    width: 100%;

    font-size: 80px;

    color: aliceblue;

    float: right;

    background-color:#010101;

    text-align: right;

    height: 88px;

    border: 0;

  

   

}

.tip{

    display: flex;

}

.tip1{

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: relative;

    background-color: red;

    margin: 5px;

    display: block;

}

.tip2{

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: relative;

    background-color:yellow;

    display: block;

    margin: 5px;

}

.tip3{

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: relative;

    background-color:green;

    display: block;

    margin: 5px;

}

.input_number{

    color: aliceblue;

    font-weight: bold;

    font-size: 60px;

    float: right;

    margin: 0px 20px;

    font-family:'Courier New', Courier, monospace;

    

}

#ac{

    display: flex;

    

}

.AC{

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 120px;

    height: 90px;

    background-color: #1e201e;

    border: 1px solid #010101;

 

}

.orange{

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 122px;

    height: 90px;

    background-color:rgb(226, 79, 25);

    border: 1px solid #010101;

 

}

.orange_li{

    width: 1223px;

    height: 90px;

}

.BC{

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 120px;

    height: 90px;

    background-color: #666;

    border: 1px solid #010101;


 

}

.CD{

   

    font-size: 60px;

    color: aliceblue;

    width: 242px;

    height: 82px;

    background-color: #666;

    border: 1px solid #010101;

    border-bottom-left-radius:15px ;

   

}

.CD_li{

    text-align: center;

}

.bottom{

    display: flex;

   

  

}

.bottom_tip{

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 120px;

    height: 82px;

    background-color: #666;

    border: 1px solid #010101;

 

}

.bottom_orange{

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 122px;

    height: 83px;

    background-color:rgb(226, 79, 25);

    border: 1px solid #010101;

    border-bottom-right-radius:15px ;

 

}

.inputbox{

    background-color: #010101;

    width: 100%;

}

JS部分：

function input(number) {

    var inputs = document.getElementById('number').value;

    document.getElementById('number').value += number;

 

}

function output() {

    var put = document.getElementById('number').value;

    var puts = eval(put);

    document.getElementById('number').value = puts;

 

}

function deletes() {

    var inputs = document.getElementById('number').value;

    document.getElementById('number').value = '';

 

}

function just() {

    var just = document.getElementById('number').value;

    if(just.charCodeAt(0) == 45){

        document.getElementById('number').value = just.substr(1,just.length);

    }

    else{

        document.getElementById('number').value = '-' + just;

    }

 

}

李欣没有梦
关注
js +css完成网页计算器小作业
anullllun的博客
06-23 541
html 网页计算器小作业 整体思路如下 1.对按钮的分类 2. 分别获取每个分类的按钮 3. 数字类的无需过多调整 4. 定义每种运算方法的函数 5. 对运算符的按钮进行遍历并打上标签通过switch判断要使用哪种运算方法并且将方法赋值给Fun 6. 获取等于号按钮调用每次被赋值的Fun； 代码如下 html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
使用HTML、CSS以及JavaScript 编写一个简单计算器
Judy
03-25 1万+
学完HTML、CSS、JS后有一个小的程序需要DIY，讲真，刚开始知道是计算器的时候还觉得很简单吧其实没想到自己真正动手做，还是会有好多细节。目标：做出像手机上面的简单计算器一样！！！实现基本加减乘除，取相反数，退格，清零思路：一、界面的搭建：在这里，我构建了两个DIV，小的div用来控制将来计算器显示屏，大的div用的放置按键。&lt;body&gt; &lt;div id="q"&gt;&lt...
php/html+css+js制作计算器
caesarding07
04-05 670
目录效果展示完整代码思考总结 效果展示 可以实现的计算功能包含： All clear 、 clear 、百分比 、加 、 减 、乘 、除 、取负数 、小数 完整代码 思考总结 ...
JavaScript实现简易计算器 HTML CSS
Jereet的博客
06-08 354
使用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-
使用html+css+js完成简单的计算器
fish_skyyyy的博客
10-19 1987
使用html+css+js完成简单的计算器 刚刚接触了js，就寻思做个计算器好了，简易计算器就这么诞生了，新手小白有很多地方不是特别会，去网上查查改改，总算是做出来了，话不多说，直接上代码： 首先是html： <div class="big"> <div class="computer"> <input type="text" class="show" value="0" disabled="false"/> <ul> <li>&lt
html css制作计算器,使用html+css+js实现简易计算器
weixin_34708196的博客
06-09 1136
使用html+css+js实现简易计算器，效果图如下：html代码如下：1 2 3 4 5 6 7 calculator8 9 10 document11 12 13 14 15 16 17 18 19 20 21 ...
html+css+js制作简易计算器
Zsl1183323的博客
04-04 273
html+css+js制作简易计算器
HTML+CSS+JS制作一个简单的计算器
09-19
在本项目中，我们将探讨如何使用HTML、CSS和JavaScript（简称JS）这三种核心技术来创建一个功能简单的计算器。HTML负责构建网页的结构，CSS用于美化界面，而JavaScript则赋予计算器计算的功能。 首先，HTML...
简单App计算器实现（js+html+css-hbuilder）
11-04
在本项目中，我们将探讨如何使用JavaScript、HTML和CSS通过HBuilder来实现一个简单的App计算器。这个计算器将具有基本的算术运算功能，包括加、减、乘、除，为初学者提供了一个良好的实践平台，了解Web应用开发的...
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
使用HTML，CSS和JavaScript创建计算器
04-07
在本项目中，我们将探讨如何使用HTML，CSS和JavaScript创建一个功能齐全的计算器。这个计算器不仅可以执行基本的数学运算，还能通过美观的界面提供良好的用户体验。以下是对每个技术的详细说明： **HTML（HyperText...
html+css+js实现简易计算器
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
用HTML、CSS、JavaScript 实现一个简单的计算器
热门推荐
zilaiye1314的博客
09-15 2万+
用HTML CSS HTML实现的计算器WEB界面
HTML、CSS实现树状图
p_s_p的博客
09-09 523
【代码】HTML、CSS实现树状图。
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1207
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML/CSS/JS学习笔记 Day3（HTML--C3 表格）
给bug两拳的博客
09-10 1559
C3 表格：3.1 表格标签（语法 / 相关属性 / 表格结构）、3.2 列表标签（无序列表⭐ / 有序列表 / 自定义列表⭐）、3.3 表单标签（表单域 / 表单元素：输入内容&下拉菜单&文本域）
【油猴脚本】00003案例 Tampermonkey油猴脚本引入css 库，油猴脚本css库的使用
宝码香车的博客
09-13 910
附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
CSS 图片廊：打造精美视觉体验
wjs2024的博客
09-13 365
使用CSS创建图片廊是一个简单而有效的方法，可以提升网页的视觉效果和用户体验。通过本文的介绍，相信你已经掌握了如何使用CSS来打造一个精美的图片廊。在实际开发中，你可以根据自己的需求进行调整和优化，以创建出更加出色的图片廊效果。
CSS框架 Tailwind CSS
专研技术的大学生
09-11 716
在项目中如何集成Tailwind Css框架
HTML+CSS+JS制作一个能实现百分率的简单计算器源码
07-14
下面是一个简单的百分比计算器的HTML、CSS和JavaScript源代码示例： HTML部分： ```html <!DOCTYPE html> <html> 百分比计算器 <link rel="stylesheet" type="text/css" href="style.css"> ('7')">7 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值