欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript制作簡單計算器功能

 更新時間：2022年07月29日 10:35:12   作者：今天我學習  
這篇文章主要為大家詳細介紹了JavaScript制作簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript制作簡單計算器的具體代碼，供大家參考，具體內容如下

1. 任務要求

1）掌握數(shù)據的類型轉換

2）學會獲取文本框控件的數(shù)據以及給相應控件賦值

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

4）學會使用數(shù)值判斷函數(shù)

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

2. 需求說明

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

3. 實現(xiàn)思路

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

2）同時可以定義一個sum，將點擊的每個按鈕值進行累加，以便最后可以輸出式子。

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

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

4.實現(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. 運行結果

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計算器</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圖片需要自己設定
?? ??? ?}
?? ??? ?#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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論