第二次计算器作业-526互联

[实验目的]

1.掌握软件开发的基本流程

2.掌握常用的软件开发方式和工具。

[实验内容]

1.设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。

[实验要求]

1.完成软件的UI设计、使用Visio设计软件中所涉及的所有流程图。

2.选择合适的集成开发环境和工具完成计算器软件的开发

3.将开发好软件进行测试并截图

4.将本次实验过程写成实验报告提交在本次作业的链接中

5.关键代码部分以代码块格式粘贴在实验报告正文中

一、登录流程图

二、注册流程图

三、登录操作

1、login.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
                             body{
                                 background: url(img/mmdddtdtsu.webp) top left;
                                     background-size: 100%;
                             }
                         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(images/background.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         
        #loginDiv {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(246, 250, 250, 0.6);
            box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
            border-radius: 300px;
        }
         
        #loginDiv:hover{  
           filter: grayscale(60%);
        }  
 
        input{
            text-align: center;
            border:none; 
            background-color: rgba(239, 248, 250, 0.1);
            border-bottom:1px solid rgb(80, 196, 241);
            width: 200px;
            
        }
 
        #L_login {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
 
        #L_register {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="" id="form">
            <table>
                <h2 style="text-align: center; color: rgb(59, 194, 248);">立即登录</h2></br>
                <tr><td style="text-align: center; color: gray;">邮箱</td></tr>
                <tr><td><input class="line" type="text" id="L_email"></td></tr>
                <tr><td style="text-align: center; color: gray;">密码</td></tr>
                <tr><td > <input class="line" type="password" placeholder="密码长度至少为6位" id="L_pwd"></td></tr>
           </table>
        </br>
        <p style="text-align: center;color: rgb(59, 194, 248);">忘记密码?</p >
        <div style="text-align: center;margin-top: 15px;">
            <input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()>
            <input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()>
        </div>
        </form>
    </div>
    <script>
        L_email.onchange = function(){
        var L_email = this.value;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(L_email)){
            alert("邮箱格式不正确，请重新输入！");
            return false;  
        }
        }
        L_pwd.onchange = function(){
        var L_pwd = this.value;
        var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
        if(!reg.test(L_pwd)){
            alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
            return false;  
        }
        }
 
        var email=localStorage.getItem("email");
        var password=localStorage.getItem("password");
        console.log("email:"+email);
        console.log("pwd:"+password);
 
        function jump1(){
            console.log(document.getElementById("L_email").value);
            console.log(+document.getElementById("L_pwd").value);
 
            var Email = document.getElementById("L_email");  
            var Password = document.getElementById("L_pwd");
 
            if(email==document.getElementById("L_email").value && password==document.getElementById("L_pwd").value){
               alert("登录成功，点击确定进入计算器！");
               window.location.href="My_Album.html";
            }
            else if(Email.value == "" || Password.value =="") {            
                    alert("邮箱或密码不能为空！");            
                    return false;            
                }   
            else{
               alert("邮箱或密码错误！");
               return false;  
           }
        }
        function jump2(){
           window.location.href="register.html";
        }
    </script>
</body>
</html>

登录界面操作

显示错误则用户不存在

二、注册操作

2、register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <style>
        html{
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(images/background.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            
        }
        input{
            text-align: center;
            border:none; 
            background-color: rgba(239, 248, 250, 0.1);
            border-bottom:1px solid rgb(80, 196, 241);
            width: 260px;
        }
        
        p{
            text-align: center;
            color: rgb(116, 114, 114);
        }
        .R_register{
            margin-top: 30px;
            width: 600px;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 600px;
            background-color: rgba(246, 250, 250, 0.7);
            box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
        }
 
        .R_login{
            margin-top: 30px;
            width: 300px;
            justify-content: center;
            align-items: center;
            height: 600px;
            background-color: rgba(167, 150, 150,0.6);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.3);
        }
 
        #R_registerbtn {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.6);
            color: aliceblue;
            border-style: hidden;
            border-radius: 15px;
            width: 190px;
            height: 31px;
            font-size: 16px;
        }
 
        #R_loginbtn{
            border: 20px solid white;
            background-color: rgba(71, 196, 245, 0.6);
            border-radius: 50%;
            color: aliceblue;
            border-style: hidden;
            border-radius: 15px;
            width: 100px;
            height: 31px;
            font-size: 16px;
            
        }
        .title{
            color: white;
            text-align: center;
        }
         
                             body{
                                 background: url(img/mmdddtdtsu.webp) top left;
                                     background-size: 100%;
                             }                  
    </style>
