2. 程式人生 > >JavaScript和HTML實現的簡單計算機

JavaScript和HTML實現的簡單計算機

阿新 • • 發佈：2018-02-25
位數 contain ner height src 標簽 lap rac weight

代碼案例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript"> var result_1; //加法 function add() { var a = getFirstNumber(); var b = getTwiceNumber(); var re = Number(a) + Number(b);
 sendResult(re); } //減法 function subtract() { var a = getFirstNumber(); var b = getTwiceNumber(); var re = a - b; sendResult(re); } //乘法 function ride() { var a = getFirstNumber(); var b = getTwiceNumber(); var
 re = a * b; sendResult(re); } //除法 function devide() { var a = getFirstNumber(); var b = getTwiceNumber(); var re = a / b; sendResult(re); } //給p標簽傳值 function sendResult(result_1) { var num = document.getElementById("result") num.innerHTML = result_1;
 } //獲取第一位數字 function getFirstNumber() { var firstNumber = document.getElementById("first").value; return firstNumber; } //獲取第二位數字 function getTwiceNumber() { var twiceNumber = document.getElementById("twice").value; return twiceNumber; }</script></head><body> <p>簡單計算器:</p> <table border="1" style="position: center;"> <tr> <td>第一個數：</td> <td><input type="text" id="first" /></td> </tr> <tr> <td>第二個數：</td> <td><input type="text" id="twice" /></td> </tr> <tr> <td colspan="2">&nbsp; <button style="width: inherit" onclick="add()">+</button> &nbsp; <button style="width: inherit" onclick="subtract()">-</button> &nbsp; <button style="width: inherit" onclick="ride()">*</button> &nbsp; <button style="width: inherit" onclick="devide()">/</button> </td> </tr> <tr> <td colspan="2" rowspan="2"> <p id="result"></p> </td> </tr> </table>
</body></html>
技術分享圖片

JavaScript和HTML實現的簡單計算機

相關推薦

JavaScript和HTML實現的簡單計算機

位數 contain ner height src 標簽 lap rac weight 代碼案例<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ins

前端JAVASCRIPT和HTML總結

() fall 而且 分代 sin html標簽 cookie ajax技術 ani JAVASCRIPT 篇 0、基礎語法 Javascript基礎語法包括：變量定義、數據類型、循環、選擇、內置對象等。 數據類型有string,number,boolean,null,un

揹包問題的 javascript和java 實現

簡述： 一個揹包，總載重量限定 提供各種質量及相應價值的物品， 提供一個價值最優的裝包選擇 參考：  http://www.importnew.com/13072.html <!DOCTYPE html> <head> <

javascript單獨執行順序和javascript和html混合執行順序

一、單獨討論javascript的執行順序 1 只有原生的javascript，沒有jquery。     1.1在<head>裡面的JS誰寫在前面，誰就優先執行。     1.2在<bo

html實現簡單的計算功能與實時更新時間

簡單的計算器 實時更新時間 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>線上計算器</title> <s

android平臺下基於ffmpeg和ANativeWindow實現簡單的視訊播放器

音視訊實踐學習 android全平臺編譯ffmpeg以及x264與fdk-aac實踐 ubuntu下使用nginx和nginx-rtmp-module配置直播推流伺服器 android全平臺編譯ffmpeg合併為單個庫實踐 android-studio使用c

分別使用js和JQuery實現簡單的表格隔行變色以及高亮顯示

一、1.1隔行變色html 表格 使用<thead>和<tbody>標籤拆分表頭和內容 <table border="1" width="500" height="50" align="center" id="tb1"> <thead>

利用ES6中的Proxy和Reflect 實現簡單的雙向數據綁定

prope tlist lec ntb col lis pan pro ref 利用ES6中的Proxy (代理) 和 Reflect 實現一個簡單的雙向數據綁定demo。 好像vue3也把 obj.defineProperty() 換成了Proxy+Reflect。

