HTML和JS实现简单的计算器


本文摘自PHP中文网,作者小云云,侵删。

HTML和JS实现计算器功能的也是很容易的,本文主要和大家分享HTML和JS实现简单的计算器,希望能帮助到大家。

下面是代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

   <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="untitled.css">

</head>

<script type="text/javascript">

        var result="";

          function jisuan(num){

      if(num=="="){

  document.form1.text.value=eval(result);

  }else{

  result=result+num;

  document.form1.text.value=result;

  }

  }

</script>

<body>

<p class="box">

<form action="" class="form1" name="form1">

      <p class="header">

         <input type="text" id="text" name="text" class="text"/>

         

          </p>

          <p class="nav">

     <table class="table">

         <tr>

         <td>  <input id="1" style="height:55px; width:55px;" type="button" value="1" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="2" style="height:55px; width:55px;" type="button" value="2" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="3" style="height:55px; width:55px;" type="button" value="3" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="+" style="height:55px; width:55px;" type="button" value="+" onClick="jisuan(this.id)"/> </td>

         </tr>

         <tr>

         <td>  <input id="4" style="height:55px; width:55px;" type="button" value="4" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="5" style="height:55px; width:55px;" type="button" value="5" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="6" style="height:55px; width:55px;" type="button" value="6" onClick="jisuan(this.id)"/> </td>

          <td>  <input id="-" style="height:55px; width:55px;" type="button" value="-" onClick="jisuan(this.id)"/> </td>

         </tr>

         <tr>

         <td>  <input id="7" style="height:55px; width:55px;" type="button" value="7" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="8" style="height:55px; width:55px;" type="button" value="8" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="9" style="height:55px; width:55px;" type="button" value="9" onClick="jisuan(this.id)"/> </td>

          <td>  <input id="*" style="height:55px; width:55px;" type="button" value="*" onClick="jisuan(this.id)"/> </td>

         </tr>

          <tr>

         <td>  <input id="/" style="height:55px; width:55px;" type="button" value="/" onClick="jisuan(this.id)"/> </td>

         <td>  <input id="0" style="height:55px; width:55px;" type="button" value="0" onClick="jisuan(this.id)"/> </td>

          <td>  <input id="." style="height:55px; width:55px;" type="button" value="." onClick="jisuan(this.id)"/></td>

          <td>  <input id="=" style="height:55px; width:55px;" type="button" value="=" onClick="jisuan(this.id)"/> </td>

         </tr>

         </table>

         

          

     </p>

   </form>

 </p>

</body>

</html>

相关推荐:
HTML怎样实现简单计算器

js实现简单四则运算计算器功能

JS实现的简单四则运算计算器功能示例

以上就是HTML和JS实现简单的计算器的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

vue.js是基于javascript的吗?

javascript深度优先遍历(dfs)和广度优先遍历(bfs)算法的介绍

html img标签属性是什么?图像标签img详解

javascript 构造函数和 "new" 操作符详解

js和javascript有区别吗

html input标签的属性有哪些

如何用html给图片加边框

html怎样重定向连接

使用html5的canvas和javascript创建一个绘图程序的示例代码

html怎么设置图片长度

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...