JS计算器(自制)

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<script src="jquery-1.9.1.min.js"></script>
<style>
button{
width:40px;
background-color:#2B91D5;
color:white;
}
input[type=‘text‘]{
width:98%;
}
</style>
</header>
<body >

<table border="1px">
<tr>
<td colspan="5"><input type="text" id="a" style="text-align:right;"></td>

</tr>
<tr>
<td><button class="num">9</button></td>
<td><button class="num">8</button></td>
<td><button class="num">7</button></td>
<td><button id="add">+</button></td>
<td><button id="c">C</button></td>

</tr>
<tr>

<td><button class="num">6</button></td>
<td><button class="num">5</button></td>
<td><button class="num">4</button></td>
<td><button id="j">-</button></td>
<td><button id="per">%</button></td>

</tr>
<tr>
<td><button class="num">1</button></td>
<td><button class="num">2</button></td>
<td><button class="num">3</button></td>
<td><button id="che">*</button></td>
<td><button id="d">=</button></td>
</tr>
<tr>
<td><button class="num">0</button></td>
<td><button class="bai">00</button></td>
<td><button class="dian">.</button></td>
<td><button id="chu">/</button></td>
<td><button id="wen">?</button></td>
</tr>
</table>

<div style="margin-left:20px;">

<input type="hidden" id="fh">
<input type="hidden" id="yl"><!--计算预留 -->
</div>
</body>
</html>
<script>
function fun(){
$("#a").val(0);
}
var a = $("#a").val();
var fh = $("#fh").val();
var yl = $("#yl").val();

$("#c").click(function(){
$("#a").val(0);
$("#yl").val("");
$("#fh").val("");
})
$(".num").click(function(){
var a = $("#a").val();
var fh = $("#fh").val();
var yl = $("#yl").val();
if(fh !== "" && a !== "" && yl !== ""){
num = this.innerHTML;
$("#a").val(a+num);
}else if(fh !== "" && yl == ""){

$("#yl").val($("#a").val());
$("#a").val(this.innerHTML);
}else{
num = this.innerHTML;
if($("#a").val()==0){
$("#a").val(num);
}else{
var a = $("#a").val();
$("#a").val(a+num);
}
}
})
$("#add").click(function(){
var a = $("#a").val();
$("#fh").val("+")

})
$("#j").click(function(){
var a = $("#a").val();
$("#fh").val("-")

})
$("#che").click(function(){
var a = $("#a").val();
$("#fh").val("*")

})
$("#chu").click(function(){
var a = $("#a").val();
$("#fh").val("/")

})
$("#d").click(function(){
var a = $("#a").val();
var fh = $("#fh").val();
var yl = $("#yl").val();
if(fh == "+"){

$("#a").val(Number(yl)+Number(a));
}else if(fh == "-"){

$("#a").val(Number(yl)-Number(a));
}
else if(fh == "*"){

$("#a").val(Number(yl)*Number(a));
}
else if(fh == "/"){

$("#a").val(Number(yl)/Number(a));
}
})
$(".bai").click(function fun(){
var a = $("#a").val();
$("#a").val(a+"00");
})
$(".dian").click(function fun(){
var a = $("#a").val();
$("#a").val(a+".");
})
$("#per").click(function fun(){
var a = $("#a").val();
$("#a").val(Number(a)/100);
})
$("#wen").click(function fun(){
alert("这个按钮也许没什么用?也许吧")
})
</script>

时间: 2024-10-06 19:38:05

JS计算器(自制)的相关文章

js计算器

//body <div id="maindiv"> <lable class="lbname">计算器</lable> <div id="content"> <span id="note"></span> <input type="text" onfocus="this.blur();" id="nu

JS计算器代码

http://www.jb51.net/article/29295.htm <!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&

基于页面js的自制简易测试工具

js_test_framework 该工具主要用于web前端单元测试,通过直接在浏览器中调用js方法,实现界面上的现场测试 git地址: https://coding.net/u/mich/p/js_test_framework/git 流程 通过testLive在现场录制所需要的请求,testLive会记录期间所有的请求,同时可以重新运行 将testLive录制后的请求,通过output方法输出至控制台,将输出的data写入自定义模块的RequestData中,同时在定义data后注册进req

在线计算器JS源码

<!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-Typ

用js实现一个简单的计算器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Js计算器</title>    <style>        *{            margin: 0px;            padding: 0px;        }        .box{            ma

基于js白色简洁样式计算器

今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览   源码下载 实现的代码. html代码: <div id="calcuator"> <input type="text" id="input-box" valu

纯JS实现房贷利率报表对比

最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的,将要完成的功能: 可以在Android手机上访问的界面对齐.美化等. 图表的优化. 等额本金法和等额本息法的实现. 以上功能暂列这么多,以后有想到的在慢慢往上加:也希望大家多多的提出你的意见. 以后会把每次都更新版本都添加到文章的后面,方便历史版本的追溯.样图: 版本一: <!DOCTYPE htm

JavaScript简易计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS计算器</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"&g

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?