</head>
        <div class="R_register">
            <h3 style="color: rgb(122, 211, 247);">立即注册</h3>
            <p>邮箱</p >
            <p><input type="text" id="R_email"></p >
            <p >用户名</p >
            <p><input type="text" placeholder="用户名长度不能超过5位" id="R_user"></p >
            <p> 性别</p >
            <p>
                <span>男</span>
                <span><input style="width: auto;" type="radio" name="sex" value="男" checked="checked" ></span>
                <span>女</span>
                <span><input style="width: auto;" type="radio" name="sex" value="女" ></span>
            </p >
            <p >头像</p >
            <p><input type="file" id="toux"></p >
            <p >密码</p >
            <p><input type="password" placeholder="密码长度至少为6位且为数字和字母的组合" id="R_pwd"></p >
            <p >确认密码</p >
            <p><input type="password" placeholder="两次密码需一致" id="R_repwd" onkeyup="checkpassword()"></p >
            <span id="tishi"></span></input>
            <p><button id="R_registerbtn" onclick=javascrtpt:jump()>注册</button></p >
        </div>
        <div class="R_login">
            <br><br>
            <h3 class="title">已有账号？</h3>
            <p style="color: white;">已有账号就登录吧，好久不见！</p >
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <p><button id="R_loginbtn" onclick=javascrtpt:jump3()>登录</button></p >
        </div>
        <script>
 
            R_email.onchange = function(){
            var R_email = this.value;
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(R_email)){
                alert("邮箱格式不正确，请重新输入！");
                return false;
            }
            }
 
            R_user.onchange = function(){
            var  R_user= this.value;
            var reg = /^\S{1,5}$/;
            if(!reg.test( R_user)){
                alert("用户名长度不能超过5位！");
                return false;
            }
            }
 
            R_pwd.onchange = function(){
            var R_pwd = this.value;
            var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
            if(!reg.test(R_pwd)){
                alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
                return false;
            }
            }
 
            function checkpassword() {
            var password = document.getElementById("R_pwd").value;
            var repassword = document.getElementById("R_repwd").value;
            if(password == repassword) {
                 document.getElementById("tishi").innerHTML="<font color='green'>两次密码输入一致</font>";
            }else {
                 document.getElementById("tishi").innerHTML="<font color='red'>两次输入密码不一致!</font>";
            } 
            }
 
            function jump(){
                localStorage.setItem("username",document.getElementById("R_user").value);
                localStorage.setItem("password",document.getElementById("R_pwd").value);
                localStorage.setItem("email",document.getElementById("R_email").value);
 
                var Email = document.getElementById("R_email");  
                var User = document.getElementById("R_user");  
                var Toux = document.getElementById("toux");
                var Password = document.getElementById("R_pwd");
                var Repassword = document.getElementById("R_repwd");
 
                if(Email.value == "" || User.value ==""|| Toux.value ==""|| Password.value =="") {            
                    alert("邮箱、用户名、头像或密码不能为空！");            
                    return false;            
                }  
                else if(Password.value == Repassword.value) {
                    alert("注册成功，欢迎进入登录界面！");
                    window.location.href="login.html";
                }
                else{
                   alert("注册信息有误！");
                }
            }
 
            function jump3(){
                 window.location.href="login.html";
            }
        </script>
</body>
</html>

界面显示

注册格式错误

注册成功

继续登录

三、计算器

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style>
* {
        font-family: 'Inconsolata', monospace;
        color: #555;
    }
    body {
        background-color: #ffffff;
    }
    .container {
        width: 320px;
        background-color: white;
        margin: 120px auto;
    }
    table {
        width: 100%;
        border-color: #000000;
    }
    td {
        width: 25%;
    }
    button {
        width: 100%;
        height: 70px;
        font-size: 24px;
        background-color: white;
        border: none;
    }
    #inputLabel {
        height: 120px;
        font-size: 40px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 16px;
        background-color: #ffffff;
    }
        
