今天繼續學習JavaScript，視頻講的確實挺差勁的。還是只能跟著W3School自己慢慢摸索著弄了。自己百度了一下，參考了一個大佬寫的一個簡單的計算器代碼。代碼能跑通，但是做出來的樣子實在是感覺太丑了。做完以後自己又把樣式重新寫了一遍。結果就變成這樣的了。下面就是今天的代碼：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>JSNote1</title>

 <style>　　

     body{

         margin: 10%;

         padding: 2%;

     }

     .tab1{

         margin-left: 20%;

         margin-right: 20;

         width: 60%;

         padding: 2%;

         color: #00F84A;

         background-color: #1D3F39;

         text-align: center;

         border: 2px solid #0200FF;

         border-radius: 25px;

         box-shadow: 2px 2px 0 3px #424242;

     }

     .tabbt1{

         width: 50px;

         height: 50px;

         border-radius: 50%;

         color: #00FF8C;

         background-color: #673ECB;

         font-size: 25px;

     }

     th,td,tr{

         width: 25%;

     }

     .input1{

         margin: 1%;

         padding: 3%;

         width: 80%;

         font-size: 20px;

         color: #FF1801;

         border-radius: 5px;

         box-shadow: 1px 1px 0 2px #424242;

     }

     </style>

 </head>

 <body>

 <p>用JS做一個簡單的網頁計算器</p>

 <!--

     需求,做一個可以輸入兩個數值,讓這兩個數值可以做四則運算的計算器

     步驟,1,做script方法

         2,做一個表格

         3,設計表格樣式

         4,用表格内的元素調用script中的方法

 -->

     <script>

 //        定義相加的方法

         function sum(){

 //            獲取第一個表格數值,默認值為0

             var def1 = 0;

             n1 = Number(document.getElementById("tab1").value);

 //            獲取第二個表格數值,默認值為0

             var def2 = 0;

             n2 = Number(document.getElementById("tab2").value);

 //            定義加法

             sum = n1+n2;

 //            將結果輸出,用一個變量result接收

             document.getElementById("result").value=sum;

         }

 //        定義相減的方法

         function minus(){

             var min=0;

             min=n1-n2;

             document.getElementById("result").value=min;

         }

 //        定義乘法

         function multiply(){

             var mul=0;

             mul=n1*n2;

             document.getElementById("result").value=mul;

         }

 //        定義除法

         function division(){

             var divi=0;

             divi=n1/n2;

             document.getElementById("result").value=divi;

         }

     </script>

     <table class="tab1">

         <tr>

             <th colspan="4">這是一個JS代碼寫的計算器</th>

         </tr>

         <tr>

             <td colspan="4"><input type="text" placeholder="請輸入第一個數字" id="tab1" class="input1"></td>

         </tr>

         <tr>

             <td colspan="4"><input type="text" placeholder="請輸入第二個數字" id="tab2" class="input1"></td>

         </tr>

         <tr>

             <td><input type="submit" value="+" onClick="sum()" class="tabbt1"></td>

             <td><input type="submit" value="-" onClick="minus()" class="tabbt1"></td>

             <td><input type="submit" value="*" onClick="multiply()" class="tabbt1"></td>

             <td><input type="submit" value="/" onClick="division()" class="tabbt1"></td>

         </tr>

         <tr>

             <td>Result結果</td>

             <td colspan="3"><input type="text" id="result" class="input1"></td>

         </tr>

     </table>

 </body>

 </html>

