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 ...
随机推荐
- 一步一步写平衡二叉树（AVL树）
平衡二叉树(Balanced Binary Tree)是二叉查找树的一个进化体,也是第一个引入平衡概念的二叉树.1962年,G.M. Adelson-Velsky 和 E.M. Landis发明了这棵 ...
- 记一次 Ubuntu 使用 arptables 抵御局域网 ARP 攻击
. . . . . 前段时间大概有一个月左右,租房的网络每天都断一次,每次断大概一两分钟左右就恢复了,所以没太在意.直到有一天晚上,LZ 正在写博客,但是网络频繁中断又重新连上再中断.待 LZ 好不容 ...
- poj 2891 Strange Way to Express Integers (非互质的中国剩余定理)
Strange Way to Express Integers Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 9472 ...
- 编辑器sublime text3 破解码
第一段亲测有效 —– BEGIN LICENSE —–Ryan ClarkSingle User LicenseEA7E-8124792158A7DE B690A7A3 8EC04710 006A5E ...
- node.js 基础学习笔记2
Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...
- [转]AS3复制可视对象
一,复制舞台上的影片剪 方法1——反射方法: var ClassRef:Class = getDefinitionByName(getQualifiedClassName(t_mc)) as Clas ...
- 重签名问题：does not have a signature matching
今天在家里电脑重签名过的apk拿到公司来用装到模拟器上,运行Robotium测试用例时,报了如下错误,原本以为是工程里的activity名称和包名写错了呢,检查了一遍发现木有错误呀.... 好吧,那我 ...
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- Maven学习之 仓库镜像
使用仓库镜像 仓库可以声明在项目中,但有时,你可能想要使用某个仓库的镜像,而不去修改项目文件. 使用镜像的原因: 有一个同步镜像,且速度更快. 想使用你自己控制的内部仓库. 想运行repository ...
- php protected封装
<?//父类class father{ public function a(){ echo 'father->a()'.'<br>'; echo "func ...