js实现计算器效果
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/acurec/123/edit
-->
<head>
<meta charset=utf-8 />
<title>Calculator</title>
<style id="jsbin-css">
div,span{
margin:0;padding:0;
font-weight:bold;
font: bold 16px Arial, sans-serif;
/*禁止选中文本*/
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
user-select:none;
}
body{
background:radial-gradient(circle,#fff,#aaa);
background:-webkit-radial-gradient(circle,#fff,#aaa);
background:-o-radial-gradient(circle,#fff,#aaa);
background:-moz-radial-gradient(circle,#fff,#aaa);
background-size:cover;
}
#calculator{
width:325px;
height:auto;
margin:100px auto;
padding:20px;
background:linear-gradient(#9dd2ea, #8bceec);
background:-o-linear-gradient(#9dd2ea, #8bceec);
background:-webkit-linear-gradient(#9dd2ea, #8bceec);
background:-moz-linear-gradient(#9dd2ea, #8bceec);
border-radius:5px;
box-shadow:0 7px 8px #0000ff
}
.keys,.head{overflow:hidden;}
.keys span,.clear{
float:left;
width:66px;
height:40px;
margin:0 5px 10px 8px;
text-align:center;
line-height:40px;
border-radius:3px;
background:#eee;
box-shadow:0 5px 1px #999;
cursor:pointer;
transition:all 0.3s ease;
}
.keys span:hover{
background:#87cefa;
box-shadow:0 5px 1px #1e90ff;
color:#fff;
}
.keys .sign{
background:#fffacd;
}
.clear{
float:left;
background:#ffb6c1;
box-shadow:0 5px 1px #ff86c1;
}
.clear:hover{
background:#ff96a1;
box-shadow:0 5px 1px #ff4691;
color:#fff;
}
.show{
width:213px;
height:40px;
float:right;
margin:0 16px 5px 0;
border-radius:3px;
background:#999;
font-size:20px;
line-height:40px;
text-align:right;
padding-right:10px;
box-shadow:inset 0 4px 5px #333;
}
</style>
</head>
<body>
<div id="calculator">
<div class="head">
<span class="clear">c</span>
<div class="show"></div>
</div>
<div class="keys">
<span>7</span>
<span>8</span>
<span>9</span>
<span class="sign">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="sign">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="sign">*</span>
<span>0</span>
<span>.</span>
<span>=</span>
<span class="sign">/</span>
</div>
</div>
<script>
window.onload=function()
{
var oShow=getByClass("calculator","show")[0];
var aNum=document.getElementById("calculator").getElementsByTagName("span");
for(var i=0,iLen=aNum.length;i<iLen;i++)
{
aNum[i].onclick=function()
{
var oShowVal=oShow.innerHTML;
var oNumVal=this.innerHTML;
var num1,num2=null;
num1=oShowVal;
//判断按键
if(oNumVal=="c")
{
oShow.innerHTML="";
}
else if(oNumVal=="=")
{
var oResult=eval(oShowVal);
oShow.innerHTML=oResult;
}
else
{
oShow.innerHTML+=oNumVal;
}
}
}
}
function getByClass(root,sClass)
{
var obj=document.getElementById(root);
var arr=[];
var aItems=obj.getElementsByTagName("*");
for(var i=0;i<aItems.length;i++)
{
if(aItems[i].className==sClass)
{
arr.push(aItems[i]);
}
}
return arr;
}
</script>
效果图：
js实现计算器效果的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
随机推荐
- Idea中Springboot热部署无效解决方法
仅适用IDEA中,eclipse中不需要设置 一.开启idea自动make功能 1 - Enable Automake when the application is running PRESS: C ...
- Springboot 构建http服务，返回的http行是'HTTP/1.1 200' 无状态码描述 客户端解析错误
————————————————————————————————————————— *** 响应的数据格式 HTTP/1.1 200 OK Server: Apache-Coyote/1.1 A ...
- 3.并发编程-ReentrantLock 细节说明
并发编程-ReentrantLock 细节说明 ---title: 并发编程-ReentrantLock 细节说明date: 2018-07-05 09:06:57categories: - 并发编程 ...
- springMVC @response 中文乱码解决
以下任选一种 在web.xml中: 添加一个过滤器(filter),注册 org.springframework.web.filter.CharacterEncodingFilter <filt ...
- linux 简单命令说明
1.df -h 查看磁盘占用及挂载情况 挂载磁盘 如下: mount /dev/sda1 /boot 取消挂载的磁盘 umount /boot 2.dh -sh 查看当前目录占用文件大小 dh -sh ...
- express 请求参数的一些问题
先说点别的,项目入口是index.js,运行 node index 启动项目. 路由部分app.get('/', function(req, res) { res.send('hello, expre ...
- mysql 全量备份以及增量备份
MySQL 的全量备份很简单,增量备份虽然会手动使用但是还没写过脚本去实现增量备份.今天搞一搞,顺便回忆一下MySQL的基本操作.
- mysql执行拉链表操作
拉链表需求: 1.数据量比较大 2.变化的比例和频率比较小,例如客户的住址信息,联系方式等,比如有1千万的用户数据,每天全量存储会存储很多不变的信息,对存储也是浪费,因此可以使用拉链表的算法来节省存储 ...
- 异步分发任务celery
Celery简介 Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单. celery适用异步处理问题,当遇到发送邮件.或者文件上传, 图像处理等等一些比较耗时的 ...
- robotframework之用户关键字的用法
robotframework是一个关键字驱动框架,核心在于关键字的应用 目录 1.如何创建用户关键字 2.调用用户关键字 3.用户关键字的使用场景 1.如何创建关键字 第一种:直接在项目上右键,添加用 ...