基於php基礎語言編寫的小程序之計算器
需求:在輸入框中輸入數字進行加、減、乘、除運算(html+php)
思路:
1首先要創建輸入數字和運算符的輸入框,數字用input的text屬性,運算符用selelct的option屬性
2 點擊輸入框中的=號要進行對應的運算,
3 =號這個輸入框可以用input的submit來做,只要點擊submit表單裡的內容就傳給php了
4 判斷從html中得到的運算符進行對應的運算
5 運算完成後還得把結果返回到表單中(就是給表單的value賦值)
代碼
Html代碼
<form method="post" action=””>//method代表的表單的提交方式,本案例選的是post提交 action是接受的頁面,為空表示提交到當前頁
<input type = "text" name="num1" >
<select name = "select">
<option value="+" >+</option>
<option value="-" >-</option>
<option value="*" >*</option>
<option value="/" >/</option>
</select>
<input type = "text" name="num2" >
<input type = "submit" name = "submit" value="=">
<input type = "text" name="result" >
</form>
PHP代碼
當用戶點擊提交按鈕值就會通過post傳遞過來,現在要接受表單裡的值。
在點擊之前要做幾個判斷
if (isset($_POST['submit'])) {
//isset檢測變量是否設置,存在,或非NULL, 返回值為布爾, 如果變量存在返回true, 否則為false;,結合$_POST[“submit”], $_POST //接收通過表單的method=’post’ 方法的傳值
$num1 = $_POST['num1'];//獲取第一個輸入框中的值,通過input中的name屬性獲得
$select = $_POST['select'];//同上
$num2 = $_POST['num2'];//同上
if (is_numeric($num1) && is_numeric($num2)) {
//is_numeric() //檢測變量是否為數字或數字字符串 返回值 ,true, false 如 100, ‘100’
switch ($select) {//$select是前面傳來的運算符
case '+'://根據switch的語法,case中的值和switch括號裡的值相等那麼就執行case後面的那句話,不等則繼續往下找
$result = $num1+$num2;
break;
case '-':
$result = $num1-$num2;
break;
case '*':
$result = $num1*$num2;
break;
default:
if ($num2==0) {//加個判斷,除數不能為0
echo "<script>alert('輸入的除數為0請重新輸入')</script>";
}else{
$result = $num1/$num2;
break;
}
}
}else{
//echo 當用戶輸入的不是數,可能是字符串則給用戶提示
echo "<script>alert('輸入的不是數')</script>";
$num1 = $num2 = $result = "";//把表單裡的內容清空
}
}
運行結果截圖
當輸入正確的數字截圖
點擊=號後
說明值沒有傳給html中的表單,
現在要去設置表單的value
<input type = "text" name="num1" value="<?php echo $num1?>" >//把value的值設置為php中運算後的num值
<select name = "select">
<option value="+" >+</option>
<option value="-" >-</option>
<option value="*" >*</option>
<option value="/" >/</option>
</select>
<input type = "text" name="num2" value="<?php echo $num2?>" >
<input type = "submit" name = "submit" value="=">
<input type = "text" name="result" value="<?php echo $result?>">
</form>
運行結果
在用戶沒有點擊提交按鈕時輸入框現在有內容,所以在用戶沒有點擊提交按鈕時應該把輸入框中的值置為空
改進帶碼,在php的代碼最後加一個else{
$num1 =$num2 = $result = "";
}
截圖
在點擊其他運算時,中間的運算符始終為+,截圖
代碼改進
在html中
<select name = "select">
<option value="+" <?php if($select == '+')echo 'selected'?>>+</option>
//select有一個屬性selected當設置了就默認選中了它所以得結合php傳過來的值比較,true就代表選中false就代表未選
<option value="-" <?php if($select == '-')echo 'selected'?>>-</option>
<option value="*" <?php if($select == '*')echo 'selected'?>>*</option>
<option value="/" <?php if($select == '/')echo 'selected'?>>/</option>
</select>
截圖看結果
當用戶第一次進來
截圖
說明要設置selecte中的默認值
代碼
$select=”+”
基本功能已經完成
總的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<?php
if (isset($_POST['submit'])) {
//isset檢測變量是否設置,存在,或非NULL, 返回值為布爾, 如果變量存在返回true, 否則為false;,結合$_POST[“submit”], $_POST //接收通過表單的method=’post’ 方法的傳值
$num1 = $_POST['num1'];//獲取第一個輸入框中的值,通過input中的name屬性獲得
$select = $_POST['select'];//同上
$num2 = $_POST['num2'];//同上
if (is_numeric($num1) && is_numeric($num2)) {
//is_numeric() //檢測變量是否為數字或數字字符串 返回值 ,true, false 如 100, ‘100’
switch ($select) {//$select是前面傳來的運算符
case '+'://根據switch的語法,case中的值和switch括號裡的值相等那麼就執行case後面的那句話,不等則繼續往下找
$result = $num1+$num2;
break;
case '-':
$result = $num1-$num2;
break;
case '*':
$result = $num1*$num2;
break;
default:
if ($num2==0) {//加個判斷,除數不能為0
echo "<script>alert('輸入的除數為0請重新輸入')</script>";
}else{
$result = $num1/$num2;
break;
}
}
}else{
//echo 當用戶輸入的不是數,可能是字符串則給用戶提示
echo "<script>alert('輸入的不是數')</script>";
$num1 = $num2 = $result = "";//把表單裡的內容清空
}
}else{
$num1 = $num2 = $result = "";
$select = "+";
}
?>
<form method="post" action=""><!-- //method代表的表單的提交方式,本案例選的是post提交 action是接受的頁面,為空表示提交到當前頁 -->
<input type = "text" name="num1" value="<?php echo $num1?>" >
<select name = "select">
<option value="+" <?php if($select == '+')echo 'selected'?>>+</option>
<option value="-" <?php if($select == '-')echo 'selected'?>>-</option>
<option value="*" <?php if($select == '*')echo 'selected'?>>*</option>
<option value="/" <?php if($select == '/')echo 'selected'?>>/</option>
</select>
<input type = "text" name="num2" value="<?php echo $num2?>" >
<input type = "submit" name = "submit" value="=">
<input type = "text" name="result" value="<?php echo $result?>">
</form>
</body>
</html>