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定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
随机推荐
- Webpack实战（八）：教你搞懂webpack如果实现代码分片（code splitting）
2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天.以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着 ...
- 响应式Web设计：构建令人赞叹的Web应用程序的秘诀
骨架屏(Skeleton Screen) 参考博客:https://medium.com/@owencm/reactive-web-design-the-secret-to-building-web- ...
- 实训第八天 有关python orm 的学习记录 常用方法01
沿用第七天的数据库,数据库现在是这样的: 配置好主路由include子路由 子路由引入views 在views页面定义test测试请求如下: def test(request): # 1.all()方 ...
- centos7安装postgresql和postgis
1.安装步骤 -- 安装对应的rpm文件(其他系统的rpm包,请自行到https://yum.postgresql.org/下载)yum install -y https://download.pos ...
- mybatis入门的前期准备
使用步骤如下: 首先创建一个Maven工程,在pom.xml文件中引入mybatis的jar包坐标 <dependencies> <dependency> <groupI ...
- 想学大学计算机课？这 37 门 CS 专业必修课，了解一下
最近,不少高校延迟开学,大家只能宅家上网课. 有一些朋友,想趁此期间,多学点计算机的专业课,却不知从何学起. 211,985大学的计算机专业课都是经过授课教师精心安排的,从大一到大四,课程合理设置,循 ...
- docker安装mysql/redis
1.安装mysql容器 #搜索mysql镜像 docker search mysql #拉取mysql镜像 docker pull docker.io/mysql #创建mysql容器,MYSQL_R ...
- 【已解决2】pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in position 110: invalid continuation byte
python打包exe解码错误问题 最近做了一个小项目,其中把自己写的python打包成exe文件.我用的是pyinstaller. 只需要打包主程序py文件就ok. 在打包过程中,遇到一 ...
- 8.python内置模块之random模块简介
Python中的random模块用于生成随机数. 常用的7个函数: 1.random.random():返回一个[0,1)之间的随机浮点值(双精度) 2.random.uniform(a,b):返回[ ...
- 如何获取 iOS APP 的 scheme URL ?
获取IPA文件 拷贝到桌面上 后缀名由 .ipa 改为 .zip 解压之后进入,进入名为Payload的目录 右键点击里面的跟App同名的文件,选择'显示包内容' 用文本编辑器打开当前文件夹下的inf ...