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定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
随机推荐
- HDU 1006 模拟
Tick and Tick Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- MySQL基础（4） | 视图
MySQL基础(4) | 视图 基本语法 1.创建 CREATE VIEW <视图名> AS <SELECT语句> 语法说明如下. <视图名>:指定视图的名称.该名 ...
- 升级了NinjaLoveFish Excel量化表格
为了方便查看均价和止盈值,新建了两列 这样做的好处就是,针对一个股票,可以实现不同的多个网格布局,然后分别实现各自的盈利设定. 例如这是网格1 那么同时也可以存在网格2 就可以实现多个网格布局到一个股 ...
- Policy-based Approach(基于策略的方法)
step 1:Neural Network as Actor step 2:goodness of function(训练一些Actor) 是一个序列,包含T个状态s.行为a.奖励s.代表某一次的开始 ...
- 查找第K大的值
这种题一般是给定N个数,然后N个数之间通过某种计算得到了新的数列,求这新的数列的第K大的值 POJ3579 题意: 用$N$个数的序列$x[i]$,生成一个新序列$b$. 新的序列定义为:对于任意的$ ...
- 记录 Spine骨骼动画导入unity 步骤[unity3d 4.6.6版本 2d动画]
1:准备好unity使用Spine所需要的运行库,可到如下地址 https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine ...
- 基于tensorflow2.0和cifar100的VGG13网络训练
VGG是2014年ILSVRC图像分类竞赛的第二名,相比当年的冠军GoogleNet在可扩展性方面更胜一筹,此外,它也是从图像中提取特征的CNN首选算法,VGG的各种网络模型结构如下: 今天代码的原型 ...
- pom.xml配置文件详解(Maven)
注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 注:本文转载自:https://blog.csdn.net/u012152619/article/deta ...
- js中的节点遍历+类数组对象
firstChild 第一个子元素 lastChild 最后一个子元素 childNodes[n] = childNodes.item(n) 第n+1个子元素 parentNode ...
- day8 编码2
#!/usr/bin/env python # -*- coding:utf-8 -*- #str --->byte encode 编码 s = '二哥' b = s.encode('utf-8 ...