Javascript 实现简单计算器实例代码

最新推荐文章于 2020-12-05 09:18:52 发布
最新推荐文章于 2020-12-05 09:18:52 发布
阅读量172 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/snowlove/p/6067522.html
版权

这篇文章主要介绍了Javascript 实现简单计算器实例代码的相关资料,需要的朋友可以参考下

　　
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>js简单计算器</title>
 
<style type= "text/css" >
*{
margin:0px;
padding:0px;
}
input{
margin-top:2px;
margin-left:2px;
width:230px;
height:30px;
text-align:right;
}
button{
margin-top:2px;
margin-left:2px;
width:50px;
height:50px;
}
#container{
margin-left:1px;
border:1px solid #E4E4E4;
background: #BBBBBB;
width:235px;
height:215px;
}
</style>
 
<script>
 
function onLoad(){
//加载完毕后光标自动对应到输入框
document.getElementById( "input" ).focus();
}
//读取按钮的值，传给输入框
function inputEvent(e){
//把val的值改为每个事件的innerHTML值
var val=e.innerHTML;
//获取input标签
var xsval=document.getElementById( "input" );
//标签里的value连接每个事件的innerHTML值
xsval.value+=val;
}
 
//计算出结果
function inputOper(){
var xsval=document.getElementById( "input" );
xsval.value=eval(document.getElementById( "input" ).value);
}
//清零
function clearNum(){
var xsval=document.getElementById( "input" );
xsval.value= "" ;
document.getElementById( "input" ).focus();
}
//退格
function backNum(){
var arr=document.getElementById( "input" );
arr.value=arr.value.substring(0,arr.value.length-1);
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</script>
</head>
 
<body onload= "onLoad()" >
<input id= "input" type= "text" >
<div id= "container" >
<div>
<button onclick= "inputEvent(this)" >1</button>
<button onclick= "inputEvent(this)" >2</button>
<button onclick= "inputEvent(this)" >3</button>
<button onclick= "inputEvent(this)" >+</button>
 
</div>
 
<div>
<button onclick= "inputEvent(this)" >4</button>
<button onclick= "inputEvent(this)" >5</button>
<button onclick= "inputEvent(this)" >6</button>
<button onclick= "inputEvent(this)" >-</button>
</div>
 
<div>
<button onclick= "inputEvent(this)" >7</button>
<button onclick= "inputEvent(this)" >8</button>
<button onclick= "inputEvent(this)" >9</button>
<button onclick= "inputEvent(this)" >*</button>
</div>
 
<div>
<button onclick= "inputEvent(this)" >0</button>
<button onclick= "inputEvent(this)" >.</button>
<button onclick= "inputOper(this)" >=</button>
<button onclick= "inputEvent(this)" >/</button>
</div>
</div>
<button onclick= "clearNum()" >清零</button>
<button onclick= "backNum()" >退格</button>
</body>
 
</html>

 

(转载) http://www.jb51.net/article/95464.htm

转载于:https://www.cnblogs.com/snowlove/p/6067522.html

weixin_33753003
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现一个简易的计算器实例代码
05-14
JavaScript实现一个简易的计算器实例代码 JavaScript实现一个简易的计算器实例代码
计算器
qq_41907780的博客
04-14 208
用javascript来做一个计算器&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简易计算器&lt;/title&gt;    &lt;script type="text/javascript"&a
JavaScript实现简单的计算器
jordan_wzg的博客
03-25 623
这里写自定义目录标题JavaScript实现简单的计算器成品展示相关代码 JavaScript实现简单的计算器 本篇只是简单的利用javascript语言进行简单的计算器的实现主要实现功能为数字运算的加减乘除运算，其他运算使用math对象中的属性实现，在这里不做赘述，只说明加减乘除，如果有任何问题，欢迎留言。 成品展示 相关代码 简单计算器的实现，使用的是jsp页面作为前台页面，然后在js文件中...
JavaScript实现简单计算器
weixin_30319153的博客
01-31 113
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单计算器</title> </head> <body> <p align="center">简单计算器</p&...
JavaScript 实现简易的计算器
灵神翁的博客
01-11 525
JavaScript 实现简易的计算器 哈罗，我是梦辛工作室的灵，最近没事干的时候写了个简易的计算器，用html 和 js来实现的，分享给大家，总体来说很简单，核心的话就是 界面的实现和计算结果如何实现，先来看下实现就得界面吧 怎么样，界面看上去效果还是不错的吧，界面 我是比着自己手机的界面 写的，先看下界面的代码，我分成了2部分，上面一部分占用高度的20%，用于显示计算公式和计算结果，下面一部...
基于html+css+js实现简易计算器代码实例
10-15
【基于HTML+CSS+JS实现简易计算器代码实例详解】 在Web开发中，创建一个简易计算器是一种常见的实践，有助于初学者理解和掌握HTML、CSS以及JavaScript的基本用法。本篇将详细介绍如何利用这三种技术来实现一个功能...
JavaScript----完成一个简单的计算器功能
PXM706120的博客
10-26 932
一、使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。 二、获取元素的值设置和获取方法为：      例：赋值：document.getElementById(“id”）.value = 1；             取值：var = document.getElementById(“id”）.value； 三、步骤：       第...
用javascript实现的计算器代码
11-15
本资源是一个网页形式的计算器，用javascript实现了+、-、*、/、求倒数、求模、以及求表达式的功能。代码简洁精练。
纯javascript代码实现计算器功能(三种方法)
10-23
纯javascript代码实现计算器功能，接下来，由小编给大家分享一下用纯javascript代码编写的计算器程序，需要的朋友可以参考下
js实现简单计算器
05-23
使用js实现的简单计算器功能呢
JavaScript实现的简单的计算器（web）
04-29
JavaScript实现的简单的计算器，这是参考我同学的代码实现，希望能够帮助到你
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 附加题：在运算式计算中支持括号: ”(“, ”)”.
javascript实现简易计算器
weixin_30745641的博客
03-26 71
　　今天闲来无聊，想写点什么，突然想到用javascript写一个计算器。程序还存在很多的Bug，先在这里记录一下，以后慢慢更正。 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
javascript实现的简单计算器
xiaoshan0711的专栏
02-26 293
javascript实现的简单计算器
javascript实现计算器
Pluto.的博客
12-05 306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .con {
javascript实现-简易计算器
YangJack-前端开发
01-27 918
前言hello，大家好，学习一段时间了，学习了框架和后台的内容，为了防止前端的js和jq的熟练度不够，忘记很多算法和基础用法，会陆陆续续更新一些小的功能效果code，用于记录和积累，不足之处很多，封装性和代码冗余暂且不严格要求，尽力完善，保持更新..
JavaScript实现简易天数计算器实例详解
本文通过天数计算器实例，介绍了 JavaScript 实现简易的天数计算器的相关知识点，包括日期对象、选择器、事件处理、日期计算、DOM 操作、代码组织、代码优化等等，这些知识点可以帮助读者更好地理解和掌握 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值