一个简单的网页计算器-php网站建设代码段分享

功能说明:接收用户输入数字并判断,实现加、减、乘、除、取余功能,能够保存输入的数值并验证输入的数值是否符合要求。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单网页计算器</title>
</head>
<body>
<?php
/*如果用户单击了提交按钮才存在表单变量,才能接收表单数据和对数据进行验证,以下if语句判断是否将表单中的两个操作
数提交到本页面,如果没有则不执行*/
if(isset($_POST["num1"])&& isset($_POST["num2"])){
    if(empty($_POST["num1"])){
        echo "<font color=#FF0000>第一个操作数不能为空</font><br>";
        unset($_POST["sub"]);       //
    }
    if(empty($_POST["num2"])){
        echo "<font color=#FF0000>第一个操作数不能为空</font><br>";
        unset($_POST["sub"]);       //
    }
         
    $oper=$_POST["oper"];
    $num1=$_POST["num1"];
    $num2=$_POST["num2"];
         
    if($oper=="/" || $oper=="%"){
        if($num2==0){
            echo "<font color=#FF0000>0不能作为除数!</font><br>";
            unset($_POST["sub"]);  
        }
    }
}
?>
<!--以html表格形式输出计算器的用户操作界面-->
<table border="1" align="center" width="400">
    <form action="005jisuanqi.php" method="post">
    <caption><h2>网页计算器</h2></caption>
    <tr>
      <!--重新设置输入框的value属性值,将用户输入过的数据在提交后仍保留-->
        <td><input type="text" size="10" name="num1" value="<?php if(!empty($num1)) echo $num1; ?>"></td>
        <td>
            <select name="oper">
                <option value="+" <?php if($_POST["oper"]=="+") echo "selected" ?>>+</option>
                <option value="-" <?php if($_POST["oper"]=="-") echo "selected" ?>>-</option>
                <option value="*" <?php if($_POST["oper"]=="*") echo "selected" ?>>*</option>
                <option value="/" <?php if($_POST["oper"]=="/") echo "selected" ?>>/</option>
                <option value="%" <?php if($_POST["oper"]=="%") echo "selected" ?>>%</option>
            </select>
        </td>
        <!--重新设置输入框的value属性值,将用户输入过的数据在提交后仍保留-->
        <td><input type="text" size="10" name="num2" value="<?php if(!empty($num1)) echo $num2; ?>"></td>
        <td><input type="submit" name="sub" value="计算"></td>
    </tr>
         
    <?php
        /*通过表单传过来的$_POST["sub"]判断是否单击了计算按钮,来决定以下计算是否执行以及是否输出计算结果*/
        if(isset($_POST["sub"]) && !empty($_POST["sub"])){
            $sum=0;     //声明一个存放计算结果的变量,初始值为0
            //echo "<h1>1111111111111111111</h1>";
            //使用switch语句,通过表单选择的运算符来决定执行哪种运算
            switch($oper){
                case "+":
                    $sum=$num1+$num2;
                    break;
                case "-":
                    $sum=$num1-$num2;
                    break;
                case "*":
                    $sum=$num1*$num2;
                    break;
                case "/":
                    $sum=$num1/$num2;
                    break;
                case "%":
                    $sum=$num1%$num2;
                    break;
            }
                 
            //输出计算结果
            echo "<tr><td colspan=4 align=center>";
            echo "计算结果:$num1 $oper $num2 = $sum";
            echo "</td></tr>";
        }
    ?>
    </form>
</table>
</body>
</html>

一段简单的php代码片段,虽然并无多大实用价值,拿来练手还是可以的!

样式如下:


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单计算器网页代码,你可以根据需要进行修改和扩展: ```html <!DOCTYPE html> <html> <head> <title>计算器</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { text-align: center; margin-top: 50px; } .container { width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } input[type="button"] { background-color: #4CAF50; border: none; color: #fff; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: #f8f8f8; } </style> </head> <body> <h1>计算器</h1> <div class="container"> <input type="text" id="result" placeholder="0"> <table> <tr> <td><input type="button" value="1" onclick="insert('1')"></td> <td><input type="button" value="2" onclick="insert('2')"></td> <td><input type="button" value="3" onclick="insert('3')"></td> <td><input type="button" value="+" onclick="insert('+')"></td> </tr> <tr> <td><input type="button" value="4" onclick="insert('4')"></td> <td><input type="button" value="5" onclick="insert('5')"></td> <td><input type="button" value="6" onclick="insert('6')"></td> <td><input type="button" value="-" onclick="insert('-')"></td> </tr> <tr> <td><input type="button" value="7" onclick="insert('7')"></td> <td><input type="button" value="8" onclick="insert('8')"></td> <td><input type="button" value="9" onclick="insert('9')"></td> <td><input type="button" value="*" onclick="insert('*')"></td> </tr> <tr> <td><input type="button" value="C" onclick="clearResult()"></td> <td><input type="button" value="0" onclick="insert('0')"></td> <td><input type="button" value="/" onclick="insert('/')"></td> <td><input type="button" value="=" onclick="calculate()"></td> </tr> </table> </div> <script> function insert(value) { document.getElementById("result").value += value; } function clearResult() { document.getElementById("result").value = ""; } function calculate() { var result = eval(document.getElementById("result").value); document.getElementById("result").value = result; } </script> </body> </html> ``` 该网页包含一个文本框和一个表格,表格中有数字和运算符按钮。用户可以点击按钮来输入数字和运算符,然后按“=”按钮来计算结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值