大二初次使用HTML+JS+CSS做一个计算器

最新推荐文章于 2023-04-04 19:02:37 发布
最新推荐文章于 2023-04-04 19:02:37 发布
阅读量131 收藏
点赞数
文章标签： css javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fishermen_sail/article/details/117845326
版权

直接贴代码，第一次写可以参考参考。
在这里插入图片描述

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>四则运算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f7f1e3;
        }

        .main {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: #ced6e0;
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.3);
            border-radius: 11px;
        }

        .top {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 380px;
            height: 300px;
            background-color: #dfe4ea;
            border-radius: 4px;
        }

        .bottom {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 380px;
            height: 70px;
            background-color: darkgrey;
        }

        .input1 {
            float: left;
            height: 140px;
            width: 140px;
            margin-top: 70px;
            margin-bottom: 50px;
            font-size: 3em;
            background-color: #ffffff;
            border: 0;
            margin-bottom: 0;
        }

        .input2 {
            float: right;
            height: 140px;
            width: 140px;
            margin-top: 70px;
            margin-bottom: 50px;
            font-size: 3em;
            background-color: #ffffff;
            border-style: none;
            margin-bottom: 0;
        }

        table {
            float: left;
            width: 100px;
            height: 140px;
            margin-top: 70px;
            background-color: #999;
            border-collapse: collapse;
            border: 0;
            padding: 0;
        }

        table tr td .button{
            border-width: 0;
            font-size: 50px;
        }

        .submit {
            width: 60px;
            height: 30px;
            margin-top: 33px; 
            margin-left:102px;
            float: left;
            border-radius: 5px;
            border-width: 0;
        }

        .submit:hover {
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.1);
            background-color: #a4b0be;
        }

        .reset {
            width: 60px;
            height: 30px;
            margin-top: 33px; 
            margin-right:102px;
            float:right;
            border-radius: 5px;
            border-width: 0;
        }

        .reset:hover {
            box-shadow: 0px 0px 10px 5px rgb(0,0,0,.1);
            background-color: #a4b0be;
        }

        .bottom {
            width: 379px;
            height: 68px;
            border-radius: 4px;
            background-color: #dfe4ea;
        }

        .answer {
            float: left;
            height: 32px;
            width: 183px;
            margin-left: 100px;
            margin-top: 20px;
            background-color: #f1f2f6;
            text-align: center;
            font-size: 24px;
        }

        .button {
            width: 100%;
            height: 100%;
        }

        .button:hover {
            background-color: #f6e58d;
        }

        footer {
            position: absolute;
            height: 60px;
            width: 1280px;
            background-color: gray;
            bottom: 0px;
        }

        footer p {
            color: #888;
            line-height: 60px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">
            <form target="iframe" onsubmit="return formSubmit(this)">
                <input type="number" class="input1" required min="-100" max="100">
            <table>
                <tr>
                    <td>
                        <!-- <button class="button">+</button> -->
                        <input type="button" value="+" class="button">
                    </td>
                    <td>
                        <!-- <button class="button">-</button> -->
                        <input type="button" value="-" class="button">
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- <button class="button">×</button> -->
                        <input type="button" value="×" class="button">
                    </td>
                    <td>
                        <!-- <button class="button">÷</button> -->
                        <input type="button" value="÷" class="button">
                    </td>
                </tr>
            </table>
            <input type="number" class="input2" min="-100" max="100" required>
            <div>
                <!-- <button value="submit" class="submit">提交</button> -->
                <input type="submit" value="提交" class="submit">
            </div>
            <div>
                <!-- <button value="reset" class="reset">重置</button> -->
                <input type="reset" value="重置" class="reset" >
            </div>
            </form>
            <iframe name="iframe" src="about:blank" style="display:none;"></iframe>
        </div>
        <div class="bottom">
            <div class="answer">
                
            </div>
        </div>
    </div>
    <footer>
        <p align="center">
            Copyright &copy; 2020 MADE IN CHINA
        </p>
    </footer>
    <script>
        var j;
        var k;
        var number3;
       
        var btns = document.getElementsByClassName('button');
        for (i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                var character = this.value;
                if (character === '+') {
                    k = 1;
                } else if (character === '-') {
                    k = 2;
                } else if (character === '×') {
                    k = 3
                } else if (character === '÷') {
                    k = 4;
                }
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#ffbe76';
            }
        }



        function formSubmit (even) {
            var number1 = Number(even.querySelector('.input1').value);
            var number2 = Number(even.querySelector('.input2').value);
            var answer = document.querySelector('.answer');
            switch (k) 
            {
                case 1:
                    number3 = number1 + number2;
                    break;
                case 2:
                    number3 = number1 - number2;
                    break;
                case 3:
                    number3 = number1 * number2;
                    break;
                case 4:
                    number3 = number1 / number2;
                    number3 = number3.toFixed(3);
                    break;
                default:
                    answer.innerHTML = '请选择符号';
                    return false;
            }
            if ((typeof(number3) == undefined || isNaN(number3) || !isFinite(number3)) && k != 5) {
                answer.innerHTML = '请输入有效值';
            } else if (k != 5) {
                answer.innerHTML = number3;
            }
            return true
        }



        var btn_reset = document.querySelector('.reset');
        btn_reset.onclick = function() {
            // 我觉得这是给了content2值，改变不了原来的东西；div呢种有专门的函数就可以
            // var content2 = document.querySelector('.input2').value;
            // content2.innerHTML = '';\
            document.querySelector('.input2').value = '';
            document.querySelector('.input1').value = '';
            var answer = document.querySelector('.answer');
            k = 5;
            console.log(k);
            answer.innerHTML = '';
            for (i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
        }

    </script>
</body>
</html>
Fishermen_sail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用HTML、CSS、JavaScript做一个计算器
qq_45841205的博客
03-25 933
利用HTML、CSS、JavaScript做一个计算器 整体步骤： 利用input标签设置两个数字读入行，再利用input设置四个按钮，利用onclick属性导入点击按钮时的事件。 二话不说，放代码！！！！！！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="jq
在html文件中使用JavaScript实现运算器（计算器）功能——平方、二进制、十六进制
sk_girl的博客
11-01 550
【代码】在html文件中使用JavaScript实现运算器（计算器）功能——平方、二进制、十六进制。
HTML+js实现简单计算器
Sumer的博客
11-17 899
实现计算器几个简单的小功能 续上篇 禁止运算符连续输入 小数点不能连续输入，一个数据只能输入一次小数点 function clickSymbol(symbol) { if (symbol != "退格") { var text = document.getElementById("result").value; ...
html+CSS+JS实现简单计算器
kite博客
04-04 145
【代码】html+CSS+JS实现简单计算器。
结合 HTML、CSS、基于原生 JavaScript 实现计算器
weixin_54036501的博客
01-06 348
结合 HTML、CSS，网页界面设计美观基于原生 JavaScript 实现 计算器
html中写一个计算器,用js+html写的一个简单计算器
weixin_30783947的博客
05-31 204
用js+html刚写的一个计算器，发现在不同浏览器上显示差的好远啊……纠结……然后发现N多不完善的地方，╮(╯▽╰)╭，懒得改了，累死了，做作业去……Untitledinput[type=button]{width:25px;height:25px;}type="text/javascript">var result=0;var point=false;//判断是小数点前还是后var multip...
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
网页制作基础大二dw作业HTML+CSS+JavaScript云南我的家乡旅游景点
08-10
- 这是一份大二学生的网页制作作业，旨在通过综合运用HTML、CSS以及简单的JavaScript知识，制作一个展示云南家乡旅游景点的网页。 - 该网页设计适用于各种HTML编辑器，例如Dreamweaver、HBuilder、Vscode等。 - ...
一个名叫星星书籍的网站，使用HTML+HTML5+CSS+CSS3+JavaScript编写，含有登录、注册和首页页面.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
基于html+css+js实现简易计算器代码实例
10-15
在Web开发中，创建一个简易计算器是一种常见的实践，有助于初学者理解和掌握HTML、CSS以及JavaScript的基本用法。本篇将详细介绍如何利用这三种技术来实现一个功能简单的计算器。 首先，HTML（HyperText Markup ...
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
js css html实现计算器
lowser1的博客
12-25 455
首先先架构出html需要使用的按钮与输入框 然后给按钮与输入框添加样式 效果是这样的,可以自己编写想要的效果: 然后我们给每个button添加一个事件 我们要在输入框里获取到数字的值,就要先获取到input输入框 所以我们现在在script里先选择获取到input输入框,这里我给input取了一个class类名加ipt 这样我们就获取到了input输入框,之前我们给每个button添加了取名为add的事件,现在我们给add事件添加一个函数,让数字可以输入到input输入...
HTML+css+js创建简单计算器
qq_53541336的博客
02-24 966
一、先利用HTML创建计算器的整体样式框架，这里面呢应用最多的莫过于表单元素了input、button、label等这些标签。具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/public.css"> <link rel=
html+css+js实现简易计算器
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
简单计算器
lijiaxuan_的博客
01-15 358
<!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>Do
利用JavaScript在html页面做一个计算器
qq_33655643的博客
03-31 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、html组成二、html和css,js基础知识***1.html******2.css****3.javascript*代码一些细节未解决的bug 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、html组成 我们所要做的计算器可由两种方式构成 1.可以用table标签和tr，th，td标签构成，然后用css对他们的属性进行操作得到计算器. 2.可以用div容器实现，.
HTML+CSS+JavaScript写计算器
JIAY_WX的博客
07-21 1238
计算器
HTML JS实现简易计算器
weixin_52661608的博客
07-09 1142
一个简单的计算器
html+js实现的简单计算器(加减乘除)
热门推荐
静湖微风
04-13 6万+
function setOp(op, opTips) { var tb=document.getElementById("tb_calc"); tb.style.display = "none"; document.getElementById("x").value = ""; do
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值