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. Photoshop 批量处理图片

    不论什么你想反复进行的操作都能够通过创建 Photoshop 批处理程序来完毕.比如.你想批量改变图片的大小,就能够通过下面操作来实现. 1.打开随意一张图片,在动作面板中,点击新建button 2. ...

  2. MapReduce程序依赖的jar包

    难得想写个mapreduce程序.发现已经不记得须要加入那些jar包了,网上找了一会也没发现准确的答案.幸好对hadoop体系结构略知一二.迅速试出了写mapreduce程序须要的五个jar包. 不多 ...

  3. javascript 判断系统设备

    <script> function detectOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.pl ...

  4. 安装mysql时出错。无法初始化。 libstdc++.so.5

    ./bin/mysqld: error while loading shared libraries: libstdc++.so.5: cannot open shared object file: ...

  5. stagefright框架（五）-Video Rendering

    AwesomePlayer::onVideoEvent除了透過OMXCodec::read取得解碼後的資料外,還必須將這些資料(mVideoBuffer)傳給video renderer,以便畫到螢幕 ...

  6. 六步实现Spring.NET 与 NHibernate 的整合

    最近刚完成一个项目,其中对数据库的架构用到的是Spring.NET 与 NHibernate相结合的产物.对于这两项技术,我自己也不是太熟悉,不过好在网上有很多关于这方面的介绍文档,在这里就不多说了. ...

  7. 导出kettle数据转换设置

    在本地测试好的数据清洗配置,要转移到服务器上,就要用到导出数据转换设置. 一直是这使用是在导入设置的 时候总是提示不是kettle的文档格式.后来才发现这是资源库的配置,而不是数据转 换的配置. 导出 ...

  8. phonegap安卓环境下使用BarcodeScanner插件扫描二维码教程

    由于一直在使用phoneGap来开发安卓应用,而对于原生Java小白的我最近这几天一直陷入了如何使用phonegap的BarcodeScanner插件这件事情上,可以说查遍了百度和Google,虽然只 ...

  9. 数据库 count和sum区别

    最近备考软考,复习数据库时候,发现count和sum,貌似差不错.就仔细查了查. 表 人 id name number 1 贱人 3 2 好人 4 select count(number) from ...

  10. Android Studio导入GitHub

    方法一:引用开源项目的compile添加到gradle中http://www.zhihu.com/question/27027667 方法二:下载安装包引入:http://blog.csdn.net/ ...