zoukankan      html  css  js  c++  java
  • 利用function函数做一个简易计算器(getElementById)

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2         "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5     <title></title>
     6 
     7     <script>
     8 
     9         function add(){
    10             var first=document.getElementById("first");//获取的是这个ID所对应的input节点
    11             var first1=parseInt(first.value);//获得input节点的输入框的值
    12             var second=document.getElementById("second");
    13             var second1=parseInt(second.value);
    14             var result=document.getElementById("result");
    15             result.value=first1+second1;
    16 
    17         }
    18         function sub(){
    19             var first=document.getElementById("first");
    20             var first1=parseInt(first.value);
    21             var second=document.getElementById("second");
    22             var second1=parseInt(second.value);
    23             var result=document.getElementById("result");
    24             result.value=first1-second1;
    25         }
    26         function mul(){
    27             var first=document.getElementById("first");
    28             var first1=parseInt(first.value);
    29             var second=document.getElementById("second");
    30             var second1=parseInt(second.value);
    31             var result=document.getElementById("result");
    32             result.value=first1*second1;
    33         }
    34         function div(){
    35             var first=document.getElementById("first");
    36             var first1=parseInt(first.value);
    37             var second=document.getElementById("second");
    38             var second1=parseInt(second.value);
    39             var result=document.getElementById("result");
    40             result.value=first1/second1;
    41         }
    42 
    43 
    44     </script>
    45 </head>
    46 
    47 
    48 <body>
    49 
    50 第1个数:<input type="text" name="first" id="first"><br>
    51 第2个数:<input type="text" name="second" id="second"><br>
    52 <input type="button" value="+" id="+" onclick="add()">
    53 <input type="button" value="-" id="-" onclick="sub()">
    54 <input type="button" value="*" id="*" onclick="mul()">
    55 <input type="button" value="/" id="/" onclick="div()"><br>
    56 结果:<input type="text" name="result" id="result">
    57 </body>
    58 </html>

    效果展示:

  • 相关阅读:
    记录------敬畏生活
    不错的博客分享
    Python学习笔记(一) 字符串和编码
    OSPF(二)基础实验 ASBR--- 在OSPF中引入自治系统外部路由--- LSA4和LSA5
    OSPF(一)基本概念和基础实验
    LAMP--PHP实验(四)使用包含文件提高代码效率
    LAMP--PHP实验(三)在页面之间传送变量 及遇到问题解决
    LAMP--PHP实验(二)常量和变量
    LAMP--PHP实验(一)第一个PHP程序
    随机获取图片的API
  • 原文地址:https://www.cnblogs.com/ztt0918/p/8192465.html
Copyright © 2011-2022 走看看