JavaScript制作簡(jiǎn)單計(jì)算器功能

更新時(shí)間：2022年07月29日 10:35:12 作者：今天我學(xué)習(xí)

這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)單計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript制作簡(jiǎn)單計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

1. 任務(wù)要求

1）掌握數(shù)據(jù)的類(lèi)型轉(zhuǎn)換

2）學(xué)會(huì)獲取文本框控件的數(shù)據(jù)以及給相應(yīng)控件賦值

3）掌握有參函數(shù)的定義

4）學(xué)會(huì)使用數(shù)值判斷函數(shù)

5）學(xué)會(huì)使用eval()方法編譯字符串算式

2. 需求說(shuō)明

完成如下圖所示的計(jì)算器，在頁(yè)面單擊數(shù)字和運(yùn)算符能實(shí)現(xiàn)相應(yīng)運(yùn)算，單擊AC可以實(shí)現(xiàn)清除屏幕內(nèi)容。

3. 實(shí)現(xiàn)思路

1）在TNumber函數(shù)里實(shí)現(xiàn)對(duì)輸入的數(shù)據(jù)進(jìn)行累加，以便后面計(jì)算結(jié)果。

2）同時(shí)可以定義一個(gè)sum，將點(diǎn)擊的每個(gè)按鈕值進(jìn)行累加，以便最后可以輸出式子。

3）在Clear函數(shù)里實(shí)現(xiàn)點(diǎn)擊“AC”按鈕對(duì)txt進(jìn)行清空，以及將sum=“”設(shè)為空。

4）在計(jì)算結(jié)果Calculator函數(shù)里使用eval()函數(shù)計(jì)算最終結(jié)果。

4.實(shí)現(xiàn)思路（JS部分的代碼）

<script type="text/javascript">
?? ?var sum="";
?? ?function TNumber(value){
?? ??? ?document.getElementById("txt").value+=value;
?? ??? ?sum+=value;
?? ?}
?? ?function Clear(){
?? ??? ?document.getElementById("txt").value="";
?? ??? ?sum="";
?? ??? ?sum1="";
?? ?}
?? ?function Calculator(){
?? ??? ?document.getElementById("txt").value=sum+"="+eval(sum);
?? ?}
</script>

5. 運(yùn)行結(jié)果

6. 全部代碼（其中的圖片需要注意一下）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計(jì)算器</title>
?? ?<style type="text/css">
?? ??? ?#calculator
?? ??? ?{
?? ??? ??? ?margin: 0 auto;
?? ??? ??? ?border: #000 ?2px solid;
?? ??? ??? ?border-radius: 15px 15px 15px 15px;
?? ??? ??? ?width: 300px;
?? ??? ??? ?height: 460px;
?? ??? ??? ?background-image: url(img/background5.jpg);//url圖片需要自己設(shè)定
?? ??? ?}
?? ??? ?#hiddentxt
?? ??? ?{
?? ??? ??? ?height: 100px;
?? ??? ?}
?? ??? ?#txt
?? ??? ?{
?? ??? ??? ?width: 88%;
?? ??? ??? ?height: 80px;
?? ??? ??? ?border-radius: 12px 12px 12px 12px;
?? ??? ??? ?font-size: 24px;
?? ??? ??? ?font-weight: bold;
?? ??? ??? ?background: #F4F4F4;
?? ??? ??? ?color: #080808;
?? ??? ??? ?border: black 5px solid;
?? ??? ??? ?margin-top: 15px;
?? ??? ??? ?margin-left:12px;
?? ??? ??? ?font-family: "Comic Sans MS", "Leelawadee UI";
?? ??? ?}
?? ??? ?input[type=button]
?? ??? ?{
?? ??? ??? ?width: 56px;
?? ??? ??? ?height: 56px;
?? ??? ??? ?margin-top: 10px;
?? ??? ??? ?margin-left: 13px;
?? ??? ??? ?border-radius: 10px;
?? ??? ??? ?font-size: 20px;
?? ??? ??? ?font-weight: bold;
?? ??? ??? ?background: #fff;
?? ??? ??? ?font-family:"Comic Sans MS";
?? ??? ?}
?? ??? ?#Zero,#AC
?? ??? ?{
?? ??? ??? ?width: 129px;
?? ??? ?}
?? ??? ?input[type=button]:hover
?? ??? ?{
?? ??? ??? ?color: #fff;
?? ??? ??? ?background: #000;
?? ??? ??? ?animation-name:mybutton;
?? ??? ??? ?animation-duration: 0.8s;
? ? ? ??? ? ? ?animation-timing-function:ease-in-out;
?? ??? ?}
?? ??? ?@keyframes mybutton
?? ??? ?{
?? ??? ??? ?0%
?? ??? ??? ?{
?? ??? ??? ??? ?background: #fff;
?? ??? ??? ??? ?color: #000;
?? ??? ??? ?}
?? ?
?? ??? ??? ?100%
?? ??? ??? ?{
?? ??? ??? ??? ?background:#000;
?? ??? ??? ??? ?color: #fff;
?? ??? ??? ?}
?? ??? ?}
?? ?</style>
</head>
?
<body>
?? ?<div id="calculator">
?? ??? ?
?? ?<input type="text" id="txt" ?readonly><br>
?? ?<input type="button" id="AC" value="AC" onClick="Clear()">
?? ?<input type="button" ?onClick="TNumber(this.value)" value="/">
?? ?<input type="button" ?onClick="TNumber(this.value)" value="%">
?? ?<br>
?? ??? ?
?? ?<input type="button" id="Seven" onClick="TNumber(this.value)" value="7">
?? ?<input type="button" id="Eight" onClick="TNumber(this.value)" value="8">
?? ?<input type="button" id="Nine" onClick="TNumber(this.value)" value="9">
?? ?<input type="button" ?onClick="TNumber(this.value)" value="+">
?? ?<br>
?? ??? ?
?? ?<input type="button" id="Four" ?onClick="TNumber(this.value)" value="4">
?? ?<input type="button" id="Five" onClick="TNumber(this.value)" value="5">
?? ?<input type="button" id="Six" onClick="TNumber(this.value)" value="6">
?? ?<input type="button" ?onClick="TNumber(this.value)" value="-">
?? ?<br>
?? ??? ?
?? ?<input type="button" id="One" ?onClick="TNumber(this.value)" value="1" >
?? ?<input type="button" id="Two" ?onClick="TNumber(this.value)" value="2" ?>
?? ?<input type="button" id="Three" onClick="TNumber(this.value)" value="3">
?? ?<input type="button" ?onClick="TNumber(this.value)" value="*">
?? ?<br>
?
?? ?<input type="button" id="Zero" onClick="TNumber(this.value)" value="0">
?? ?<input type="button" id="Dot" onClick="TNumber(this.value)" value=".">
?? ?<input type="button" ?onClick="Calculator()" value="=">
?? ??? ?
?? ?</div>
?? ?
?? ?<script type="text/javascript">
?? ??? ?var sum="";
?? ??? ?function TNumber(value){
?? ??? ??? ?document.getElementById("txt").value+=value;
?? ??? ??? ?sum+=value;
?? ??? ?}
?? ??? ?function Clear(){
?? ??? ??? ?document.getElementById("txt").value="";
?? ??? ??? ?sum="";
?? ??? ??? ?sum1="";
?? ??? ?}
?? ??? ?function Calculator(){
?? ??? ??? ?document.getElementById("txt").value=sum+"="+eval(sum);
?? ??? ?}
?? ?</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: