Rumah hujung hadapan web tutorial js javascript写的简单的计算器

javascript写的简单的计算器

Feb 04, 2017 pm 02:00 PM
kalkulator

最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面:

javascript写的简单的计算器

界面就是这样了,但是功能如何呢?

现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算。如果发生被除数为零的错误,下面会给出提示,就像这样:

javascript写的简单的计算器

自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习。如果有高手看出里面的疏漏、错误等望不吝赐教,给予指点。

下面贴上代码,希望里面的注释足够多了。
js部分: 

var num=0,result=0,numshow="0"; 
var operate=0; //判断输入状态的标志 
var calcul=0; //判断计算状态的标志 
var quit=0; //防止重复按键的标志 
function command(num){ 
var str=String(document.calculator.numScreen.value); //获得当前显示数据 
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0",且状态为0,则返回当前值,否则返回空值; 
str=str + String(num); //给当前值追加字符 
document.calculator.numScreen.value=str; //刷新显示 
operate=0; //重置输入状态 
quit=0; //重置防止重复按键的标志 
} 
function dzero(){ 
var str=String(document.calculator.numScreen.value); 
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0",且状态为0,则返回当str+"00",否则返回"0"; 
document.calculator.numScreen.value=str; 
operate=0; 
} 
function dot(){ 
var str=String(document.calculator.numScreen.value); 
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0",且状态为0,则返回当前值,否则返回"0"; 
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号 
if(str.substr(i,1)==".") return false; //如果有则不再插入 
} 
str=str + "."; 
document.calculator.numScreen.value=str; 
operate=0; 
} 
function del(){ //退格 
var str=String(document.calculator.numScreen.value); 
str=(str!="0") ? str : ""; 
str=str.substr(0,str.length-1); 
str=(str!="") ? str : "0"; 
document.calculator.numScreen.value=str; 
} 
function clearscreen(){ //清除数据 
num=0; 
result=0; 
numshow="0"; 
document.calculator.numScreen.value="0"; 
} 
function plus(){ //加法 
calculate(); //调用计算函数 
operate=1; //更改输入状态 
calcul=1; //更改计算状态为加 
} 
function minus(){ //减法 
calculate(); 
operate=1; 
calcul=2; 
} 
function times(){ //乘法 
calculate(); 
operate=1; 
calcul=3; 
} 
function divide(){ //除法 
calculate(); 
operate=1; 
calcul=4; 
} 
function persent(){ //求余 
calculate(); 
operate=1; 
calcul=5; 
} 
function equal(){ 
calculate(); //等于 
operate=1; 
num=0; 
result=0; 
numshow="0"; 
} 
// 
function calculate(){ 
numshow=Number(document.calculator.numScreen.value); 
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态 
switch(calcul){ //判断要输入状态 
case 1:result=num+numshow;break; //计算"+" 
case 2:result=num-numshow;break; //计算"-" 
case 3:result=num*numshow;break; 
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零!"; setTimeout(clearnote,4000)} break; 
case 5:result=num%numshow;break; 
} 
quit=1; //避免重复按键 
} 
else{ 
result=numshow; 
} 
numshow=String(result); 
document.calculator.numScreen.value=numshow; 
num=result; //存储当前值 
} 
function clearnote(){ //清空提示 
document.getElementById("note").innerHTML=""; 
}
Salin selepas log masuk