用JavaScript做一個簡單的計算器的更多相关文章

  1. jQuery無刷新上傳之uploadify簡單試用

    先簡單的侃兩句:貌似已經有兩個月的時間沒有寫過文章了,不過仍會像以前那样每天至少有一至兩個小時是泡在园子裏看各位大神的文章.前些天在研究“ajax無刷新上傳”方面的一些插件,用SWFUpload實現了 ...

  2. 華氏溫度轉化為攝氏溫度的簡單JavaScript代碼

    今天,跟著W3School學到了"JavaScript函數",代碼都挺簡單的,在運算符調用函數的地方寫了一個小程序.原碼程序是這樣的: <!DOCTYPE html> ...

  3. [Xamarin] 簡單實作ListActivity （转帖）

    但是文中案例因為是用事先設好的Layout 但是如果需要被選擇的東西很多時該怎麼辦 我們討論一下,如何製作很簡單的List . 首先我們得先參考一下再android 思維下要製作一個List 需要的架 ...

  4. [Xamarin] 簡單使用Fragment 靜態篇 （转帖）

    新的Android 開發,非常會使用到Fragment,不過官方範例有點小複雜,對初學者來說有點難消化,所以就記錄一下心得,這邊部落格將使用靜態的方法使用Fragment,Fragment 有自己的生 ...

  5. [Xamarin] 簡單使用AlertDialog （转帖）

    這東西跟Toast 很像,有方便提示的作用 像是Windows 上面的MessageBox 或是 Javascript 的 Alert 會先阻斷使用者並且下一個決定 很簡單我就不贅述,基本上透過 Al ...

  6. 转：[ASP.NET]重構之路系列v4 – 簡單使用interface之『你也會IoC』

    前言 上次v3版本,我們將Entity, Service, Dao, Utility都放到了類別庫裡面,讓我們可以輕鬆的在不同專案中用同一份組件.雖然文章沒有獲得太多的讚賞,不過相信那一定是太多人會這 ...

  7. COB(Chip On Board)的製程簡單介紹

    前面提及 COB 的生產與 IC 的封裝製程幾乎是一致的,除了把 leadframe 改成了 PCB,把封膠由 molding 改成 dispensing,少了 triming & marki ...

  8. 【转】簡單講講 USB Human Interface Device

    原地址http://213style.blogspot.com/2013/09/usb-human-interface-device.html 恩,發本文的原因是看到了以前畢業的朋友在旁邊的對話框問了 ...

  9. HTML Agility Pack：簡單好用的快速 HTML Parser

    HTML Agility Pack:簡單好用的快速 HTML Parser Codeplex 軟體套件(Package)資訊 套件名稱 HTML Agility Pack 作者 Simon Mouri ...

随机推荐

  1. ajax 异步长连接遭遇堵塞，“排序执行请求”的问题解决

    今天开发一个网页聊天程序,利用AJAX保持着一个长连接监听新的聊天信息,之后又调用了另外一个AJAX来发言,于是就发生了一个AJAX线程被阻塞的问题. 在未监听到新的聊天信息的之前,发言用的AJAX就 ...

  2. requirejs教程（一）：基本用法

    介绍 RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使 ...

  3. Qt打开外部程序和文件夹需要注意的细节（注意QProcess的空格问题，以及打开本地文件时，需要QUrl::fromLocalFile才可以）

    下午写程序中遇到几个小细节,需要在这里记录一下. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 QProcess *process = new QProcess(this ...

  4. Win10版《芒果TV》全平台直播第89届奥斯卡颁奖典礼,特设第二演播室带来一手资讯

    芒果TV为所有中国影迷们带来的:今年的奥斯卡直播与往年格外不同,为了让网友们观看这场盛典得到多维度体验,不管是来看热闹的还是看门道的都看得开心尽兴,芒果TV特设第二演播室,为大家带来第一手新鲜热辣的现 ...

  5. WPF修改窗体标题栏的颜色

    WPF程序通常情况下没办法修改窗体标题栏的样式,包括标题栏的背景颜色. 不过借助一个叫Fluent.Ribbon的第三方控件,貌似可以修改标题栏的背景颜色. 可以通过NuGet来安装这个控件:Inst ...

  6. Win10自带应用不喜欢？一条命令全部卸载

    与Win8/Win8.1一样,Win10中继续内置了应用商店,所不同的是Windows10中已升级为通用应用商店,具有跨平台特性.可能有的朋友仍不喜欢使用Modern应用,因为传统桌面应用几乎能够满足 ...

  7. Android零基础入门第67节：RecyclerView数据动态更新

    列表的数据往往会跟随业务逻辑不断刷新,所呈现出来的数据需要动态更新,那么RecyclerView是如何动态更新数据的呢? 之前在学习ListView的时候如果数据改变,需要调用notifyDataSe ...

  8. Linux数据流的重定向

    >覆盖内容:>>追加内容:<和>的区别在于重定向方向不一致,>表示重定向从左到右:>>和<<类似 简单的重定向 0 /dev/stdin 标 ...

  9. GetParent、SetParent、MoveWindow - 获取、指定父窗口和移动窗口，IsChild - 判断两个窗口是不是父子关系

    提示: SetParent 应该 Windows.SetParent, 因为 TForm 的父类有同名方法. //声明: {获取父窗口句柄} GetParent(hWnd: HWND): HWND; ...

  10. Qt+QZXing编写识别二维码的程序

    本人最近在用Qt编写程序,需要用编写二维码识别功能.在网上搜寻一番,找到了QZXing.配置过程中确实出了一大把汗,这里我写这篇文章记录配置方法,替后人省一把汗吧!我的开发环境:MSVC2010 + ...