您好,登錄后才能下訂單哦!
小編給大家分享一下js如何實(shí)現(xiàn)網(wǎng)頁計(jì)算器,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
如何在利用HTML,css和js的知識(shí)制作一個(gè)簡(jiǎn)單的網(wǎng)頁計(jì)算器呢?
一個(gè)計(jì)算機(jī)中具備了:
計(jì)算機(jī)整體框
輸入框
輸入按鈕
計(jì)算機(jī)整體框:
/*設(shè)置div樣式*/ #showdiv{ border: solid 1px; border-radius: 5px; width: 350px; height: 400px; text-align: center; margin: auto;/*設(shè)置居中*/ margin-top: 50x; background-color: rgb(214, 219, 190); }
輸入框:
/*設(shè)置輸入框樣式*/ input[type=text]{ margin-top: 20px; width: 290px; height: 40px; font-size: 20px; }
輸入按鈕:
/*設(shè)置按鈕樣式*/ input[type=button]{ width: 60px; height: 60px; margin-top: 20px; margin-left: 5px; margin-right: 5px; font-size: 30px; font-weight: bolder; font-family: "楷書"; }
使用js代碼對(duì)執(zhí)行對(duì)應(yīng)業(yè)務(wù)邏輯操作:
<!--聲明js代碼--> <script> function test(btn){ //獲取button按鈕對(duì)象 var number = btn.value; //執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯 switch (number) { case "=": document.getElementById("input").value= eval(document.getElementById("input").value); break; case "c": document.getElementById("input").value=""; break; default: //將按鈕的值賦值給input輸入框 document.getElementById("input").value+=number; break; } } </script>
使用HTML對(duì)計(jì)算機(jī)進(jìn)行排版布局:
<body> <div id="showdiv"> <input type="text" id="input" readonly="readonly"><br> <input type="button" value="1" onclick="test(this)"> <input type="button" value="2" onclick="test(this)"> <input type="button" value="3" onclick="test(this)"> <input type="button" value="4" onclick="test(this)"><br> <input type="button" value="5" onclick="test(this)"> <input type="button" value="6" onclick="test(this)"> <input type="button" value="7" onclick="test(this)"> <input type="button" value="8" onclick="test(this)"><br> <input type="button" value="9" onclick="test(this)"> <input type="button" value="+" onclick="test(this)"> <input type="button" value="-" onclick="test(this)"> <input type="button" value="*" onclick="test(this)"><br> <input type="button" value="0" onclick="test(this)"> <input type="button" value="/" onclick="test(this)"> <input type="button" value="c" onclick="test(this)"> <input type="button" value="=" onclick="test(this)"> </div> </body>
總體代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*設(shè)置div樣式*/ #showdiv{ border: solid 1px; border-radius: 5px; width: 350px; height: 400px; text-align: center; margin: auto;/*設(shè)置居中*/ margin-top: 50x; background-color: rgb(214, 219, 190); } /*設(shè)置輸入框樣式*/ input[type=text]{ margin-top: 20px; width: 290px; height: 40px; font-size: 20px; } /*設(shè)置按鈕樣式*/ input[type=button]{ width: 60px; height: 60px; margin-top: 20px; margin-left: 5px; margin-right: 5px; font-size: 30px; font-weight: bolder; font-family: "楷書"; } </style> <!--聲明js代碼--> <script> function test(btn){ //獲取button按鈕對(duì)象 var number = btn.value; //執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯 switch (number) { case "=": document.getElementById("input").value= eval(document.getElementById("input").value); break; case "c": document.getElementById("input").value=""; break; default: //將按鈕的值賦值給input輸入框 document.getElementById("input").value+=number; break; } } </script> <title>Document</title> </head> <body> <div id="showdiv"> <input type="text" id="input" readonly="readonly"><br> <input type="button" value="1" onclick="test(this)"> <input type="button" value="2" onclick="test(this)"> <input type="button" value="3" onclick="test(this)"> <input type="button" value="4" onclick="test(this)"><br> <input type="button" value="5" onclick="test(this)"> <input type="button" value="6" onclick="test(this)"> <input type="button" value="7" onclick="test(this)"> <input type="button" value="8" onclick="test(this)"><br> <input type="button" value="9" onclick="test(this)"> <input type="button" value="+" onclick="test(this)"> <input type="button" value="-" onclick="test(this)"> <input type="button" value="*" onclick="test(this)"><br> <input type="button" value="0" onclick="test(this)"> <input type="button" value="/" onclick="test(this)"> <input type="button" value="c" onclick="test(this)"> <input type="button" value="=" onclick="test(this)"> </div> </body> </html>
實(shí)現(xiàn)效果:
以上是“js如何實(shí)現(xiàn)網(wǎng)頁計(jì)算器”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。