html部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>写给新手:js表单操作(四) 简单计算器(二)</title> 
<style type="text/css"> 
body { 
font-size:12px; 
font-family:Arial, Georgia, "Times New Roman", Times, serif; 
color:#555; 
text-align:center; 
background-color:#e2e2e2; 
} 
h6{ 
margin:0; 
font-size:12px; 
} 
#calculator { 
width:240px; 
height:auto; 
overflow:hidden; 
margin:10px auto; 
border:#fff 1px solid; 
padding-bottom:10px; 
background-color:#f2f2f2; 
} 
#calculator div { 
clear:both; 
} 
#calculator ul{ 
padding:0; 
margin:5px 14px; 
border:#fff 1px solid; 
height:auto; 
overflow:hidden 
} 
#calculator li{ 
list-style:none; 
float:left; 
width:32px; 
height:32px; 
margin:5px; 
display:inline; 
line-height:32px; 
font-size:14px; 
background-color:#eaeaea; 
} 
#calculator li.tool{ 
background-color:#e2e2e2; 
} 
#calculator li:hover{ 
background-color:#f9f9f9; 
cursor:pointer; 
} 
#calculator li:active{ 
background-color:#fc0; 
cursor:pointer; 
} 
#calculator li.tool:active{ 
background-color:#d8e8ff; 
cursor:pointer; 
} 
#calcu-head { 
text-align:left; 
padding:10px 15px 5px; 
} 
span.imyeah { 
float:right; 
color:#ccc; 
} 
span.imyeah a{ 
color:#ccc; 
} 
.screen{ 
width:200px; 
height:24px; 
line-height:24px; 
padding:4px; 
border:#e6e6e6 1px solid; 
border-bottom:#f2f2f2 1px solid; 
border-right:#f2f2f2 1px solid; 
margin:10px auto; 
direction:ltr; 
text-align:right; 
font-size:16px; 
color:#999; 
} 
#calcu-foot{ 
text-align:left; 
padding:10px 15px 5px; 
height:auto; 
overflow:hidden; 
} 
span#note{ 
float:left; 
width:210px; 
height:auto; 
overflow:hidden; 
color:red; 
} 
span.welcome{ 
clear:both; 
color:#999; 
} 
span.welcome a{ 
float:right; 
color:#999; 
} 
</style> 
<script language="javascript"> 
//此处插入上面的js代码 
</script> 
</head> 
<body> 
<div id="calculator"> 
<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I&#39;m Yeah!</a></span><h6>简单的计算器</h6></div> 
<form name="calculator" action="" method="get"> 
<div id="calcu-screen"> 
<!--配置显示窗口,使用onfocus="this.blur();"避免键盘输入--> 
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" /> 
</div> 
<div id="calcu-btn"> 
<ul> <!--配置按钮--> 
<li onclick="command(7)">7</li> 
<li onclick="command(8)">8</li> 
<li onclick="command(9)">9</li> 
<li class="tool" onclick="del()">←</li> 
<li class="tool" onclick="clearscreen()">C</li> 
<li onclick="command(4)">4</li> 
<li onclick="command(5)">5</li> 
<li onclick="command(6)">6</li> 
<li class="tool" onclick="times()">×</li> 
<li class="tool" onclick="divide()">÷</li> 
<li onclick="command(1)">1</li> 
<li onclick="command(2)">2</li> 
<li onclick="command(3)">3</li> 
<li class="tool" onclick="plus()">+</li> 
<li class="tool" onclick="minus()">-</li> 
<li onclick="command(0)">0</li> 
<li onclick="dzero()">00</li> 
<li onclick="dot()">.</li> 
<li class="tool" onclick="persent()">%</li> 
<li class="tool" onclick="equal()">=</li> 
</ul> 
</div> 
<div id="calcu-foot"> 
<span id="note"></span> 
<span class="welcome">欢迎使用javascript计算器!<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span> 
</div> 
</form> 
</div> 
</body> 
</html>
Salin selepas log masuk

更多javascript写的简单的计算器相关文章请关注PHP中文网!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah kunci ac pada kalkulator? Apakah kunci ac pada kalkulator? Feb 24, 2023 am 10:19 AM

Ac pada kalkulator ialah kekunci "all clear" Nama penuh bahasa Inggeris ac ialah "All Clear", yang bermaksud "all clear key" bermaksud mengosongkan nilai dalam semua register; , tekan pertama Menekan kekunci ac akan mengosongkan semua nilai kecuali kandungan memori.

Apakah e dalam kalkulator Apakah e dalam kalkulator Oct 19, 2022 am 11:23 AM

E dalam kalkulator mewakili kuasa 10, yang bermaksud eksponen dengan asas 10. Contohnya, 1.99714E13 bersamaan dengan 19971400000000 menyatakan nombor dalam bentuk darab dengan kuasa ke-10 dipanggil tatatanda saintifik : Apabila kita ingin menandakan atau mengendalikan sesuatu yang lebih besar atau lebih kecil dengan bilangan digit yang banyak, kita boleh menggunakan tatatanda saintifik untuk mengelakkan pembaziran banyak ruang dan masa.

