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的效果如下: 点击我 ...
随机推荐
- TTTTTTTTTTTTTT CDOJ Sliding Window 线段树（nlogn）或双端队列（n） 模板
题目链接: L - Sliding Window Time Limit:6000MS Memory Limit:131072KB 64bit IO Format:%lld & ...
- NOIP游（GUNCU）记
小学奥数不会做 状压DP打不出 一脸懵逼 本来抱着一个拿省一的心态去考的,结果DAY1刚开始就爆炸了. T1居然想了半个小时多没思路,然后打了个表,可能是应为太紧张了吧,居然打了表之后还没有看出规律来 ...
- React 项目 ant design 的 CheckboxGroup 验证
使用 ant design 提供的 getFieldDecorator 进行验证 一般开始使用默认选中 <FormItem> {getFieldDecorator('checkProtoc ...
- CSV文件在Python中的几种处理方式
Comma Separated Values,简称CSV,它是一种以逗号分隔数值的文件类型.在数据库或电子表格中,它是最常见的导入导出格式,它以一种简单而明了的方式存储和共享数据,CSV文件通常以纯文 ...
- js，正则实现金钱格式化
https://blog.csdn.net/qq_36279445/article/details/78889305 https://github.com/jawil/blog/issues/30
- TCP与UDP的对比分析
转自该地址:https://blog.csdn.net/birdie_l/article/details/78067896 TCP: 优点:可靠 稳定 TCP的可靠体现在TCP在传输数据之前,会有三次 ...
- @清晰掉 spi协议及工作原理分析
说明.文章摘自:SPI协议及其工作原理浅析 http://bbs.chinaunix.net/thread-1916003-1-1.html 一.概述. SPI, Serial Perripheral ...
- JS将页面中表格，导出到Excel中(IE中)
原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...
- java应用cpu使用率过高问题排查
---------------------------------------linux下如何定位代码问题------------------------------- 1.先通过top命令找到消耗c ...
- rtmpdump禁用openssl
rtmpdump禁用openssl 主要是编译方便 很多地方根本不需要用openssl 先找到librtmp/rtmp_sys.h 然后加入宏#define NO_CRYPTO在#ifdef _WIN ...