html+css+jsを使って電卓を実装する
HTML CSS JS を使用して電卓を実装し、計算を開始します
レンダリング:
コードは次のとおりです。コピーして使用します:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style>
/* 主体 */
.counter{
width: 396px;
height: 486px;
background-color: #F2F2F2;
border: 1px solid #C2C3C6;
margin: 50px auto;
}
/* 显示框 */
#box {
height: 70px;
width: 336px;
background-color: #323232;
border: none;
margin: 40px 25px 32px 25px;
font: 700 40px/70px "微软雅黑";
color: #ffffff;
padding-right: 10px;
}
/* 功能区 */
.funct {
padding: 0 20px;
position: relative;
}
/* 按钮样式 */
.funct input {
height: 40px;
width: 60px;
margin: 10px 10px;
font: 400 20px/40px "微软雅黑";
}
/* 清除按钮样式 */
.funct #res {
width: 150px;
}
/* + - = . 按钮浮动 */
#add, #reduce, #round, #sum {
position: absolute;
right: 0px;
bottom: 0px;
}
/* 减号位置 */
#reduce {
right: 30px;
top: 60px;
}
/* 加号位置 */
#add {
right: 30px;
top: 120px;
}
/* 等于号位置 */
#sum {
height: 100px;
right: 30px;
bottom: 0px;
}
/* 小数点位置 */
#round {
right: 120px;
bottom: 0px;
}
/* 0 */
#zero {
width: 150px;
}
/* 数字区 */
.numb {
width: 280px;
}
</style>
<script>
window.onload = function(){
// 数据容器
var left = 0; //被除数
var right = 0; //除数
var sum = 0; //和
var numb = 0; //此变量用来限制点的输入
// 获取id并返回
function $(id){
return document.getElementById(id);
}
// 运算函数
function operation(id){
if( $("box").value != "0"){
if(left == 0)
{
$("box").value = $("box").value + $(id).value;
left = parseFloat($("box").value);
}
}
//numb 转为number类型 让点可以再输入一次
numb = 0;
}
// 数字盘函数
function figure(id){
// 判断被除数是否有值
if(left == 0)
{
// 改变value默认值
if ($("box").value === "0" ) {
$("box").value = $(id).value;
}else{
$("box").value = $("box").value + $(id).value;
}
}else{
$("box").value = $("box").value + $(id).value;
var str = $("box").value;
var num = "";
// 获取第二次输入的数字
for (var i = 0; i < str.length; i++) {
// 判断加减乘除
if(str[i]== "+"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}else if(str[i]== "-"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "*"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "/"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
};
}
// 清空所有数据
if(sum != 0){
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = $(id).value;
}
}
// 数字键盘区----------------------------------------------------------开始
$("one").onclick = function(){
figure("one");
}
$("two").onclick = function(){
figure("two");
}
$("three").onclick = function(){
figure("three");
}
$("four").onclick = function(){
figure("four");
}
$("five").onclick = function(){
figure("five");
}
$("six").onclick = function(){
figure("six");
}
$("seven").onclick = function(){
figure("seven");
}
$("eight").onclick = function(){
figure("eight");
}
$("nine").onclick = function(){
figure("nine");
}
$("zero").onclick = function(){
figure("zero");
}
// 数字键盘区----------------------------------------------------------结束
//功能区-----------------------------------------------------------开始
// 加
$("add").onclick = function(){
operation("add");
}
//减
$("reduce").onclick = function(){
operation("reduce");
}
// 乘
$("ride").onclick = function(){
operation("ride");
}
// 除
$("division").onclick = function(){
operation("division");
}
// 点
$("round").onclick = function(){
// 限制点的输入
if(numb === 0 && sum == 0){ //numb值等于0 类型等于number
$("box").value = $("box").value + $("round").value;
numb = ($("box").value); //numb赋值为字符串
}
}
// 清除
$("res").onclick = function(){
if($("box").value != "0")
{
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = "0";
}
}
// 求和
$("sum").onclick = function(){
var symbol = "";
if(left != 0 && right != 0){
for (var i = 0; i < $("box").value.length; i ++ ) {
symbol = $("box").value[i];
if(symbol == "+"){
sum = left + right;
$("box").value = sum;
}else if(symbol == "-"){
sum = left - right;
$("box").value = sum;
}
else if(symbol == "*"){
sum = left * right;
$("box").value = sum;
}
else if(symbol == "/"){
sum = left / right;
$("box").value = sum;
}
};
}
}
}
// 功能区--------------------------------------------------------------------------结束
</script>
</head>
<body>
</div>
<div>
<input type="text" id="box" style="text-align:right" readOnly="true" value="0">
<div>
<input type="reset" id="res" value="C">
<input type="button" id="division" value="/">
<input type="button" id="ride" value="*">
<input type="button" id="add" value="+">
<input type="button" id="reduce" value="-">
<input type="button" id="round" value=".">
<input type="button" id="sum" value="=">
<div>
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="zero" value="0">
</div>
</div>
</div>
</body>
</html>以上がhtml+css+jsを使って電卓を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1384
52
84
11
28
99
電卓の ac は何のキーですか?
Feb 24, 2023 am 10:19 AM
電卓の ac キーは「オールクリア」キーです。ac の正式な英語名は「All Clear」で、「オールクリアキー」を意味します。ac キーを押すと、すべてのレジスタの値がクリアされます。数値入力中に入力後、最初に ac キーを押すと、メモリ内容を除くすべての値がクリアされます。
電卓の e とは何ですか
Oct 19, 2022 am 11:23 AM
電卓の e は 10 の累乗を表し、10 を底とする指数を意味します。たとえば、1.99714E13 は 19971400000000 に等しく、数値を 10 の n 乗倍した形式で表すことを科学表記法と呼びます。 : 桁数が大きいものや小さいものにマークを付けたり操作したりする場合、科学的記数法を使用すると、多くのスペースと時間を無駄にすることがなくなります。
win10の電卓を開く方法を教えます
Jul 12, 2023 pm 11:21 PM
win10 システムには多くの強力な機能があり、多くのネチズンがダウンロード、インストール、使用するようになっており、win10 電卓ツールなどの実用的なガジェットも数多くあります。一部のネチズンはまだ Win10 電卓の開き方がわからないので、Win10 電卓の開き方を教えましょう。方法 1: [スタート] メニューで検索する 1. Windows 10 システムのデスクトップで、[スタート/電卓] メニュー項目をクリックします。 2. Windows 10の電卓ウィンドウを開くことができます。方法 2: Cortana Search を開く 1. Windows 10 デスクトップで、タスクバーの左下隅にある [Cortana Search] アイコンをクリックします。 2. ポップアップメニューにキーワード「電卓」を入力して検索し、検索結果の電卓メニュー項目をクリックします。
記憶機能のない電卓とは何ですか？
Dec 29, 2020 am 10:59 AM
記憶機能のない電卓は関数電卓を指します。関数電卓は、べき乗、平方根、指数、対数、三角関数、統計などの演算を実行できる電子計算機の一種で、関数電卓とも呼ばれます。電卓は一般的に次のように構成されています。電卓、コントローラ、メモリ、キーボード、ディスプレイ、電源、および一部のオプションの周辺機器や電子アクセサリが含まれます。
PHP で書かれた効率的なフィボナッチ数列計算機
Mar 21, 2024 am 10:06 AM
効率的なフィボナッチ数列計算機: フィボナッチ数列の PHP 実装は、非常に古典的な数学の問題です。ルールは、各数値が前の 2 つの数値の合計に等しい、つまり F(n)=F(n -1)+F です。 (n-2)、ここで F(0)=0 および F(1)=1。フィボナッチ数列を計算する場合、再帰的に実装できますが、値が増加するにつれてパフォーマンスの問題が発生します。そこで、この記事ではPHPを使った効率的なフィボナッチの書き方を紹介します。
JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?
Oct 27, 2023 pm 02:51 PM
JavaScriptを使用して簡単な計算機能を実装するにはどうすればよいですか?電卓は日常生活でよく使用されるツールの 1 つで、簡単な数学演算を実行するために使用できます。今日は、JavaScript を使用して簡単な計算機能を実装します。この記事では、JavaScript でコードを記述して基本的な数学演算と電卓インターフェイスを実装する方法を説明します。まず、操作の結果を表示するためのテキストを含む HTML ファイルを作成する必要があります。
Mac システム電卓で通貨を換算する方法 - Mac システム電卓で通貨を換算する方法
Mar 18, 2024 pm 03:58 PM
皆さん、Mac システム電卓で通貨を換算する方法を知っていますか? 今日は Mac システム電卓で通貨を換算する方法を説明します。ご興味があれば、ぜひ一緒に見てください。お役に立てれば幸いです。ステップ 1: Mac システム電卓を開き、メニュー バーの「変換」をクリックします。ステップ 2: [変換] メニューで、[通貨] をクリックします。ステップ 3: 変換する通貨を選択した後、「変換」ボタンをクリックします。
電卓の ac は何のキーですか?
Aug 18, 2023 am 09:48 AM
電卓の「AC」キーは「オールクリア」を意味し、ACキーを押すと電卓の入力や操作がすべてクリアされ、電卓が初期状態にリセットされ、計算をやり直すのと同じになります。
