简易在线计算器 | JavaScript

最新推荐文章于 2024-08-17 12:54:01 发布
最新推荐文章于 2024-08-17 12:54:01 发布
阅读量192 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3995971/blog/2245864
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易在线计算器</title>
</head>
<body>
<script type="text/javascript">
  var numresult;
  var str;
  //让nummessage接收所有数据
  function onclicknum(nums){
    str = document.getElementById("nummessage");
    str.value=str.value + nums;
  }
  //清空显示栏的信息
  function onclickclear(){
  str = document.getElementById("nummessage");
  str.value = "";
  }
  //显示储存的结果；
  function onclickresult(){
  str=document.getElementById("nummessage");
  numresult = eval(str.value);
  str.value=numresult;
  }
</script>
    <div style="font-size:23px; font-size:25px; border:0px;top:0; left:0;bottom:0;right:0;margin:auto  auto">网页版简单计算器</div>
    <table border="2" align="center" bgColor="pink"
            style="height: 350px; width: 270px ;border-collapse:collapse;">
        <tr>
            <td colspan="4" align="center"><input type="text" id="nummessage" style="height: 90px; width: 99.5%; font-size: 50px;border:0px;text-align:right">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" id="Del"value="clear" οnclick="onclickclear()" style="height: 70px; width:100%; font-size: 35px">
            </td>
            <td colspan="2"><input  type="button" id="result" value="=" οnclick="onclickresult()" style="height: 70px; width: 100%; font-size: 35px">
            </td>
        </tr>
        <tr>
            <td><input type="button" id="7" value="7" οnclick="onclicknum(7)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input type="button" id="8" value="8" οnclick="onclicknum(8)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input type="button" id="9" value="9" οnclick="onclicknum(9)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input type="button" id="mul" value="*" οnclick="onclicknum('*')" style="height: 70px; width: 90px; font-size: 35px">
            </td>
        </tr>
        <tr>
            <td><input  type="button" id="4" value="4" οnclick="onclicknum(4)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="5" value="5" οnclick="onclicknum(5)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="6" value="6" οnclick="onclicknum(6)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="division" value="/" οnclick="onclicknum('/')" style="height: 70px; width: 90px; font-size: 35px">
            </td>
        </tr>
        <tr>
            <td><input  type="button" id="1" value="1" οnclick="onclicknum(1)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="2" value="2" οnclick="onclicknum(2)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="3" value="3" οnclick="onclicknum(3)" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="sub" value="-" οnclick="onclicknum('-')" style="height: 70px; width: 90px; font-size: 35px">
            </td>
        </tr>
        <tr>
            <td colspan="2"><input  type="button" id="0" value="0" οnclick="onclicknum(0)" style="height: 70px; width: 100%; font-size: 35px">
            </td>
            <td><input  type="button" id="."  value="." οnclick="onclicknum('.')" style="height: 70px; width: 90px; font-size: 35px">
            </td>
            <td><input  type="button" id="add" value="+" οnclick="onclicknum('+')" style="height: 70px; width: 90px; font-size: 35px">
            </td>
        </tr>
    </table>
</body>
</html>

展示的效果：

cd6864f43ca74b63305ef0406fafabfe252.jpg

我们来计算下：（6+2）*3/6;

b439113e6ded8788f048e3ec30a8c705c48.jpg

验证一下结果：

f1e0e0d0463175d63aca6cbb4a2f773c78b.jpg

是不是挺好用的呢，一起来做一个吧；

 

 

 

转载于:https://my.oschina.net/u/3995971/blog/2245864

chepao3863
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现简易计算器
呜呜呜，好难好难
03-13 4775
简易计算器 利用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-w
JavaScript——简易计算器实现及代码
weixin_52714017的博客
07-26 1235
h1 onclick="changetext(this)">点击文本!获取输入框的值 定义var num=document.getElementById('num') 然后 num.value。输入框的值=输入框的值+获取输入的值 （+作为字符串拼接）replace（替换前的值，替换后的值）
在线版简易计算器
Beworth1207的博客
09-05 252
package per.mjn._08_cal; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet...
简易在线JavaScript计算器
不吃鱼的猫的博客
07-12 434
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript 在线计算器</title> </head> <body> <center> <header> <nav>JavaScript-在线计算器(C...
JS_简易计算器
weixin_44754656的博客
04-22 301
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>http://www.gxaedu.com</title> </head> <body> <input type="number" id...
通过js实现在线计算器
weixin_43913121的博客
11-26 993
效果图： Html文件： Css文件： Js文件：
javascript简易计算器
a17783481239的博客
09-18 2597
查看历史记录
利用JavaScript实现简易计算器
weixin_58404127的博客
11-13 1477
【代码】利用js实现简易计算器。输入相应的数字实现相应的计算，例如：输入1，会提示用户输入第一个数，第二个数，最后弹出两个数的和。
JavaScript制作简易计算器知识点剖析
weixin_55355282的博客
07-12 891
前言：使用JavaScript制作一个计算器，使用到的知识点是 F5运行如图所示 页面中计算结果是字符串的拼接。不是想要的结果需要运用数据类型的转换。对象转换成这三种数据是没有意义的，因为对象里面可以放任意一种数据类型任意类型转数字（忽略代码不够优雅） 总结：Number(要转换的值） 把任意类型都转为数字parseInt() 把字符串转成整数型数字parseFloat() 把字符串转成浮点型（小数）数字 传进来的字符串必须是空格加数字开头或者数字开头，从数字开
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
JavaScript简易计算器制作
10-15
JavaScript简易计算器制作是一个基础的前端开发实践项目，它涉及到HTML、CSS和JavaScript的结合使用，以实现简单的数学运算。在这个项目中，我们将学习如何利用JavaScript处理用户交互，并进行基本的算术运算。 ...
javascript编写简易计算器
10-19
总的来说，创建这个JavaScript简易计算器涉及HTML布局、CSS美化以及JavaScript逻辑实现。通过这个项目，我们可以学习到网页交互的基本原理，以及如何使用JavaScript处理用户输入并执行计算。这是一个很好的实践项目...
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 289
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1121
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
最新发布
2401_85743969的博客
08-17 461
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 173
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 967
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
简易计算器javascripthtml
08-23
所以我无法为您提供完整的简易计算器的JavaScript和HTML代码。如果您需要这个计算器的代码，我建议您在互联网上搜索相关资源，或者参考一些编程教程和示例来实现一个简易计算器。<span class="em">1 #### 引用[....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值