<!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. Android学习20--OpenGL的"mapPoints"

    在OpenGL中有时会需要求一个3维空间中的点在平移(缩放,旋转)后坐标是多少.需求相当于二维的mapPoints.可以通过这个函数实现 void multiplyMV (float[] result ...

  2. STL源码剖析（读书笔记）

    STL迭代器种类 2. 迭代器型别使用范例: 3. SGI STL空间配置器分为两级: 4. Vector 的内部存储方式为数组,随机访问迭代器. 5. Vector的size获取方式: 6. Vec ...

  3. 关于Mysql的索引

    索引是指把你设置为索引的字段A的内容储存在一个独立区间S里,里面只有这个字段的内容.在找查这个与这个字段A的内容时会直接从这个独立区间里查找,而不是去到数据表里查找.找到的这些符合条件的字段后再读取字 ...

  4. Java虚拟机学习 - 垃圾收集器

    HotSpot JVM收集器 上面有7中收集器,分为两块,上面为新生代收集器,下面是老年代收集器.如果两个收集器之间存在连线,就说明它们可以搭配使用. Serial(串行GC)收集器 Serial收集 ...

  5. VUE2.0实现购物车和地址选配功能学习第五节

    第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="c ...

  6. 第十三篇 一个安装、管理windows服务的桌面程序

    在网上看到一个修改程序入口的程序去把windows 服务修改成控制台的程序,然后利用控制台的程序把服务安装和管理,也想起自己原来也写了一个对windows 报务管理的程序,不过是winform的.   ...

  7. 数据的增删改查（三层）<!--待补充-->

    进行数据操作必然少了对数据的增删改查,用代码生成器生成的代码不是那么满意!方便在今后使用,这里就主要写“数据访问层(Dal)” 既然这里提到三层架构:有必要将三层内容在这里详细介绍一下(待补充) 注: ...

  8. lua和c的亲密接触

    介绍 lua和c的亲密接触,靠的是一个虚拟栈.lua通过这个虚拟栈来实现和c之间值的互传.栈上的每一个元素是一个lua值(nil,number,string...). 当lua调用c函数的时候,这个函 ...

  9. Docker存储驱动之Device Mapper简介

    Device Mapper是一个基于kernel的框架,它增强了很多Linux上的高级卷管理技术.Docker的devicemapper驱动在镜像和容器管理上,利用了该框架的超配和快照功能.为了区别, ...

  10. KoaHub平台基于Node.js开发的Koa JWT认证插件代码信息详情

    koa-jwt Koa JWT authentication middleware. koa-jwt Koa middleware that validates JSON Web Tokens and ...