其他分享
首页 > 其他分享> > 每周总结03

每周总结03

作者：互联网

每周总结03：

  1. 编写一个静态表单页面和一个 PHP 动态网页，静态网页如下图1所示，在静态网页中 通过 get 方法提交数据，在动态网页中检索这些数据并显示出来，结果如下图2所示，如果 该同学的性别为男，则显示“您是一位男生！”，性别为女，则显示“您是一位女生！”。
  2. 编写一个静态表单和一个 PHP 动态网页，表单如图 3 所示，通过 POST 方法提交到动 态网页，在动态网页中检索这些数据并显示出来，结果如图 4 所示。
  3. 计算从 1 开始到你指定的数的累加和，指定数字由用户自己输入，结果如图 5所示。
  4. 制作一用户注册页面如图 6 所示，然后对用户输入的数据进行判断：如果用户名为空 则弹出警告框“用户名不能为空！”，如图7所示，否则进行下一步的判断，如果两次输入 的密码不一致则弹出警告框“两次密码必须一致！”，如图 8 所示，如果两次验证都通过页 面跳转到第 3 题的静态页面.

 

 

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单填写</title>
</head>
<body>
<form action="php-1demo.php" method="get">

<div>
    姓名：<input type="text" name="name">
</div>
<div>
    性别：<input type="radio" name="sex" value="男生">男&nbsp;<input type="radio" name="sex" value="女生">女
</div>
    <input type="submit" value="提交"> <input type="reset" value="全部重写">
</form>
</body>
</html>


<?php
if($_GET) {
    $name = $_GET['name'];
    $sex = $_GET['sex'];
}
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎你！</title>
</head>
<body>
<?php echo $name ?>,欢迎你访问本页面！ <br>
您是一位<?php echo $sex?>！


</body>
</html>

 

 

 

 

<?php
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>意见反馈</title>
    <style type="text/css">
        body{
            border: 1px solid;
            margin-left: 500px;
            margin-right: 500px;
            padding-bottom: 20px;
        }
        table{
            border-spacing:20px ;
        }

    </style>
</head>
<body>
<form action="php-2demo.php" method="post">
<table cellpadding="0" border="0" cellspacing="5" width="800px" align="center" >

    <tr><h2 align="center"> 意见反馈</h2></tr>
    <tr>
        <td>你的姓名</td>
        <td><input type="text" name="name"></td>
        <td>你的性别</td>
        <td><input type="radio" name="sex" value="男">男&nbsp;<input type="radio" name="sex" value="女">女</td>
    </tr>
    <tr>
        <td>你的职业</td>
        <td><select name="work" id="">
            <option value="0">学生</option>
            <option value="1">教师</option>
        </select></td>
        <td>你的最高学历</td>
        <td><select name="study" id="">
                <option value="0">初中</option>
                <option value="1">高中</option>
                <option value="2">大学</option>
            </select></td>
    </tr>
    <tr>
        <td>您对本站的意见</td>
        <td colspan="3"><textarea name="idea" id="" cols="60" rows="7"></textarea></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="reset"></td>
        <td colspan="2"><input type="submit"></td>
    </tr>



</table>
</form>

</body>
</html>

<?php
if($_POST){
    $name = $_POST['name'];
    $sex = $_POST['sex'];
    $work = $_POST['work'];
    if($work==0){
        $work='学生';
    }else{
        $work='教师';
    }
    $study = $_POST['study'];
    switch ($study){
        case 0 :$study='初中';break;
        case 1 :$study='高中';break;
        case 2 :$study='大学';default;
    }
    $idea = $_POST['idea'];
}
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div>
    十分感谢用户<?php echo $name?> 的意见。<br>
    请确定下列信息：<br>
    您的性别：<?php echo $sex ?> <br>
    您的职业：<?php echo $work ?> <br>
    您的学历：<?php echo $study ?> <br>
    您的意见：<?php echo $idea ?>


</div>

</body>
</html>

 

 

<?php
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算累加和</title>
</head>
<body>
<form action="php-3.php" method="post">
    <h1>计算累加和</h1>
    <br>
    1+2+...+<input type="number" name="num" id="num"><input type="submit" id="sum" value="计算">
</form>
<script>

    document.getElementById("sum").onclick = sum;
    function sum() {
        var value = parseInt(document.getElementById("num").value);
        let res=value*(value+1)/2;
        alert("1+2+...+"+value+"="+res);
    }
</script>

</body>
</html>

 

 

 

 

 

 

 

 

<?php
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <style type="text/css">
        .tab{
            color:Gray;
            font-size: 8px;
        }
        body{
            margin-top:100px ;
            margin-left: 700px;
            margin-right: 630px;
            border: 1px solid;
            padding: 15px;
        }
    </style>
</head>
<body>
<form id="reg_form" action="php-3.php" method="post">
    <h2 style="margin-left: 200px">注册信息</h2>

    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><sapn class="tab"></sapn><br><br>


    <label for="password">密 码：</label>
    <input type="password" id="password" name="password"><span class="tab"></span><br><br>


    <label for="rpassword">重复密码：</label>
    <input type="password" id="rpassword" name="rpassword"><br>

    <br>
    <span style="margin-left: 150px"><input type="submit" value="提交" > &nbsp;&nbsp;<input type="reset" value="重置"></span>
</form>
<script>
    //用户名
    var usernameInput = document.getElementById("username");
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        var usernamevalue = username.value.trim();
        var flag = !usernamevalue
        if (flag) {
            alert('用户名不可为空');
        }
        return(flag);
    }
    //密码
    var passwordInput = document.getElementById("password");
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        var passwordvalue = password.value.trim();
        var flag = !passwordvalue
        if (flag) {
            alert('密码不可为空');
        }
        return(flag);
    }
    //重复密码
    var rpasswordInput = document.getElementById("rpassword");
    rpasswordInput.onblur = checkRpassword;

    function checkRpassword() {
        let flag = passwordInput.value == rpasswordInput.value.trim();
        if(!flag){
            alert('两次输入密码不一致')
        }
        return (flag);
    }


    var regForm = document.getElementById("reg_form");
    regForm.onsubmit = function () {
        var flag = checkPassword() && checkUsername() && checkRpassword();
        if(flag){
            location.href='php-3.php';
        }
    }
</script>

</body>
</html>

 

标签：总结,03,每周,getElementById,value,所示,flag,var,document
来源： https://www.cnblogs.com/nian-nian/p/16376217.html