每周总结03

2022-06-14 20:35:08 阅读：148 来源： 互联网

标签：总结 03 每周 getElementById value 所示 flag var document

每周总结03：

编写一个静态表单页面和一个 PHP 动态网页，静态网页如下图1所示，在静态网页中通过 get 方法提交数据，在动态网页中检索这些数据并显示出来，结果如下图2所示，如果该同学的性别为男，则显示“您是一位男生！”，性别为女，则显示“您是一位女生！”。
编写一个静态表单和一个 PHP 动态网页，表单如图 3 所示，通过 POST 方法提交到动态网页，在动态网页中检索这些数据并显示出来，结果如图 4 所示。
计算从 1 开始到你指定的数的累加和，指定数字由用户自己输入，结果如图 5所示。
制作一用户注册页面如图 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

每周总结03