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. QUARTZ CRON

    本文来自:http://www.blogjava.net/crazycy/archive/2013/06/06/400287.html 每次使用Quartz Cron的时候都要去查manual doc ...

  2. 关于MAC的pkg和mpkg的分别

    程序制作完毕后,在mac下通常的方法是要制作一个pkg的安装包,可是你会发现pkg和mpkg的文件出现的比較多,笔者也是经过了一定的试验和尝试,才了解到,pkg是单个文件的pkg,而mpkg事实上是多 ...

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

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

  4. Mongodb实用网址记录

    ISODate类型算出时间戳> ISODate("2012-04-16T16:00:00Z").valueOf() 1334592000000 然后根据得到的时间戳查询即可d ...

  5. Unique Binary Search Trees In JAVA

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  6. iOS 使用NJKWebViewProgress做webview进度条

    NJKWebViewProgress地址:https://github.com/ninjinkun/NJKWebViewProgress 导入头文件 #import "NJKWebViewP ...

  7. Lowest Common Ancestor of a Binary Search Tree、Lowest Common Ancestor of a Binary Search Tree

    1.Lowest Common Ancestor of a Binary Search Tree Total Accepted: 42225 Total Submissions: 111243 Dif ...

  8. AdapterView及其子类之一：基本原理（ListView、ListActivity类型）

    参考<疯狂android讲义>2.5节 1.AdapterView一般用于显示列表项,其内容由Adapter提供.调用Adapter的setAdapter(Adapter)方法设置Adap ...

  9. Leetcode算法刷题：第112题 Path Sum

    Path Sum 题目 给予一个二叉树,和一个值su,寻找是否有一个从根节点到叶节点的和为su,有则返回True,没有为False.比如: 5 / \ 4 8 / / \ 11 13 4 / \ \ ...

  10. px,dp,dip,sp,in,mm,pt详细分析

    px,dp,dip,sp,in,mm,pt详细分析 px   :(pixels),屏幕的像素点,不同的设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多. dip  :(devi ...