<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
font-size: 14px;
font-family: "微软雅黑";
}
#box{
width: 260px;
margin: 100px auto;
}
#box #top{
height: 50px;
border: 1px solid #666666;
}
ul{
float: left;
}
ul li{
float: left;
list-style: none;
width: 50px;
height: 50px;
background: #CCCCCC;
color: #fff;
text-align: center;
line-height: 50px;
border: 1px solid #008000;
}
ul #li1{
width: 50px;
height: 102px;
}
ul #li2{
width: 102px;
height: 50px;
}
#list{
margin-top: -52px;
}
</style>
</head>
<body>
<div id="jisuanji">
<div id="box">
<div id="top">

</div>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>%</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li id="li3">C</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li id="li1">=</li>
</ul>
<div style="clear: both;"></div>
<ul id="list">
<li id="li2">0</li>
<li>.</li>
<li>+</li>
</ul>
</div>
<script type="text/javascript">
var otext = document.getElementById("top");
var oLi = document.getElementsByTagName('li');
var li1 = document.getElementById("li1");
var li3 = document.getElementById("li3");
for (var i=0;i<oLi.length;i++) {
oLi[i].onclick = function(){
otext.innerHTML += this.innerHTML;
}
}
li1.onclick = function(){
otext.innerHTML = eval(otext.innerHTML )
}
li3.onclick = function(){
otext.innerHTML ='';
}
</script>
</div>
</body>
</html>

js计算器的更多相关文章

  1. 早期练手：功能相对比较完善的 js 计算器

    第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...

  2. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  3. js计算器---转

    至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...

  4. 简易js计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. <!DOCTYPE html> <html> <head> ...

  5. JS计算器（自制）

    <!doctype html><html><header><meta charset="utf-8"><script src= ...

  6. js 计算器转摘

    转自:https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg <table> <tr> <td colspan="4 ...

  7. 基于js白色简洁样式计算器

    今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...

  8. 纯JS实现房贷利率报表对比

    最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的, ...

  9. windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码

    官网:www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...

随机推荐

  1. OpenCv 2.4.9 (二) 核心函数

    前言 经过前面一节的怎样读取图片,我们可以做一些有趣的图像变换,下面我们首先介绍使用遍历的方法实现,然后我们使用内置的函数实现. 矩阵掩码实现 矩阵掩码,和卷积神经网络中的卷积类似.一个例子如下: 现 ...

  2. PHP结合memcacheq消息队列解决并发问题

    在处理业务逻辑时有可能遇到高并发问题,例如商城秒杀.微博评论等.如果不做任何措施可能在高瞬间造成服务器瘫痪,如何解决这个问题呢?队列是个不错的选择.队列(Queue)又称先进先出(First In F ...

  3. HTTP各状态消息说明

    200:请求已成功,请求所希望的响应头或数据体将随此响应返回. 302:请求的资源临时从不同的 URI 响应请求.由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求.只有在 Cache- ...

  4. 每天一个linux命令(55)--at命令

    在Windows系统中,Windows提供了计划任务这一功能,在控制面板  ->  性能与维护  ->  任务计划,它的功能就是安排自动运行的任务.通过 ‘ 添加任务计划’ 的一步步引导, ...

  5. 【2017-02-26】String类、Math类、DateTime类

    一.String类 黑色小扳手 - 属性     后面不带括号紫色立方体 - 方法     后面带括号 字符串.Length  -  字符串长度,返回int类型 字符串.TrimStart() - 去 ...

  6. 关于 myBatis 中的 jdbcType的细节问题

    前几天上线了一个 版本,第二天到公司的时候,在cat上发现了一个长sql查询非常耗时,几乎把线上的项目搞崩溃了.我马上开始排查问题.最终发现 球队的ID传过来的时候是String 类型的,但是在执行s ...

  7. C#-MVC开发微信应用(1)--开始使用微信接口

    1.微信账号 要开发使用微信的平台API,就需要到微信的公众平台(https://mp.weixin.qq.com/)去注册,拥有一个服务号或者订阅号,服务号主要面对企业和组织,订阅号主要面向组织和个 ...

  8. ASP.NET MVC 5 基本构成

    MVC模式简介: MVC模式两种理解:一种是表现模式,另外一种是架构模式.它将应用程序分成三个主要组件即:视图(View)控件器(Controller)模型(Model) M: Model主要是存储或 ...

  9. java算法 蓝桥杯（题+答案） 压缩变换

    10.压缩变换  (程序设计) 小明最近在研究压缩算法.他知道,压缩的时候如果能够使得数值很小,就能通过熵编码得到较高的压缩比.然而,要使数值很小是一个挑战. 最近,小明需要压缩一些正整数的序列,这些 ...

  10. enum类型的本质（转）

    原地址:http://www.cppblog.com/chemz/archive/2007/06/05/25578.html 至从C语言开始enum类型就被作为用户自定义分类有限集合常量的方法被引入到 ...