网页计算器

最新推荐文章于 2024-09-12 16:43:23 发布
最新推荐文章于 2024-09-12 16:43:23 发布
阅读量99 收藏
点赞数
文章标签： HTML CSS JavaScript 计算器 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56503483/article/details/121599927
版权

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

    <style>

         html,body {

            margin: 0px;

            padding: 0px;

            background-color: rgb(156, 212, 238);

        }

        p{

            font-size: 30px ;

            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

            text-align: center;

            padding-right: 100px;

            margin-top: 28px;

            font-weight:bold;

        }

        .container {

            width: 435px;

            height: 480px;

            margin-left: 500px;

            margin-top: 30px;

            background-color: #f8a1a9;

            border: 1px solid black;

        }

        table {

            width: 390px;

            height: 380px;

            margin-left: 22px;

            border: 1px solid rgb(116, 43, 212);

            background-color: #e2ebb4;

        }

       

        input {

            margin-top: 20px;

            margin-left: 24px;

            width: 378px;

            height: 38px;

            opacity: 0.6;

            font-size: 20px;

            color: black;

            border-radius: 5px;

            margin-right: 5px;

            background-color: whitesmoke;

        }

        button{

            width: 60px;

            height: 50px;

            margin-top: 15px;

            text-align: center;

            margin-left: 25px;

            border-radius: 10px;

            font:16px black bold;

            border: 1px solid black;

            background-color: rgb(211, 207, 207);

            box-shadow: 2px 2px  rgb(0, 0, 0);

            cursor: pointer;

        }

        button:hover{

            background-color: rgb(31, 28, 28);

            color: whitesmoke;

        }

    </style>

</head>

<body>

    <hr>

    <p>计&nbsp;算&nbsp;器</p>

   

    <div class="container">

       

        <table>

            <input type="text" name="look" id="look"><br><br>

            <tr>

                <td><button value="CE" οnclick="cle()">CE</button></td>

                <td><button value="+" οnclick="compute(this)">+</button></td>

                <td><button value="-" οnclick="compute(this)">-</button></td>

                <td><button value="DEL" οnclick="del()">DEL</button></td>

            </tr>

            <tr>

                <td><button value="7" οnclick="compute(this)">7</button></td>

                <td><button value="8" οnclick="compute(this)">8</button></td>

                <td><button value="9" οnclick="compute(this)">9</button></td>

                <td><button value="*" οnclick="compute(this)">*</button></td>

            </tr>

            <tr>

                <td><button value="4" οnclick="compute(this)">4</button></td>

                <td><button value="5" οnclick="compute(this)">5</button></td>

                <td><button value="6" οnclick="compute(this)">6</button></td>

                <td><button value="/" οnclick="compute(this)">/</button></td>

            </tr>

            <tr>

                <td><button value="1" οnclick="compute(this)">1</button></td>

                <td><button value="2" οnclick="compute(this)">2</button></td>

                <td><button value="3" οnclick="compute(this)">3</button></td>

                <td><button value="." οnclick="compute(this)">.</button></td>

            </tr>

            <tr>

                <td><button value="(" οnclick="compute(this)">(</button></td>

                <td><button value="0" οnclick="compute(this)">0</button></td>

                <td><button value=")" οnclick="compute(this)">)</button></td>

                <td><button value="=" οnclick="result()">=</button></td>

            </tr>

        </table>

    </div>

    <script>

        function compute(show){

            document.getElementById("look").value+=show.value;

        }

        function cle(){

            document.getElementById("look").value=null;

        }

        function del(){

            var num = document.getElementById("look");

            num.value = num.value.substring(0,num.value.length-1);

        }

        function result(){

            str = document.getElementById("look");

            numresult = eval(str.value);

            str.value = numresult

                 

        }

    </script>

</body>

</html>

效果图：

 