Ajar anda cara membuka kalkulator win10 Ajar anda cara membuka kalkulator win10 Jul 12, 2023 pm 11:21 PM

Sistem win10 mempunyai banyak fungsi yang berkuasa, yang menarik ramai netizen untuk memuat turun, memasang dan menggunakannya Terdapat juga banyak alat praktikal, seperti alat kalkulator win10. Sesetengah netizen masih tidak tahu cara membuka kalkulator Win10. Biar saya ajar anda cara membuka kalkulator Win10. Kaedah 1: Cari dalam menu Mula 1. Pada desktop sistem Windows 10, klik item menu "Mula/Kalkulator". 2. Anda boleh membuka tetingkap kalkulator Windows 10. Kaedah 2: Buka Carian Cortana 1. Pada desktop Windows 10, klik ikon "Carian Cortana" di penjuru kiri sebelah bawah bar tugas. 2. Masukkan kata kunci "kalkulator" dalam menu pop timbul untuk mencari, dan klik item menu kalkulator dalam hasil carian.

无存储功能的计算器指的是什么 无存储功能的计算器指的是什么 Dec 29, 2020 am 10:59 AM

无存储功能的计算器指的是科学型计算器;科学型计算器是电子计算器的一种,可进行乘方、开方、指数、对数、三角函数、统计等方面的运算,又称函数计算器;计算器一般由运算器、控制器、存储器、键盘、显示器、电源和一些可选外围设备及电子配件组成。

Kalkulator jujukan Fibonacci yang cekap ditulis dalam PHP Kalkulator jujukan Fibonacci yang cekap ditulis dalam PHP Mar 21, 2024 am 10:06 AM

Kalkulator jujukan Fibonacci yang cekap: Pelaksanaan PHP jujukan Fibonacci ialah masalah matematik yang sangat klasik Peraturannya ialah setiap nombor adalah sama dengan jumlah dua nombor sebelumnya, iaitu, F(n)=F(n -1)+F. (n-2), di mana F(0)=0 dan F(1)=1. Apabila mengira jujukan Fibonacci, ia boleh dilaksanakan secara rekursif, tetapi masalah prestasi akan berlaku apabila nilai meningkat. Oleh itu, artikel ini akan memperkenalkan cara menulis Fibonacci yang cekap menggunakan PHP

Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript? Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript? Oct 27, 2023 pm 02:51 PM

Bagaimana untuk melaksanakan fungsi kalkulator mudah menggunakan JavaScript? Kalkulator adalah salah satu alat yang biasa digunakan dalam kehidupan seharian kita. Ia boleh digunakan untuk melaksanakan operasi matematik yang mudah. Hari ini, kami akan menggunakan JavaScript untuk melaksanakan fungsi kalkulator mudah. Dalam artikel ini, saya akan menunjukkan kepada anda cara menulis kod dalam JavaScript untuk melaksanakan operasi matematik asas dan antara muka kalkulator. Pertama, kita perlu mencipta fail HTML yang mengandungi teks untuk memaparkan hasil operasi.

Bagaimana untuk menukar mata wang pada kalkulator sistem Mac - Bagaimana untuk menukar mata wang pada kalkulator sistem Mac Bagaimana untuk menukar mata wang pada kalkulator sistem Mac - Bagaimana untuk menukar mata wang pada kalkulator sistem Mac Mar 18, 2024 pm 03:58 PM

Rakan-rakan, adakah anda tahu cara menukar mata wang pada kalkulator sistem Mac Hari ini saya akan menerangkan cara menukar mata wang pada kalkulator sistem Mac Jika anda berminat, sila datang dan lihat dengan saya. Langkah 1: Buka kalkulator sistem Mac, klik Tukar pada bar menu. Langkah 2: Dalam menu Penukaran, klik Mata Wang. Langkah 3: Selepas memilih mata wang untuk ditukar, klik butang Tukar.

Apakah kunci ac pada kalkulator? Apakah kunci ac pada kalkulator? Aug 18, 2023 am 09:48 AM

Kekunci "AC" pada kalkulator bermaksud "All Clear". Menekan kekunci AC akan mengosongkan semua input dan operasi dalam kalkulator dan menetapkan semula kalkulator kepada keadaan awalnya, yang sama dengan memulakan semula pengiraan.

See all articles