用HTML，CSS，JS制作一个网页计算器

最新推荐文章于 2023-12-05 18:30:09 发布
最新推荐文章于 2023-12-05 18:30:09 发布
阅读量3.2k 收藏 24
点赞数 5
分类专栏： 学习记录 文章标签： js html javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ilikeu777/article/details/115261910
版权

今天分享一个自己做的网页计算器，我个人感觉，虽然不精简，但是应该涉及到的东西都有了，所以分享出来，那我直接上代码了。

<html>
<head>
    <meta charset="utf-8">
    <title>我的计算器</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        function myck(type) {
   
            var inputNumber1 =jQuery("#number1");
            var inputNumber2 = jQuery("#number2");
            var inputEnd = jQuery("#result");
            if(type==1){
   
                if(inputNumber1.val().trim()==""){
   
                    alert("输入不能为空");
                    return false;
                }
                if(inputNumber2.val().trim()==""){
   
                    alert("输入不能为空");
                    return false;
                }
                var end = parseInt(inputNumber1.val()) + parseInt(inputNumber2.val());
                inputEnd.html("<p style='background-color: aqua'>最终结果：<strong style='color:red'>"+end+"</strong></p>");
            }
            if(type==2){
   
                if(inputNumber1.val().trim()==""){
   
                    alert("输入不能为空");
                    return false;
                }
                if(inputNumber2.val().trim()==""){
   
                    alert("输入不能为空");
                    return false;
                }
                var end = parseInt(inputNumber1.val()) - parseInt(inputNumber2.val());
                inputEnd.html("<p style='
最低0.47元/天 解锁文章
宋丹尼尔
关注
  • 5
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
<Java Web学习初级阶段>JavaScript实现简单网页计算器
拂晓弄尘影的博客
09-12 827
功能实现： 能够实现简单的加、减、乘、除、求余计算，可以进行带小数点和正负数的计算，C为清零按钮，CE为退格按钮。 界面截图： 页面布局代码： 计算器 table tr td{width:100px; height:60px; text-align:center;} #display{width:306px; height:60px; font-size
HTML+CSS+JS制作一个简单的计算器
09-19
HTML+CSS+JS制作一个简单的计算器。该计算器的计算规则类似于我们生活中用的大计算器，暂时未发现有计算错误的问题，有问题请联系我，谢谢。
html实现计算器
zmk0820的博客
03-24 4527
html实现计算器
WEB网页版计算器（HTML、CSS、JavaScript实现）
热门推荐
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
用HTML,CSS,JS实现简单的计算器网页
qq_52025208的博客
03-29 1246
一、HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据 表，或在页面中嵌入图片和视频。 二、CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中 布局内容。（美化） 三、JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很 多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。） 四、 用jQuery实现计算器页面 <html> <head>
HTML+CSS+JavaScript写计算器
JIAY_WX的博客
07-21 1182
计算器
使用HTML，CSS和JavaScript创建计算器
04-07
使用HTML，CSS和JavaScript创建一个简单，时尚的计算器
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
calculator:用 htmlcssjs 制作的计算器
08-04
计算器用 html/css/js 设计的计算器
Calculator:使用 html , CSS , JavaScript 制作的实时计算器
08-04
计算器使用 html 、 CSS 、 JavaScript 制作的实时计算器。
使用js,css,html实现的网页计算器
07-01
使用javascript,css，html实现的网页计算器，入门级别的代码，适合初学者学习与巩固，代码注释非常详细，还有说明文档。
JavaScript，HTML制作简易图形化界面计算器
06-23
利用HTML，JavaScript，CSS技术制作一个图形化界面的计算器，实现简单的加减乘除四则运算，以及正负数的运算
利用HTML、CSS、JavaScript做一个计算器
qq_45841205的博客
03-25 900
利用HTML、CSS、JavaScript做一个计算器 整体步骤： 利用input标签设置两个数字读入行，再利用input设置四个按钮，利用onclick属性导入点击按钮时的事件。 二话不说，放代码！！！！！！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="jq
HTML制作计算器（二）
baidu_27670713的博客
08-04 2642
前面已经把计算器的元素用HTML给罗列出来了，把文件用浏览器打开，由于没有加入CSS代码，会发现非常的丑，现在我们就计算器各按钮的布局、样式进行调整，使之整齐简洁。 下面是代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/css"> #outBor
1.5 用JS实现简易计算器的加减乘除功能
小脆筒style的博客
04-12 2939
JS实现简易计算器 背景 设计一个简易计算器，具有能对两个操作数进行加、减、乘、除运算的简易计算器。需要正确的设计Web前端页面，能正确进行数据类型的转换，能正确使用选择结构，在JavaScript中定义函数，通过按钮事件调用定义好的JavaScript函数。 设计页面 使用合适的开发工具，设计计算器的页面 先把 01.jpg 和 02.jpg 图片下载下来放在同一层目录下 01.jpg 02.jpg 代码实现 1. index.html页面 <!DOCTYPE html> <ht
html实现计算器源码
xcLeigh
11-21 1773
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML程序大全(1)：简易计算器
最新发布
joe_g12345的博客
12-05 2627
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
html网页加减乘除代码,html+js实现简单的计算器代码(加减乘除)
weixin_42098830的博客
06-23 3825
html+js实现简单的计算器代码(加减乘除) function setOp(op, opTips){var tb=document.getElementById("tb_calc");tb.style.display = "none";document.getElementById("x").value = "";document.getElementById("y").valu...
HTML+CSS+JS制作一个科学计算器
07-14
当然可以！以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript制作一个科学计算器： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>科学计算器</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="calculator"> <input type="text" id="result" readonly> <div class="buttons"> <button onclick="clearInput()">C</button> <button onclick="appendInput('(')">(</button> <button onclick="appendInput(')')">)</button> <button onclick="appendInput('/')">/</button> <button onclick="appendInput('7')">7</button> <button onclick="appendInput('8')">8</button> <button onclick="appendInput('9')">9</button> <button onclick="appendInput('*')">*</button> <button onclick="appendInput('4')">4</button> <button onclick="appendInput('5')">5</button> <button onclick="appendInput('6')">6</button> <button onclick="appendInput('-')">-</button> <button onclick="appendInput('1')">1</button> <button onclick="appendInput('2')">2</button> <button onclick="appendInput('3')">3</button> <button onclick="appendInput('+')">+</button> <button onclick="appendInput('0')">0</button> <button onclick="appendInput('.')">.</button> <button onclick="calculate()">=</button> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS部分（style.css）： ```css .calculator { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; text-align: center; } input[type="text"] { width: 100%; margin-bottom: 10px; padding: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; } button { padding: 10px; } ``` JavaScript部分（script.js）： ```javascript function appendInput(value) { document.getElementById("result").value += value; } function clearInput() { document.getElementById("result").value = ""; } function calculate() { try { const result = eval(document.getElementById("result").value); document.getElementById("result").value = result; } catch (error) { document.getElementById("result").value = "Error"; } } ``` 这只是一个简单的示例，可能还有一些功能需要完善，但它可以帮助您开始制作一个基本的科学计算器。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋丹尼尔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值