jQuery/javascript实现简单网页计算器
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现</title>
<script src="jquery.js"></script> <style type="text/css">
table{background-color:pink;width:300px;height:200px;}
td{text-align:center;}
</style> <script language="javascript">
$("document").ready(function(){
$("#b1").click(function(){
var num1=$("#num1").val();
var num2=$("#num2").val();
var num3=eval(num1)+eval(num2);
$("#num3").val(num3); }); $("#b2").click(function(){
var num1=$("#num1").val();
var num2=$("#num2").val();
var num3=eval(num1)-eval(num2);
$("#num3").val(num3);
}); $("#b3").click(function(){
var num1=$("#num1").val();
var num2=$("#num2").val();
var num3=eval(num1)*eval(num2);
$("#num3").val(num3);
}); $("#b4").click(function(){
var num1=$("#num1").val();
var num2=$("#num2").val();
var num3=eval(num1)/eval(num2);
$("#num3").val(num3);
});
});
</script>
</head>
<body>
<center>
<form action="" method="post">
<table border="1px">
<tr>
<td>数字1：</td>
<td><input type="text" id="num1"/></td>
</tr>
<tr>
<td>数字2：</td>
<td><input type="text" id="num2"/></td>
</tr>
<tr>
<td>结果：</td>
<td><input type="text" id="num3"/></td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="加" id="b1"/>
<input type="button" value="减" id="b2"/>
<input type="button" value="乘" id="b3"/>
<input type="button" value="除" id="b4"/>
</td>
</tr>
</table>
</form>
<center>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>九九乘法表</title>
<style type="text/css">
table{
background-color:pink;
color:red;
}
</style>
</head>
<body>
<h1>计算器</h1>
<table border="1" align="center">
<tr>
<td>数值1：<input type="text" name="num1" id="num1"/></td>
</tr>
<tr>
<td>数值2：<input type="text" name="num2" id="num2"/></td>
</tr>
<tr>
<td>结 果：<input type="text" name="num3" id="num3"/></td>
</tr>
<tr>
<td colspan="4"><input type="button" value="加法" style="color:blue;" onclick="add()"/>
<input type="button" value="减法" style="color:blue;" onclick="reduce()"/>
<input type="button" value="乘法" style="color:blue;" onclick="multiplication()"/>
<input type="button" value="除法" style="color:blue;" onclick="division()"/>
</td>
</tr> </table>
<script language="javascript">
function add(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
if(parseInt(num1)==num1){
var num1=parseInt(num1);
}else{
var num1=parseFloat(num1);
num1=parseFloat(num1.toFixed(2));
}
if(parseInt(num2)==num2){
var num2=parseInt(num2);
}else{
var num2=parseFloat(num2);
num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
}
document.getElementById("num3").value=num1+num2;
}
function reduce(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
if(parseInt(num1)==num1){
var num1=parseInt(num1);
}else{
var num1=parseFloat(num1);
num1=parseFloat(num1.toFixed(2));
}
if(parseInt(num2)==num2){
var num2=parseInt(num2);
}else{
var num2=parseFloat(num2);
num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
}
document.getElementById("num3").value=num1-num2;
}
function multiplication(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
if(parseInt(num1)==num1){
var num1=parseInt(num1);
}else{
var num1=parseFloat(num1);
num1=parseFloat(num1.toFixed(2));
}
if(parseInt(num2)==num2){
var num2=parseInt(num2);
}else{
var num2=parseFloat(num2);
num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
}
document.getElementById("num3").value=num1*num2;
}
function division(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
if(parseInt(num1)==num1){
var num1=parseInt(num1);
}else{
var num1=parseFloat(num1);
num1=parseFloat(num1.toFixed(2));
}
if(parseInt(num2)==num2){
var num2=parseInt(num2);
}else{
var num2=parseFloat(num2);
num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/
}
document.getElementById("num3").value=num1/num2;
}
</script>
</body>
</html>
jQuery/javascript实现简单网页计算器的更多相关文章
- jsp学习---使用jsp和JavaBean实现超简单网页计算器
一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...
- JavaScript+HTML,简单的计算器实现
成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...
- 用JavaScript制作简单的计算器
<html > <head> <title>简单计算器</title> <style type="text/css"> ...
- 利用css和javascript实现简单的计算器
<!doctype html> <html> <head> <!--声明当前页面的编码集--> <meta http-equiv="Co ...
- javaScript实现简单网页倒计时代码
<div id="button"> <input type="button" value="同意" id="b0 ...
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- JAVASCRIPT实现简单计算器
最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...
- javascript 简单的计算器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- JS——制作简单的网页计算器
用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
- Revenge of Nim hdu 4994 (博弈)
http://acm.split.hdu.edu.cn/showproblem.php?pid=4994 题意:现在有两个人在取石子,共有n堆石子,每堆石子取完后才可以取下一堆石子,最后一个取石子的人 ...
- linux特殊符号大全
# ; ;; . , / \ 'string'| ! $ ${} $? $$ $* " ...
- Java核心知识点学习----多线程并发之线程间的通信,notify,wait
1.需求: 子线程循环10次,主线程循环100次,这样间隔循环50次. 2.实现: package com.amos.concurrent; /** * @ClassName: ThreadSynch ...
- 图解CSS的padding,margin,border属性
原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...
- Struts2中请求参数的接收方式和ModelDriven机制及其运用
odelDriven 为什么需要ModelDriven 所谓ModelDriven,意思是直接把实体类当成页面数据的收集对象.比如,有实体类User如下: package cn.com.leadfar ...
- 【使用git】初识git
0. 版本控制 版本控制是一种记录若干文件内容变化,以便将来查阅特定版本修改情况的系统(vcs). svn等是集中式版本控制,即服务器在单一机器上,每次checkout变化的文件,若机器故障,则有可能 ...
- SQL中Group By 的使用
1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...
- 在Ubuntu14.04 32位中安装mongodb
curl -O https://fastdl.mongodb.org/linux/mongodb-linux-i686-3.0.6.tgz .tgz mkdir -p mongodb / mongod ...
- PyCharm 4.5.4 环境配置
1.去掉“自动保存功能” pycharm默认是自动保存的,习惯自己按 ctrl + s 的可以进行如下设置: 菜单File -> Settings... -> Appearance &am ...
- [Xamarin] 調用JSON.net 來解析JSON (转帖)
上一篇文章我們提到了透過WebClient從Facebook 拿到我的JSON資料 再來我們要怎麼解析JSON格示呢?在.net 中,我們很孰悉的JSON.net,沒錯,我們依然可以在Xamarin中 ...