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 ...
随机推荐
- 单片机中断的IE和IP寄存器（摘抄）
收藏 评论(0) 分享到 微博 QQ 微信 LinkedIn 一.中断允许寄存器IE CPU对中断源的开放或中断屏蔽的控制是通过中断允许寄存器IE设置的,IE既可按字节地址寻址(其字节地址为A8 ...
- winform-全局异常捕获作用
using System;using System.Collections.Generic;using System.Linq;using System.Windows.Forms;using Jxs ...
- Python全栈之路---运算符与基本的数据结构
运算符 一.算术运算符: 练习: + 加法 两个对象相加 1 + 2得到3:'a' + 'b'得到'ab'. - 减法 一个数减去另一个数或者是负数 5 - 3得到2:-2得到一个负数 * 乘法 两个 ...
- Python环境下NIPIR(ICTCLAS2014)中文分词系统使用攻略
一.安装 官方链接:http://pynlpir.readthedocs.org/en/latest/installation.html 官方网页中介绍了几种安装方法,大家根据个人需要,自行参考!我采 ...
- nginx的特点
1.热部署 我个人觉得这个很不错.在master管理进程与worker工作进程的分离设计,使的Nginx具有热部署的功能,那么在7×24小时不间断服务的前提下,升级Nginx的可执行文件 ...
- C/C++语言的一些精简归纳
前言:本想直接写个关于OC语言,但觉得还是要说下C先. 先语言特性 C是面向过程的,没有类和对象概念,也就没有什么封装(这个?).继承.多态等特性. 而且是是中级语言,其编译过程包括:预编译(incl ...
- python安装pycrypto报错error: command 'x86_64-linux-gnu-gcc' failed with exit status 1
系统3.19.0-15-generic #15-Ubuntu 安装pycrypto提示error: command 'x86_64-linux-gnu-gcc' failed with exit st ...
- Codeforces 723C. Polycarp at the Radio 模拟
C. Polycarp at the Radio time limit per test: 2 seconds memory limit per test: 256 megabytes input: ...
- [python] 线程池
特别感谢simomo 什么是线程池? 诸如web服务器.数据库服务器.文件服务器和邮件服务器等许多服务器应用都面向处理来自某些远程来源的大量短小的任务.构建服务器应用程序的一个过于简单的模型是:每当一 ...
- shell 小问题汇总
写脚本的时候难免会判断变量是否为空或者为定义 变量a未定义 if [ -n $a ];then echo "exists"; else echo "not exists& ...