JavaScript仿计算器案例源代码
效果图
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="calc.css">
<script type="text/javascript" src="calc.js"></script>
</head>
<body onload="init()">
<div id="div1">
<div id="div2">
<input type="text" name="num" id="num" />
</div>
<div id="div3">
<input type="button" value="c" name="" id=""/>
<input type="button" value="←" name="" id=""/>
<input type="button" value="+/-" name="" id=""/>
<input type="button" value="/" name="" id=""/>
<input type="button" value="1" name="" id="n1"/>
<input type="button" value="2" name="" id=""/>
<input type="button" value="3" name="" id=""/>
<input type="button" value="*" name="" id=""/>
<input type="button" value="4" name="" id=""/>
<input type="button" value="5" name="" id=""/>
<input type="button" value="6" name="" id=""/>
<input type="button" value="-" name="" id=""/>
<input type="button" value="7" name="" id=""/>
<input type="button" value="8" name="" id=""/>
<input type="button" value="9" name="" id=""/>
<input type="button" value="+" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="." name="" id=""/>
<input type="button" value="=" name="" id=""/>
<input type="button" value="m" name="" id="imooc"/>
</div>
</div>
</body>
</html>
calc.css
*{
margin:0px;
padding:0px;
}
div{
width: 170px;
}
#div1{
top:60px;
left: 100px;
position: absolute;
}
input[type="button"]{
width: 30px;
margin-right: 5px;
}
input[type="text"]{
width: 152px;
text-align: right;
background-color: #fff;
border: 1px solid;
padding-right: 5px;
box-sizing: border-box;
}
input[type="button"]:hover{
background-color: yellow;
border: 1px solid;
}
calc.js
function init(){
var num=document.getElementById("num");
num.value=0;
num.disabled="disabled";
var oButton=document.getElementsByTagName("input");
var btn_num1;
var fh;
for(var i=0;i<oButton.length;i++){
oButton[i].onclick=function(){
if(isNumber(this.value)){
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
var btn_num=this.value;
switch(btn_num){
case "+":
btn_num1=Number(num.value);
num.value=0;
fh="+";
break;
case "-":
btn_num1=Number(num.value);
num.value=0;
fh="-";
break;
case "*":
btn_num1=Number(num.value);
num.value=0;
fh="*";
break;
case "/":
btn_num1=Number(num.value);
num.value=0;
fh="/";
break;
case ".":
num.value=dec_number(num.value);
break;
case "←":
num.value=back(num.value);
break;
case "c":
num.value="0";
break;
case "+/-":
num.value=sign(num.value);
break;
case "=":
switch(fh){
case "+":
num.value=btn_num1+Number(num.value);
break;
case "-":
num.value=btn_num1-Number(num.value);
break;
case "*":
num.value=btn_num1*Number(num.value);
break;
case "/":
if(Number(num.value)==0){
alert("除数不能是0");
num.value=0;
}else{
num.value=btn_num1/Number(num.value);
}
break;
}
break;
}
}
}
}
}
/*正负号*/
function sign(n){
n=Number(n)*-1;
return n;
}
/*退位键*/
function back(n){
n=n.substr(0,n.length-1);
if(isNull(n)){
n="0";
}
return n;
}
/*小数点*/
function dec_number(n){
if(n.indexOf(".")==-1){
n=n+".";
}
return n;
}
/*验证文本框是否为空或者0*/
function isNull(n){
if(n=="0" || n.length==0){
return true;
}else{
return false;
}
}
function isNumber(n){
return !isNaN(n);
}
JavaScript仿计算器案例源代码的更多相关文章
- js计算器案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- javascript简单计算器实践
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- javascript仿新浪微博图片放大缩小及旋转效果
javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...
- 自己做的javascript简易计算器
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- JavaScript编写计算器的发展史
JavaScript编写计算器的发展史: 编写一个普通的四则运算: <!DOCTYPE html> <html lang="en"> <head> ...
- 【JavaScript定时器小案例】常见的几种定时器实现的案例
[JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
随机推荐
- Shell脚本 统计店中店导出数据
有一个数据文件 yue.csv 是这样的 #head yue.csv 日期,商家名称,要求在线数,当天在线数,要求在线时长,在线时长达标数, ……"2017-12-31&quo ...
- 珠峰-babel
#### babel 翻译的require为了给node使用么.浏览器可以使用么.#### amd, cmd的规范.和实现原理.#### babel的三个核心包,什么使用使用.#### babel的几 ...
- codewars--js--Convert all the cases!
问题描述: In this kata, you will make a function that converts between camelCase, snake_case, and kebab- ...
- 宿主机休眠后，虚拟机网络ping不通网关
宿主机 win10 64位 虚拟机软件 vmware 15 虚拟机 centos 7 64位 网络模式:桥接模式 故障起因: 中午去吃饭,为了节省电费,把宿主机 windows 给休眠了 吃完饭 ...
- Ajax0002： 省市县三级联动案例
- html网页基本概念
什么是网页?html文档经过浏览器内核渲染后展示出来的页面(五大主流浏览器及四大内核) html文档文件名后缀是.html,之前存在的.htm是为支持DOM系统(目前织梦还是用.htm文件名结尾文件) ...
- 硬盘500M，为什么没有500M。10M宽带，为什么网速没有10M？
在天朝, 硬件厂商用1000代替1024, 通信公司,用 byte来代替bit. 比如 500G的硬盘,应该有 500 * 1024 *1024 *8 = 4.194304*10^9 位 但是按照厂商 ...
- 我眼中的ASP.NET.MVC
MVC MVC全名 : Model View Controller ( Model-模型 View-视图 Controller-控制器)是一种经典的,经久不衰的,屹立不倒的软件设计框架.实现了业务逻 ...
- Linux 文件(持续更新)
一.文件类型 Linux操作系统把所有内容(文件.图片.视频.设备)都当作文件看待.处理,即一切皆文件. Linux系统把所有文件分为七种类型: 文件类型 文件类型标识 说明 使用ls -l命令查看文 ...
- 基于XML的声明式事务控制
1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...