溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹javascript中怎么實現一個簡易的計算器，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
具體內容如下
1、先構思整個計算器的模式以及想要實現的功能，按模塊創建相應的p，在“head”中設置其樣式和布局。2、用“input”標簽創建text類型，置為輸出框；依次創建buttom類型，置為按鈕，內容為1、2、3……；創建“=”，并在input中對他進行點擊事件“οnclick=”result()””.3、添加script，利用var定義class里面的值,并賦值給一個新的變量，4、編寫for循環語句，執行代碼內容5、最后添加result函數，執行結果。
源代碼如下（自行設置style的值）：
<body><p class="contour"> <p class="screen"> <input class="text" type="text" value=''οnfοcus="this.blur();"> </p> <p class="click"> <p> <input class="bt t" type="button" value="1"> <input class="bt t" type="button" value='2'> <input class="bt t" type="button" value='3'> <input class="bt t" type="button" value='+'> </p> <p> <input class="bt t" type="button" value='4'> <input class="bt t" type="button" value='5'> <input class="bt t" type="button" value='6'> <input class="bt t" type="button" value='-'> </p> <p> <input class="bt t" type="button" value='7'> <input class="bt t" type="button" value='8'> <input class="bt t" type="button" value='9'> <input class="bt t" type="button" value='*'> </p> <p> <input class="bt t" type="button" value='#'> <input class="bt t" type="button" value='0'> <input id="result" class="t" type="button" value='=' onclick="result()"> <input class="bt t" type="button" value='/'> </p> </p></p> <script> var btnArr = document.getElementsByClassName("bt"); // var result=document.getElementById("result"); var text = document.getElementsByClassName("text")[0]; // console.log(btnArr) // 用js給某一個元素添加click事件 // btnArr[0].οnclick=function(){ // alert() // } // for循環添加click事件 // input的value指的是 input的值 var showNum='' //alert(btnArr[1].value); for(var i=0;i<btnArr.length;i++){ btnArr[i].οnclick=function(){ showNum =showNum+this.value; text.value = showNum; } } function result(){ text.value=eval(showNum)} </script></body>
關于javascript中怎么實現一個簡易的計算器就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