番茄酱-
关注
网页制作计算器（源码）
qq_43228899的博客
04-08 6121
计算器实现功能： 1.可进行普通的四则运算（+、-、*、/）； 2.清除屏幕数字，清除单个数字（末尾）； 3.可在屏幕进行添加数字操作（不可回车得结果，需点击=）。 计算器界面展示： 计算器实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
网页版计算器
weixin_43693233的博客
11-23 3479
` 计算器 ZY的计算器 ...
计算器排html页面,简易计算器html页面代码
weixin_39676021的博客
06-03 707
简易计算器content=no-cache>content=zh-cn>//document.onkeyup=function Fun(){alert(event.keyCode);}function computetoedit(obj){return eval_r(obj.expr.value)}function compute(obj){obj.expr.value =eval_r...
HTML网页之计算器代码
weixin_33973600的博客
03-06 881
计算器网页效果显示：点击这里！ <script> function show(){ var date = new Date(); //日期对象 var now = ""; now = date.getFullYear()+"年"; //读英文就行了 now = now + (date.getMonth()+1)+"月"; //...
eval解析JSON中的注意点
Carter的菜园子
07-07 893
在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式：1.一种为使用eval()函数。2. 使用Function对象来进行返回解析。使用eval函数来解析，并且使用jquery的each方法来遍历用jquery解析JSON数据的方法,作为jquery异步请求的传输对象
TypeScript实例之网页计算器
02-05
使用ts开发网页计算器，实现自动计算，及界面的自动绘制，依赖库如下： 1. browserify 为网页浏览器提供模块加载环境。 2. lite-server 提供简易的web服务，自动将项目中的内容发布到web服务器中，启动时自动打开...
JS实现基本的网页计算器功能示例
10-15
本示例讲解了如何使用JavaScript实现一个基本的网页计算器。这个计算器主要依赖于JavaScript的事件响应和数值运算功能，让网页中的按钮能够响应用户的点击并执行相应的计算操作。 首先，HTML部分创建了一个简单的...
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
制作网页版简易计算器（Calculator）
吟游诗人——吟唱生命的不朽
08-12 1万+
网页版计算器的制作比想象中要来的容易，界面上只需固定计算器面板的宽高和按钮的宽高即可。先放张图： 代码下载与演示：https://codepen.io/yinyoupoet/pen/oeewWw讲一下设计思路： 首先，将按键分成四种类型——数字与符号、等于、AC、CE。 Ans是保存上一次结果的，在这里点了没用。 如果点了数字，就显示在上面的input text框（以下称输出框）内，并追加
简单计算器
MeiLi_chenai的博客
12-17 438
var numresult; var str; //用于输入的方法 function shuru(nums){ str = document.getElementById("disPlay"); str.value = str.value + nums; } //清空界面 function qingKong(){ do
HTML网页计算器
huzijia888的博客
12-04 6101
#first{/*第一个数字输入框*/ width:210px; border:0px; } #second{/*运算符号输入框*/ width:210px; border:0px; } #three{/*第二个数字输入框*/ width:70px; border:0px; } #four{/*结果输入框，设置文字方向为右*/ width:140px; border:0
Web网页实现计算器功能
L的博客
08-20 2万+
计算器说明：主要是对样式和一些简单的文本操作进行，计算用到的是js内置的eval()函数，只需要将文本框的字符串作为参数传入即可得到结果，能够进行简单的运算，非常强大！<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/
网页版计算器的实现(js实现计算功能)
热门推荐
小金子的专栏
01-26 4万+
今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下:
简单网页计算器代码
qq_33721778的博客
11-13 1万+
注：本人为初学者，欢迎各位大神指教 简单计算器实现效果： HTML代码counter.html 计算器
Web网页版简易计算器
360°顺滑
07-18 2万+
Web网页版简易计算器 说明： 1、这个计算器的功能比较简单，包括加减乘除，小数点，退格，清除以及等于。 2、首先先写出html，即界面主要框架；再写出css，即属性，使框架看起来美观一些；最后就是javascript，就是功能的实现，主要有计算（调用js内置强大的eval() 函数）、退格、清除、等于四个功能。 3、html和css两部分不难，javascript会麻烦一点。 推荐一篇不错的...
Vue使用query传参Boolean类型，刷新之后转换为String问题
最新发布
q879936814的博客
09-12 376
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 430
【代码】easyexcel模板导出并且公式自动计算的方法。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1351
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值