ホームページ >ウェブフロントエンド >jsチュートリアル >HTML+CSS+JavaScriptを使った簡単な電卓の作り方
ページ関数の実現は JS から分離できないため、JavaScript はフロントエンド開発に不可欠な部分です。フロントエンド開発者として、JavaScript を使用して簡単な計算機を作成できますか?この記事では、HTML、CSS、JavaScript を使用して、足し算、引き算、掛け算、割り算の関数を実現できる簡単な計算機の作り方を説明します。一定の参考値があるので、興味のある方はぜひご覧ください。
単純な計算機を作成するには、多くの CSS 属性、HTML タグ、および JavaScript の知識が必要です。不明な場合は、PHP 中国語 Web サイトの関連記事を参照するか、 JavaScript ビデオ チュートリアル# を参照してください。 # # 、お役に立てば幸いです。
インスタンスの説明: HTML と CSS を使用してページを構築し、JavaScript を使用して加算、減算、乗算、除算の関数を実装します。クリックしてクリアすると、入力ボックスには値が表示されません。 =とすると計算結果が表示されます。具体的なコードは以下の通りです:<div class="center"> <h1>计算器</h1> <form name="calculator"> <input type="button" id="clear" class="btn other" value="C"> <input type="text" id="display"> <br> <input type="button" class="btn number" value="7" onclick="get(this.value);"> <input type="button" class="btn number" value="8" onclick="get(this.value);"> <input type="button" class="btn number" value="9" onclick="get(this.value);"> <input type="button" class="btn operator" value="+" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="4" onclick="get(this.value);"> <input type="button" class="btn number" value="5" onclick="get(this.value);"> <input type="button" class="btn number" value="6" onclick="get(this.value);"> <input type="button" class="btn operator" value="*" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="1" onclick="get(this.value);"> <input type="button" class="btn number" value="2" onclick="get(this.value);"> <input type="button" class="btn number" value="3" onclick="get(this.value);"> <input type="button" class="btn operator" value="-" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="0" onclick="get(this.value);"> <input type="button" class="btn operator" value="." onclick="get(this.value);"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <input type="button" class="btn other" value="=" onclick="calculates();"> </form> </div>CSS部分:
* { border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } .center { background-color: #fff; border-radius: 50%; height: 600px; margin: auto; width: 600px; } h1 { color: #495678; font-size: 30px; margin-top: 20px; padding-top: 50px; display: block; text-align: center; } form { background-color: #495678; margin: 40px auto; padding: 40px 0 30px 40px; width: 280px; } .btn { outline: none; cursor: pointer; font-size: 20px; height: 45px; margin: 5px 0 5px 10px; width: 45px; } .btn:first-child { margin: 5px 0 5px 10px; } .btn, #display, form { border-radius: 25px; } #display { outline: none; background-color: #98d1dc; color: #dededc; font-size: 20px; height: 47px; text-align: right; width: 165px; padding-right: 10px; margin-left: 10px; } .number { background-color: #72778b; color: #dededc; } .number:active { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } .operator { background-color: #dededc; color: #72778b; } .operator:active { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } .other { background-color: #e3844c; color: #dededc; } .other:active { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); }JavaScript部分:
/* limpa o display */ document.getElementById("clear").addEventListener("click", function() { document.getElementById("display").value = ""; }); /* recebe os valores */ function get(value) { document.getElementById("display").value += value; } /* calcula */ function calculates() { var result = 0; result = document.getElementById("display").value; document.getElementById("display").value = ""; document.getElementById("display").value = eval(result); };結果は図に示すとおりです。 上記では、HTML、CSS、JavaScript を使用して単純な計算機を作成するコードを共有しました。初心者には難しいかもしれませんが、基礎知識をしっかり学べば簡単に理解できると思いますので、この記事を参考にしていただければ幸いです。 【おすすめの関連チュートリアル】1.
JavaScript 中国語リファレンス マニュアル2.
CSS3 チュートリアル3.ブートストラップ チュートリアル
以上がHTML+CSS+JavaScriptを使った簡単な電卓の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。