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定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...
随机推荐
- H5监听浏览器滚动条scrollbar
监听滚动条scrollbar(适配手机) 1. document.documentElement.scrollHeight:整个html的高度,含被隐藏界面高度 2. window.pageYOffs ...
- [MacOS-Memcached]安装
查看memcached信息 $ brew info memcached memcached: stable 1.5.22 (bottled), HEAD High performance, distr ...
- java实现交集，并集，包括对象和基本类型
//java实现求交集,并集,包括元素为对象和基本类型,主要是利用hashMap,set不允许元素重复等特性来进行实现去重,利用反射机制来灵活配置以对象某个属性来进行去重./** * Gaoxl * ...
- Linux学习小记（1）---nm*ip
注意在CentOS7中ifconfig等命令已经被ip取代,ip的功能很强大,而NetworkManager系列命令(nmcli nmtui等)可以用于配置网络连接
- codewars--js--Human Readable Time—Math对象，parseInt()
问题描述: Write a function, which takes a non-negative integer (seconds) as input and returns the time i ...
- java之时间戳处理
●时间戳(timestamp)定义 时间戳指的是从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数.严格来说,不管你处在地球上的哪个地方,任意时间点的时间戳都是相同的.这点有利于线 ...
- C#设计模式学习笔记：(16)观察者模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7928521.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第四个模式--观 ...
- 【已解决】pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in position 110: invalid continuation byte
转载自勤奋的小青蛙本文链接地址: [已解决]pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in positi ...
- hadoop学习摘要
参考链接:https://www.zhihu.com/question/333417513 https://www.oschina.net/p/hbase hadoop环境搭建:https://blo ...
- 【python基础语法】第8天作业练习题
""" # 第一题: # 要求:请将数据读取出来,转换为以下格式 {'data0': '数据aaa', 'data1': '数据bbb', 'data2': '数据ccc ...