纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算、贷款利率等等。
首先来看一下完成后的效果:
具体代码如下:(关注我的博客,及时获取最新WEB前端开发源代码)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯javascript代码编写计算器程序_赵一鸣(www.zymseo.com)</title>
<style type="text/css">
*{margin:0px;padding:0px}
table{width:300px;margin:100px auto}
td{height:30px;text-align:center;line-height:30px;border:1px solid #ccc;font-size:14px}
input{float:left;margin-left:30px;display:inline}
#jia,#jian,#cheng,#chu{width:30px}
</style>
<script type="text/javascript">
//以下所有的注释通用语所有的加减乘除算法。
//加法运算 function jia(){
//定义变量a,b,c
var x,y,z;
//通过document分别获取x,y的值
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
//修改x,y的字符类型,并且得到z的值
z=parseInt(x)+parseInt(y);
//将z的值赋给id=result
document.getElementById("result").value=z;
};
//减法运算
function jian(){
var x,y,z;
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
z=parseInt(x)-parseInt(y);
document.getElementById("result").value=z;
};
//乘法运算
function cheng(){
var x,y,z;
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
z=parseInt(x)*parseInt(y);
document.getElementById("result").value=z;
};
//除法运算
function chu(){
var x,y,z;
x=document.getElementById("num1").value;
y=document.getElementById("num2").value;
z=parseInt(x)/parseInt(y);
document.getElementById("result").value=z;
};
</script>
</head> <body>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">计算器</td>
</tr>
<tr>
<td>数字一</td>
<td><input type="text" id="num1" name="num1"></td>
</tr>
<tr>
<td>数字二</td>
<td><input type="text" id="num2" name="num2"></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id="result" name="result"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="jia" id="jia" value="+" onclick="jia()">
<input type="button" name="jian" id="jian" value="-" onclick="jian()">
<input type="button" name="cheng" id="cheng" value="×" onclick="cheng()">
<input type="button" name="chu" id="chu" value="/" onclick="chu()">
</td>
</tr>
</table>
</body>
</html>
纯javascript代码编写计算器程序的更多相关文章
- 横纵方向走马灯滚动,纯javascript代码
<body onload="beginmarquee()"> <table width="1024" border="0" ...
- 如何为javascript代码编写注释以支持智能感知
在使用Visual Studio做开发的时候,智能感知是非常方便的.从VS2008开始,提供了对javascript的智能感知支持.例如 上述代码中,我们先用document对象的getElement ...
- 大数据之路week07--day03(Hadoop深入理解,JAVA代码编写WordCount程序,以及扩展升级)
什么是MapReduce 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查并且数出有多少张是黑桃. MapReduce方法则是: 1.给在座的所有玩家中分配这摞牌 2.让每个玩家数自己手中的牌有几 ...
- 利用Python代码编写计算器小程序
import tkinter import tkinter.messagebox import math class JSQ: def __init__(self): #创建主界面 self.root ...
- 编写计算器程序学习JS责任链模式
设计模式中的责任链模式能够很好的处理程序过程的逻辑判断,提高程序可读性. 责任链模式的核心在于责任链上的元素判断能够处理该数据,不能处理的话直接交给它的后继者. 计算器的基本样式: 通过div+css ...
- JavaScript 如何编写计算器
1.JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件
From Here: http://vanilla-js.com/ Vanilla JS is a fast, lightweight, cross-platform frameworkfor bui ...
- 纯javascript代码实现浏览器图片选择预览、旋转、批量上传
工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Servlet处理Cookie
1.CGI:进程,servlet:线程 2.HttpServletResponse下的方法就没有get开头的,(PrintWriter)getWriter在ServletResponse下. 3.st ...
- QQ 群也能接收告警啦!团队沟通力 Up Up!
截止到昨天,你已经可以通过 OneAlert 的「排班」和「分派」功能,来对告警进行有序地分发,解决团队协作效率低的问题了.然而 OneAlert 觉得自己还可以更进一步,把团队沟通困难的问题也解决掉 ...
- Long Long Message
poj2774:http://poj.org/problem?id=2774 题意:求两个串的最长公共子串. 题解:求出后缀数组,然后求height数组,找出最大的值,并且这两个子串在不同的原串中即可 ...
- SQL SELECT基本语句结构
(1)SELECT select_list (2) FROM table_list (3) WHERE search_conditions GROUP BY group_by_list ...
- ThreadPoolExecutor介绍
ThreadPoolExecutor的说明 ThreadPoolExecutor常见的操作主要有以下几个方法: getPoolSize():返回线程池实际的线程数. getActiveCount(): ...
- DestroyWindow
假设自己通过new创建了一个窗口对象pWnd,然后pWnd->Create.则销毁窗口的调用次序: 1. 手工调用pWnd->DestroyWindow(): 2. ...
- android——彻底关闭——应用程序
最近学习做android的游戏开发时候,发现一个关于android退出时不能彻底关闭的问题,比如:一个程序里new 出了N多个Thread,这样在退出程序的可能不能完全关闭,最后发现,只用finish ...
- android滑动删除的多种实现方式(一)
个人习惯,先上图 同事是个妹子(这点很重要),写滑动删除动能的时候用到了SwipeLayout,然后悲催的是,滑动时间被拦截了,解决方法先不提,在(一)中先讲解SwipeLayout下载listvie ...
- [转载] cookie、JS记录及跳转到页面原来的位置
额....如下 <!-- 定位页面的 Cookie function SetCookie(sName, sValue) { date = new Date(); s = date.getDate ...
- 最详细在Windows安装Xamarin.iOS教程
最详细在Windows安装Xamarin.iOS教程 来源:http://www.cnblogs.com/llyfe2006/articles/3098280.html 本文展示了如何设立Xamari ...