</style>
</head>
<body>
<div class="container">
    <table border="1" cellspacing="0">
        <tr>
            <td colspan="4" id="inputLabel">0</td>
        </tr>
        <tr>
            <td colspan="3"><button onclick="pushBtn(this);">AC</button></td>
            <td><button onclick="pushBtn(this);">/</button></td>
        </tr>
        <tr>
            <td><button onclick="pushBtn(this);">7</button></td>
            <td><button onclick="pushBtn(this);">8</button></td>
            <td><button onclick="pushBtn(this);">9</button></td>
            <td><button onclick="pushBtn(this);">*</button></td>
        </tr>
        <tr>
            <td><button onclick="pushBtn(this);">4</button></td>
            <td><button onclick="pushBtn(this);">5</button></td>
            <td><button onclick="pushBtn(this);">6</button></td>
            <td><button onclick="pushBtn(this);">-</button></td>
        </tr>
        <tr>
            <td><button onclick="pushBtn(this);">1</button></td>
            <td><button onclick="pushBtn(this);">2</button></td>
            <td><button onclick="pushBtn(this);">3</button></td>
            <td><button onclick="pushBtn(this);">+</button></td>
        </tr>
        <tr>
            <td colspan="2"><button onclick="pushBtn(this);">0</button></td>
            <td><button onclick="pushBtn(this);">.</button></td>
            <td><button onclick="pushBtn(this);">=</button></td>
        </tr>
    </table>
</div>


<script>
    var inputLabel = document.getElementById('inputLabel');
     
    function pushBtn(obj) {
         
        var pushed = obj.innerHTML;
         
        if (pushed == '=') {
            // Calculate
            inputLabel.innerHTML = eval(inputLabel.innerHTML);
             
        } else if (pushed == 'AC') {
            // All Clear
            inputLabel.innerHTML = '0';
             
        } else {
            if (inputLabel.innerHTML == '0') {
                inputLabel.innerHTML = pushed;
                 
            } else {
                inputLabel.innerHTML += pushed;   
            }
        }
    }
</script>
</body>
</html>

运算

四、PHP连接数据库

代码

<?php
// 连接到数据库
$servername = "localhost";
$serverusername = "kk";
$serverpostbox = "2531026604@qq.com"
$serverpassword = "12345a";
$dbname = "kkzs";
// 创建连接
$conn = new mysqli($servername, $serverusername, $serverpassword, $dbname);
 
// 检测连接
// if ($conn->connect_error) {
//     die("连接失败: " . $conn->connect_error);
// } else {
//     echo "连接成功";
// }
 
// 验证表单 登录信息
//判断用户名（邮箱）和密码是否为空
$fusername = isset($_POST['fusername']) ? $_POST['fusername'] : "";
$fuserpassword = isset($_POST['fuserpassword']) ? $_POST['fuserpassword'] : "";
$remember = isset($_POST['remember']) ? $_POST['remember'] : "";
// $fusername = $_POST["fusername"];
// $fuserpassword = $_POST["fuserpassword"];
// echo $fusername, $fuserpassword;
 
 
if (!empty($fusername) && !empty($fuserpassword)) { //建立连接
    $sql = "SELECT username,userpassword FROM `users` WHERE username = '$fusername' and userpassword = '$fuserpassword'";
    $result = $conn->query($sql);
    $row = mysqli_fetch_array($result); //判断用户名（邮箱）或密码是否正确
    if ($fusername == $row['username'] && $fuserpassword == $row['userpassword']) {
        // 创建cookie
        $expire = time() + 60 * 60 * 24 * 30;
        setcookie("fusername1", $fusername, $expire);
        setcookie("fuserpassword1", $fuserpassword, $expire);
        //关闭数据库,可进行页面跳转 这里为了方便 仅显示为登录成功
        // header("Location:personcenter.html");
        echo "登录成功！";
        mysqli_close($conn);
    } else {
        //用户名或密码错误，赋值err为1
        echo "<script>alert('用户名或密码错误，请重新输入！');location.href='denglu.html';</script>";
    }
} else {
    //用户名或密码为空，赋值err为2
    echo "<script>alert('用户名或密码不能为空，请重新输入！');location.href='denglu.html'</script>";
}

五、最终运行