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. Linux 下mysql修改数据库存放目录方法和可能遇到的问题

    MySQL版本:5.6.23-enterprise-commercial-advanced ,使用rpm安装linux:Red Hat Enterprise Linux Server release ...

  2. .net 时间操作[摘抄]

    .Net时间运算 - DateTime类,TimeSpan类http://www.cnblogs.com/kissdodog/archive/2013/03/02/2939927.html 时间戳转换 ...

  3. MVC之MVCSQO方法查询、排序、分页、投影

  4. IOS--工作总结－－post上传文件（以流的方式上传）

    1.添加协议 <NSURLConnectionDelegate> 2.创建 @property (nonatomic,retain) NSURLConnection* aSynConnec ...

  5. $(document).ready()与window.onload的区别（转发）

    1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.2.编写个数不同wind ...

  6. spring 配置和实例

    Spring 是一个开源框架.Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.Spring 是一个 IOC(DI) ...

  7. JavaMail发送简单邮件

    非常简单的发送邮件实现,网上有很多啦,但还是自己写写记录下吧. package cn.jmail.test; import java.util.Properties; import javax.mai ...

  8. 记微信开发(有道翻译api)

    记微信开发(有道翻译api) 记微信开发(有道翻译api) 效果: 有道翻译api申请: 地址:http://fanyi.youdao.com/openapi code: <?php/** * ...

  9. struts2开发经验小结(method="{1}"等)

    这里的{1}表示接收前面action里通过通配符传来的值,例如你配置的是<action name="*Crud" class="example.Crud" ...

  10. 在Struts2中使用poi进行excel操作下载的时候报getOutputStream() has already been called for this response 错误 [转]

    在项目中用到了poi这个开源的操作excel文件的jar. 项目中用到struts2容器管理servlet.不是单纯的直接用servlet.         workbook.write(os);   ...