一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - JavaScript實現簡易加法計算器

JavaScript實現簡易加法計算器

2022-02-22 16:06小小小青臺 js教程

這篇文章主要介紹了JavaScript實現簡易加法計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現加法計算器的具體代碼,供大家參考,具體內容如下

具體要求:

JavaScript實現簡易加法計算器

1.頁面布局:
2.還需要在點擊計算按鈕之后在頁面上顯示計算結果

具體實現:

?
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
<html>
  <head>
    <meta charset="utf-8">
    <title>計算器</title>
    <script>
      function myck(type){
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        if(type==1){
          // 計算操作
          var result = parseInt(num1.value) + parseInt(num2.value);
          alert(result);
          document.getElementById("resultDiv").innerText ="最終計算結果:"+
            result;
        }else if(type==2){
          if(confirm("是否正確清空?")){
            // 清空
            num1.value = "";
            num2.value = "";
            document.getElementById("resultDiv").innerText="";
          }
        }
      }
    </script>
  </head>
 
  <body>
    <div style="margin-top: 100px;margin-left: 500px;">
      <span style="font-size: 60px;">加法計算器</span>  
    </div>
    <div>
      <div class="innerDiv" style="margin-left: 550px;">
        數字1:<input id="num1" type="number" placeholder="請輸入數字1">
      </div>
    </div>
    <div>
      <div class="innerDiv" style="margin-left: 550px;">
      數字2:<input id="num2" type="number" placeholder="請輸入數字2">
     </div>
    </div>
    <div>
      <div style="margin-left: 600px;" class="innerDiv">
        <input type="button" onclick="myck(1)" value="計 算">
        <input type="button" onclick="myck(2)" value="清 空">
      </div>
    </div>
    <div id="resultDiv">
 
    </div>
  </body>
  <style>
    .innerDiv{
      margin-left: 420px;
      margin-top: 20px;
    }
  </style>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。

原文鏈接:https://blog.csdn.net/m0_48355416/article/details/115277569

延伸 · 閱讀

精彩推薦
  • js教程JavaScript實現雪花飄落效果實例

    JavaScript實現雪花飄落效果實例

    這篇文章主要為大家詳細介紹了JavaScript實現雪花飄落效果實例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    小蟲蟲~3932021-12-21
  • js教程詳解微信小程序軌跡回放實現及遇到的坑

    詳解微信小程序軌跡回放實現及遇到的坑

    這篇文章主要介紹了詳解微信小程序軌跡回放實現及遇到的坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要...

    Keen6162022-01-12
  • js教程一份不可多得的 TypeScript 學習筆記

    一份不可多得的 TypeScript 學習筆記

    本篇文章主要介紹TypeScript 中類的定義、類的繼承、類中成員修飾符等內容。...

    前端人4882022-02-21
  • js教程微信小程序實現文字滾動

    微信小程序實現文字滾動

    這篇文章主要為大家詳細介紹了微信小程序實現文字滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    huangzhin4272022-02-19
  • js教程提高JavaScript性能技巧,以獲得更快的網站

    提高JavaScript性能技巧,以獲得更快的網站

    在開發應用程序時,性能是最重要的問題之一,所有軟件開發人員都應該監控和改進應用程序每一層的性能。從數據庫到服務器端語言,出現性能問題的時...

    粵嵌教育7752022-01-11
  • js教程微信小程序實現下拉加載更多商品

    微信小程序實現下拉加載更多商品

    這篇文章主要為大家詳細介紹了微信小程序實現下拉加載更多商品,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    保護我方豆豆8212021-12-22
  • js教程11個Javascript小技巧幫你提升代碼質量(小結)

    11個Javascript小技巧幫你提升代碼質量(小結)

    這篇文章主要介紹了11個Javascript小技巧幫你提升代碼質量(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需...

    alanyf6122021-12-21
  • js教程微信小程序實現水平垂直滾動

    微信小程序實現水平垂直滾動

    這篇文章主要為大家詳細介紹了微信小程序實現水平垂直滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    火腿腸燒烤大賽冠軍4012022-02-19
主站蜘蛛池模板: 无码专区aaaaaa免费视频 | 亚洲国产欧美在线看片 | 91麻豆精品国产 | 含羞草传媒一天免费看下 | 私人影院在线播放 | 亚洲精品中文字幕久久久久久 | 香蕉视频在线观看网址 | 色综合伊人色综合网站中国 | 桥本有菜ssni-677在线观看 | 肉搏潘金莲三级18春 | 99视频在线看观免费 | 国产精品俺来也在线观看了 | 性色生活片在线观看 | 亚洲天堂精品视频 | 韩国三级在线高速影院 | 日韩一区二区三区在线 | 欧美日本一区视频免费 | 欧美色影视 | 国模一区二区三区视频一 | 久久中文字幕无线观看 | 射逼网站 | 99精品视频在线观看免费播放 | 皇上撞着太子妃的秘密小说 | 亚洲高清无码在线 视频 | 成人免费福利网站在线看 | 日本久久免费大片 | 亚洲一区二区三区免费视频 | 欧美精品国产一区二区三区 | 日本中年japanesebear | 6个老师的尿奴 | 91天堂一区二区 | 女人张开腿让男人做爽爽 | 好大好硬视频 | 日本高清免费不卡在线 | 亚洲人成综合在线播放 | 春意影院午夜爽爽爽免费 | 久久国产精品高清一区二区三区 | 色综合久久综合网欧美综合网 | 嗯啊视频在线 | 亚洲精品青青草原avav久久qv | 免费观看在线 |