html代码。

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

body,#content,#te,#sa,#main-content,ul,li{margin:0 auto;padding:0;font-weight:bold;font-size:50px;}

#content{width:300px;height:400px;border:1px solid gray;padding:0px;}

.main-content{width:300px;height:250px;border:1px solid red;overflow:hidden;background-color:#BC8F8F;}

#te{width:300px;height:80px;border:1px solid black;background:#FFD700;text-align:right;}

.main-content ul li{list-style:none;

                    width:60px;

                    height:50px;

                    border:1px solid black;

                    border-radius:10px;

                    display:block;

                    float:left;

                    text-align:center;

                    cursor:pointer;margin:4px;background-color:#C0C0C0;}

#mybtn{width:80px;height:40px;}

</style>

</head>

<BODY>

<label></label>

<div id="content">

 <div id="te"><p id="sa"/></p> </div>

 <div class="main-content">

   <ul class="ulclass">

    <li>7</li>

    <li>8</li>

    <li>9</li>

    <li>+</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>-</li>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>*</li>

    <li>0</li>

    <li>.</li>

    <li>=</li>

    <li>/</li>

   </ul>

</div>

<input type="button" value="清除"id="mybtn"/>

</div>

<script type="text/javascript">

var lk=document.getElementById("sa");

var btn=document.getElementsByTagName("li")[0];

btn.onclick=function(){

lk.textContent+="7"; 

};

var btn=document.getElementsByTagName("li")[1];

btn.onclick=function(){

lk.textContent+="8";

};

var btn=document.getElementsByTagName("li")[2];

btn.onclick=function(){

lk.textContent+="9";

};

var btn=document.getElementsByTagName("li")[3];

btn.onclick=function(){

lk.textContent+="+";

};

var btn=document.getElementsByTagName("li")[4];

btn.onclick=function(){

lk.textContent+="4";

};

num5:var btn=document.getElementsByTagName("li")[5];

   btn.onclick=function(){

   lk.textContent+="5";

   };

mum6:var btn=document.getElementsByTagName("li")[6];

   btn.onclick=function(){

   lk.textContent+="6";

   };

var btn=document.getElementsByTagName("li")[7];

   btn.onclick=function(){

   lk.textContent+="-";

   };

var btn=document.getElementsByTagName("li")[8];

   btn.onclick=function(){

   lk.textContent+="1";

   };

var btn=document.getElementsByTagName("li")[9];

   btn.onclick=function(){

   lk.textContent+="2";

   };

var btn=document.getElementsByTagName("li")[10];

   btn.onclick=function(){

   lk.textContent+="3";

   };

var btn=document.getElementsByTagName("li")[11];

   btn.onclick=function(){

   lk.textContent+="*";

   };

var btn=document.getElementsByTagName("li")[15];

   btn.onclick=function(){

   lk.textContent+="/";

   };

var btn=document.getElementsByTagName("li")[12];

    btn.onclick=function(){

    lk.textContent+="0";

};

var btn=document.getElementsByTagName("li")[13];

    btn.onclick=function(){

    lk.textContent+=".";

};

result:var btn=document.getElementsByTagName("li")[14];

        btn.onclick=function(){

          lk.textContent=(lk.textContent+"=").toString()+eval(lk.textContent);

};

clear:var gg=document.getElementById('mybtn')

        gg.onclick=function(){

         lk.innerHTML="";

}

</script>

</body>

</html>

代码

我的第一个html计算器的更多相关文章

  1. C++程序设计语言(特别版) -- 一个桌面计算器

    前言 这里要介绍各种语句和表达式,将通过一个桌面计算器的程序做些事情,该计算器提供四种座位浮点数的中缀运算符的标准算术运算. 这个计算器由四个部分组成:一个分析器,一个输入函数,一个符号表和一个驱动程 ...

  2. 基于MFC的一个简单计算器

    写一个简单的计算器并不是什么很难的事,主要目的是要通过这个程序来学习和分析其中的核心算法.这个简易计算器的核心部分就是对输入的表达式的正确性判断与求值,其中包括对表达式的解析.中缀表达式转后缀表达式. ...

  3. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

  4. 如何使用Java AWT 创建一个简易计算器

    摘要:手把手教你使用 Java AWT 创建一个简易计算器. 本文分享自华为云社区<手把手教你使用 Java AWT 创建一个简易计算器>,作者:海拥 . 关于AWT AWT (抽象窗口工 ...

  5. Python之实现一个简易计算器

    自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...

  6. java中用swing做一个windows计算器

    目录 主函数 普通计数器 科学计算器 注意: @(java中用swing做一个windows计算器) 前言: 来看这篇教程估计都是java课程设计吧,现在已经没有公司很少使用swing组件了,java ...

  7. python实战：用70行代码写了一个山炮计算器！

    python实战训练:用70行代码写了个山炮计算器! 好了...好了...各位因为我是三年级而发牢骚的各位伙伴们,我第一次为大家插播了python的基础实战训练.这个,我是想给,那些python基础一 ...

  8. 用jQ实现一个简易计算器

    HTML和CSS结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  10. IOS做一个简单计算器

    //声明非原创 步骤: 1.打开Xcode,单机Creat a new Xcode project 2.左边选择ios下Application,右边选择single view Application ...

随机推荐

  1. andorid 控件 Bootstrap3.0风格的控件 精美UI控件库

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  2. Oracle DBlink的创建-查看与删除

    DBlink常用于在两个Oracle数据库之间相互连接,如手工同步数据时,DBLink是最方便快捷的手段之一. 1.创建DBLink语法:create public database link < ...

  3. linux进程间通信之共享内存篇

    本文是对http://www.cnblogs.com/andtt/articles/2136279.html中共享内存(上)的进一步阐释说说明 1 共享内存的实现原理 共享内存是linux进程间通讯的 ...

  4. 2014年1月24日 Oracle 连接查询与子查询

    1.乘积连接:   源表.源数据交叉链接,结果集数量为源数据之间的乘积 2.相等链接:   通过where关联几个数据源中的某一字段进行链接 3.自链接   自己链接自己 SSF A a1, A a2 ...

  5. iOS中的下载管理器(支持断点续传)

    在空闲时间自己编写了一个简单的iOS下载管理器.该管理器实现如下功能: 1.能够支持正常的下载,暂停,继续操作. 2.支持断点续传,实现暂停执行继续操作后,依然能正常将文件下载完成. 3.实现实时状态 ...

  6. Web服务器和动态语言如何交互--CGI&FastCGI&FPM浅谈

    一个用户的Request是如何经过Web服务器(Apache,Nginx,IIS,Light)与后端的动态语言(如PHP等)进行交互并将结果返回给用户的呢? 本文浅谈个人观点,可能有误,欢迎拍砖,共同 ...

  7. Raknet实现的简单服务器与客户端的交互

    1. 首先下载Raknet的源代码,我用的是4.0的,不是最新的,解压后编译DLL工程,编译完成后进入解压的根目录下,进入Lib文件夹下找到RakNet_DLL_Debug_Win32.dll,  R ...

  8. Leetcode算法刷题：第14题 Longest Common Prefix

    Longest Common Prefix 题目 给予一个列表,元素为字符串,写一个程序找出最长公共前缀 解题思路 先比较两个字符串,如果第一个字符不一样,则返回空值,比较完成后,用这个公共字符串和下 ...

  9. Django学习(四) Django提供的后台管理系统以及如何定义URL路由

    一旦你建立了模型Models,那么Django就可以为你创建一个专业的,可以提供给生成用的后台管理站点.这个站点可以提供给有权限的人进行已有模型Models数据的增删改查. 将新建的模型Models是 ...

  10. asp.net MVC4 +MVCpager 无刷新分页

    本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...