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 ...
随机推荐
- POJ 3348 - Cows 凸包面积
求凸包面积.求结果后不用加绝对值,这是BBS()排序决定的. //Ps 熟练了template <class T>之后用起来真心方便= = //POJ 3348 //凸包面积 //1A 2 ...
- Selenium2+python自动化9-CSS定位语法
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...
- javascript 的 梯子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- （转）对Oracle导出文件错误和DMP文件结构的分析,EXP-00008: 遇到 ORACLE 错误 904 ORA-00904: "MAXSIZE": invalid identifier
EXP-00008: 遇到 ORACLE 错误 904 ORA-00904: "MAXSIZE": invalid identifier 原因:oracle版本不一样 执行 C:/ ...
- rsyslog+mysql+loganalyzer搭建日志服务器<个人笔记>
大概思路如下: 使用Linux自带的rsyslog服务来做底层,然后再使用mysql与rsyslog的模板来存储文件,并且以web来进行显示出来.<模板的存储以日期的树形结构来存储,并且以服务器 ...
- 低版本的无法打开高版本的VM
低版本VM工具運行高版本VM環境時,會彈出不支持虚拟机配置.例如:使用VM8工具打開VM9配置的VM環境,會彈出下面的提示 在遇到這種情況的時候,一般都會選擇升級VM工具.如果不想升級VM工具,可以通 ...
- ORA-01653:表空间扩展失败的问题以及增加表空间
一.脚本修改方式: ----查询表空间使用情况---使用DBA权限登陆SELECT UPPER(F.TABLESPACE_NAME) "表空间名",D.TOT_GROOTTE_MB ...
- 1016. Phone Bills (25)
分析: 模拟题,提交无数次WA,注意几点: 1.如果某人没有有效通话记录,则不输出该人的信息,在此WA15次,题目看了N遍也没出现啊. 2.通话时间钱的计算:假设我们计算time1到time2的账单: ...
- Oracle中的带参数的视图--我们致力于打造人力资源软件
创建包和包体 create or replace package pkg_pv is procedure set_pv(pv varchar2); function get_pv return var ...
- （Python ）模块、包
本节开始学习模块的相关知识,主要包括模块的编译,模块的搜索路径.包等知识 1.模块 如果我们直接在解释器中编写python,当我们关掉解释器后,再进去.我们之前编写的代码都丢失了.因此,我们需要将我们 ...