[实战]网页版计算器的编写

最新推荐文章于 2024-07-02 17:35:34 发布
最新推荐文章于 2024-07-02 17:35:34 发布
阅读量1.6k 收藏 3
点赞数 5
文章标签： javascript 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuduanyang/article/details/52787376
版权

实现效果如图显示



————————————————————————————————————————————————————————

<声明 文件夹 先建一个名为 网页计算器 的文件夹 在里面分别加html css js 三个文件夹 代码文件分别保存在相应的文件夹>

1.html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页计算器</title>
<link rel="stylesheet" type="text/css" href="../css/jisuanqi.css">
<script type="text/javascript" src="../js/jisuanqi.js"></script>
</head>
<body>
<table cellpadding="10px">
<tr>
<td colspan="3" id="result">开始计算吧！</td>
<td><input class="anniu" type="button" name="" value="C" οnclick="clearData()"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="1" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="2" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="3" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="+" οnclick="showData(this.value)"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="4" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="5" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="6" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="-" οnclick="showData(this.value)"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="7" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="8" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="9" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="*" οnclick="showData(this.value)"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="0" οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="." οnclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="=" οnclick="calculate()"></td>
<td><input class="anniu" type="button" name="" value="/" οnclick="showData(this.value)"></td>
</tr>
</table>
</body>
</html>


2.css部分

table{
border:1px solid #ccc;
}
.anniu{
width:50px;
height:50px;
}
td{
border:1px solid #ccc;
}
#result{
text-align: right;
font-size: 26px;
font-weight: bold;
font-family: '黑体';
}


3.js文件

var str="";

function showData(val){
str=str+val;
document.getElementById("result").innerHTML = str;
}


function calculate(){
document.getElementById("result").innerHTML = "";
var resultNum=eval(str);
document.getElementById("result").innerHTML = resultNum;
str=resultNum;
}


function clearData(){
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML = 0;
str="";
}


—————————————————————————————————————————————————————————

勤劳的人总是更努力，当完成项目的喜悦是别人所不能理解的。


重度精分患者
关注
web编写的计算器
06-07
用html语言编写的简单计算器，非常的好用，希望对你们有帮助
js编写的一个网页版的计算器
05-16
这是一个用javascript编写的计算器，界面是网页版。而且采用的是css布局，而不是用表格，模仿的是windows8.1自带的计算器。
写一个网页计算器
Snakehj的博客
06-07 400
写一个网页计算器 它可以进行长算式计算，不能进行混合运算。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <style> table{ height: 350px; width: 500px; ma
网页计算器的实现
最新发布
zeyeqianli的博客
07-02 582
该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript ，用于检验web前端基础水平。开发环境：Visual Studio Code开发工具：HTML5、CSS3、JavaScript实现效果。
网页版计算器.html
10-13
用html写的网页版计算器，自己做的作业，可供初学者参考
使用编程语言做的网页计算器
03-05
利用HTML做的一个网页计算器，能够实现加减乘除算法，适合入门者学习
前端基础实战：简易网页计算器_书籍_
09-30
本项目——“前端基础实战：简易网页计算器”就是这样一个实战教程，旨在帮助初学者通过实际操作来掌握前端开发的基本概念和技术。在这个项目中，我们将利用HTML、CSS和JavaScript这三大核心技术来构建一个功能完备...
Java实战项目:计算器应用程序 - 实现基本的数学运算功能
10-03
在这个Java实战项目中，我们将构建一个简单的计算器应用程序，利用Java Swing库来创建用户界面，并实现基本的数学运算功能。以下是一些关键知识点： 1. **Java Swing库**：Java Swing是Java Foundation Classes ...
js网页版手机计算器.zip
09-27
【标题】"js网页版手机计算器.zip"是一个包含JavaScript实现的网页版手机计算器的压缩包。这个项目旨在提供一个在网页上使用的轻量级...无论是自学、教学还是实战应用，"js网页版手机计算器.zip"都是一份有价值的资源。
微信小程序学习记录（一）小实战——加法计算器
01-03
小实战——加法计算器 在【app.json】文件下添加计算器页面： pages: [ pages/calc/calc,//新建计算器页面 pages/index/index, pages/logs/logs ] 注意：页面默认显示pages[0]，现在即新增的计算器页面。 若...
安卓实战-计算器项目.rar
07-30
这涉及到XML布局文件的编写，例如`activity_main.xml`。我们会用到LinearLayout、RelativeLayout或ConstraintLayout等布局管理器来排列按钮，每个按钮通常会定义一个Button组件，通过设置`android:text`属性显示按钮...
这是笔记本电脑上的计算器做成网页上的计算器，长的一模一样，很好玩的html网页，可以考虑当成作品
09-15
这个网页我直接用内嵌的如果内嵌就没有图标啦，不过不内嵌的就有啦，可以看下里面的一些功能只能做普通的加减乘除，连加减乘除是可以的，功能还不错，挺好玩的这个网页作业
网页版计算器小程序（html+css+javascrip）
12-01
用html+css+javascrip做的网页版计算器小程序，课堂作业，拿来分享一下！
网页可编程计算器
04-20
实现了网页可编程计算器，包括普通的数值计算、函数定义等功能 前端由python flask实习 后端由flex、bison实现词法、语法分析 需要安装flex、bison、python的flask包以及vs（需要用到vs的cl）
非常实用的简易网页计算器
06-23
简易网页计算器，说简易其实非常实用，外观也可以！特此分享给大家！！
计算器（网页版）
12-16
网页版的计算器开发，比较适合初学者，代码比较规范，虽然还有一些缺点，但是给初学者看，是比较好的一个学习过程！
HTML计算器
牛奶爱上咖啡的博客
10-24 1082
计算器         *{ font-size:18px;}     #t{ width:210px; height:40px;} .shaw{ width:70px; height:40px;} .equal{ width:70px; height:80px;}     var flag=true; //设置标志，用于没有输入时显示0，以及有显示时清空      
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值