学着做了一个简单的计算器！记录记录！哈哈

<!DOCTYPE html>

<html>

<head>

<title>简单的计算器</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　<style type="text/css">

　　　　   input{width:100%}

　　  </style>

</head>

<body>

　　　　 <script type="text/javascript">

　　　　　 function compute(obj)

　　　　　 {

　　　　　　　obj.expr.value=eval(obj.expr.value)

　　　　　 }

　　　　　var plus="+";

var minus="-";

var multiply="*";

var divide="/";

var decimal=".";

function enter(obj,string)

{

obj.expr.value+=string;

}

function cle(obj)

{

obj.expr.value='';

}

</script>

<form >

<table border=1>

<tr >

<td colspan="4"><input type="text" name="expr" size="30"  style="width:97%"></td>

</tr>

<tr>

<td><input type="button" value="7" onclick="enter(this.form,7)"></td>

<td><input type="button" value="8" onclick="enter(this.form,8)"></td>

<td><input type="button" value="9" onclick="enter(this.form,9)"></td>

<td><input type="button" value="/" onclick="enter(this.form,divide)"></td>

</tr>

<tr>

<td><input type="button" value="4" onclick="enter(this.form,4)"></td>

<td><input type="button" value="5" onclick="enter(this.form,5)"></td>

<td><input type="button" value="6" onclick="enter(this.form,6)"></td>

<td><input type="button" value="*" onclick="enter(this.form,multiply)"</td>

</tr>

<tr>

<td><input type="button" value="1" onclick="enter(this.form,1)"></td>

<td><input type="button" value="2" onclick="enter(this.form,2)"></td>

<td><input type="button" value="3" onclick="enter(this.form,3)"></td>

<td><input type="button" value="-" onclick="enter(this.form,minus)"></td>

</tr>

<tr>

<td colspan="2"><input type="button" value="0" onclick="enter(this.form,0)"></td>

<td><input type="button" value="." onclick="enter(this.form,decimal)"></td>

<td><input type="button" value="+" onclick="enter(this.form,plus)"></td>

</tr>

<tr>

<td colspan="2" ><input type="button" value="=" onclick="compute(this.form)" ></td>

<td colspan="2"><input type="button" value="AC" size=3 onclick="cle(this.form)"></td>

</tr>

</table>

</form>

</body>

</html>

js制作简单的计算器的更多相关文章

  1. JS——制作简单的网页计算器

    用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 用JavaScript制作简单的计算器

    <html > <head> <title>简单计算器</title> <style type="text/css"> ...

  3. 【前端】Vue.js实现简单价格计算器

    价格计算器 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> ...

  4. d3.js 制作简单的俄罗斯方块

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...

  5. d3.js 制作简单的贪吃蛇

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...

  6. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  7. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  8. 留念 C语言第一课简单的计算器制作

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

  9. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

随机推荐

  1. TurboDemo软件使用教程：视频编辑

    视频软件TurboDemo中不仅可以快速的捕捉屏幕,而且可以对视频进行编辑,本文来详细的了解一下这个步骤. 当你完整屏幕捕捉和录制后,点击系统托盘上的箭头或点击键盘上的“print screen”键之 ...

  2. 转 苹果企业级帐号进行ipa打包，分发，下载等流程

    1,企业帐号介绍(1)使用企业开发帐号,我们可以发布一个 ipa 放到网上,所有人(包括越狱及非越狱设备)都可以直接通过链接下载安装,而不需要通过 AppStore 下载,也不需要安装任何证书.(2) ...

  3. mha配置参数详解

    mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...

  4. 一个ubuntu phper的自我修养（杂记）

    ubuntu使用杂记 1.flatabulous安装使用. flatabulous是一个ubuntu图标主题. 使用它,必须得安装tweak插件. sudo add-apt-repository pp ...

  5. javascript的sort（）方法

    定义和用法: sort() 方法用于对数组的元素进行排序. 语法: 1 arrayObject.sort(sortby) 描述: sortby    可选.必须是函数.规定排序顺序  . 返回值: 对 ...

  6. Sprite（精灵）&& 三个特殊的层Layer

    用来作为以后复习使用. 1 #include "ScenceScend.h" CCScene* ScenceScend::scene() { CCScene* s = CCScen ...

  7. FPGA重要设计思想

    FPGA重要设计思想   1.速度和面积互换原则.以面积换速度可以实现很高的数据吞吐率,其实串/并转换.就是一种以面积换速度的思想 2.乒乓操作. 3.串/并转换的思想. 高速数据处理的重要技巧之一. ...

  8. xmemcached的使用

    转载 http://www.voidcn.com/blog/u010408365/article/p-4972896.html xmemcached主要特性 高性能 XMemcached同样是基于ja ...

  9. gulp 安装笔记

    1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...

  10. json提交数据到服务端

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #393939; backgr ...