js css+html實現簡單的日曆

(function(){ /* * 用於記錄日期，顯示的時候，根據dateObj中的日期的年月顯示 */ var dateObj = (function(){ var _date = new Date(); // 預設為當前系統時間 return { g

JavaScript和HTML事件處理程式屬性中的this的含義

HTML裡事件處理程式屬性中的this: HTML文件裡事件處理程式屬性中的this表示觸發此事件的元素。例如： <iframe id="iframe" src="{{url}}" width="{{iframewidth}}" height="{{iframehe

使用JavaScript和Python實現Oracle資料庫的儲存過程？

本文研究了多語言引擎（MLE）如何在GraalVM的幫助下在Oracle資料庫中使用JavaScript和Python，為資料密集型計算帶來巨大的生態系統。使用GraalVM，我們不僅可以快速將新語言引入Oracle資料庫，而且還可以輕鬆獲得高效能的推測JIT編譯器。它可用於為查詢的關鍵部分生成有效

(作業)使用autolayout和約束實現簡單的介面佈局

感覺好久沒有寫部落格了，最近博主在複習java web準備考試，順便為後面使用UIWebKit做鋪墊吧。 今天就用xcode中的stroyboard實現自動佈局，我們不用寫一句程式碼，就能實現一些基本的佈局。 第一套佈局 這兒有兩套佈局，我們先來看看簡

Spring 學習——基於Spring WebSocket 和STOMP實現簡單的聊天功能

本篇主要講解如何使用Spring websocket 和STOMP搭建一個簡單的聊天功能專案，裡面使用到的技術，如websocket和STOMP等會簡單介紹，不會太深，如果對相關介紹不是很瞭解的，請自行查閱相關知識。 本篇的專案主要是一個學習Spring we

新手學習日記-Javascript和Html 1：如何在html中呼叫Js函式

HTML組成網頁，CSS組織網頁，Javascript可以給網頁新增複雜操作。首先要明白，HTML是靜態的，要想實現複雜的可變的操作（比如函式，計算結果等）必須使用Javascript進行操作。Q.如何在Html中獲取Javascript函式的值HTML是靜態的，即使將Jav

前端js+html實現簡單驗證碼

前些日子接觸到一個專案，要求實現一個簡單的驗證碼，參考萬能的百度結合自己的想法實現了一個簡單的前端驗證碼，當然跟後臺的不能比安全性， 頁面部分： <div class="new-web-row

使用原生javascript和css實現圖片輪播效果

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>圖片輪播</title>

Python3下用tkinter和PIL實現簡單的顯示圖片

想做看圖工具的，必然要支援jpg、png等常見格式，但tkinter是個純粹的GUI庫，不像GTK、QT那樣大而全，所以只支援gif和ppm兩種格式，侷限很大，必須搭配影象處理庫，才能實現基本的看圖功能 在python生態系統裡，最常用的影象處理庫是PI

如何使用反射和註解實現簡單的依賴注入

Spring Bean 應該是Spring被使用最多的功能 ,通過註解/xml配置 ,可以簡化大量的依賴程式碼 ,同時也提高了效率 .在試用了Guice和閱讀了部分Spring BeanFactory的原始碼後 ,也瞭解了一部分依賴注入的原理 ,自己寫了一個

ImageButton加shape和selector實現簡單易懂的點選變色

在實際專案中經常會用到按鈕點選變色的效果,有很多種辦法,最近看到了一種新的寫法,比較簡單好理解 上程式碼! main.xml <RelativeLayout xmlns:android="ht

利用cookie， session 和Filter實現簡單的自動登陸

需求： 1.當用戶請求主頁面時如果沒有登陸轉發到登陸介面 2.將使用者資訊存入到session中，賬號密碼存入cookie。 3.利用Filter過濾全域性檢測cookie，呼叫service實現登陸。 密碼加密，登陸，註冊頁面不能自動登陸 j