第二次作业

实验目的：

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

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

实验内容：

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

实验环境及开发工具：

1.使用micrsoft visio绘制流程图。

2.使用HBuilder X编写软件。

3.用Mysql存储数据。

4.用jdbc连接数据库。

登录流程图：

1.登录代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录</title>
        <style>
            body{
                
                background-image: url(img04.png);
                background-repeat: repeat-y;
                background-size:100% 100%;
                background-attachment: fixed;
            }
            .form{
                margin: 0 auto;
                margin-top: 100px;  
                text-align: center;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                background:lavender;
                
            }
            .form h4{
                border-bottom: 1px dotted black;
            }
            .form p{
                display: block;
                height: 50;
                padding: 5px;
                
            }
            .form span{
                display: block;
                color: #999;
                display: none;
            }
            .form button{
                width: 80%;
                height: 25px;
                border-radius: 50px;
                background-color: hotpink;
                color: #ddd;
                cursor: pointer;
                /* 鼠标变成小手 */
            }
            .form a{
                color:#ddd;
                text-decoration: none;
            }
                body{
                        background: url(img/v2-d3dacbae50f0d48956913080ee09b611_r.jpg) top left;
                        background-size: 100%;
                    }
        </style>
    </head>
    <body> 
        <form class="form">
            <h4>登录</h4>
            <p>
                <label for="user">账户</label>
                <input type="text" id="username" placeholder="请输入账号" value="">
            </p>
            <p>
                <label for="pwd">密码</label>
                <input type="password" id="pwd" placeholder="密码" value="">
            </p>
            <p>
                <input type="checkbox" id="chk"/>记住密码
                <span id="spa">请确认是安全是PC</span>
            </p>
            <p>
                <button id="denglu"><a id="tiaozhuan" href="##">登录</a></button>
                <button id="quxiao">取消</button>
            </p>
        </form>
        <script>
            var chk=document.getElementById("chk");
            var spa=document.getElementById("spa");
            var btn1=document.getElementById("denglu");
            var btn2=document.getElementById("quxiao");
            var username=document.getElementById("username");
            var pwd=document.getElementById("pwd");
            var a=document.getElementById("tiaozhuan");
            chk.onmouseout=function(){
                spa.style.display="none";
            }
            chk.onmouseover=function(){
                spa.style.display="block";
            }
            btn1.onclick=function(){
                if(username.value=="" && pwd.value=="") {
                    alert("账号或密码不为空");
                }else{
                    if(username.value=="admin" && pwd.value=="888"){
                        alert("登录成功");
                        a.href="demo 10.html";
                        //转跳的HTML页面需要与当前HTML页面在一个文件夹中   各种图片也是
                    }else{
                        alert("账号或密码错误");
                    }
                }    
            }

        </script>
    </body>
</html>

2.登录截图：

3.未输入账号密码截图：

4.登录失败截图：

5.登录成功跳转进入计算器：

6.计算器代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

<!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>计算器</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: black;
            /* border-radius: 10px; */
            /* border-top-left-radius: 10px; */
        }
        #top .point {
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
       
        #calc-title {
            font-size: 22px;
            color: white;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }
 
        /* 设置结果显示栏样式 */
        #result {
            width: 446px;
            height: 50px;
            margin: auto;
            text-align: right;/*文本内容右对齐*/
            background-color: white;
            border: solid 2px red;
            font-size: 30px;
        }
 
        /* 设置按钮区域的样式 */
        #button {
            width: 450px;
            height: 422px;
            background-color: black;
            margin: auto;
        }
 
        #button div {
            width: 108px;
            height: 80px;
            float: left;
            background-color: hotpink;
            margin: 2px;
            line-height: 80px;
            text-align: center;
            font-size: 26px;
        }
 
        /* 使用伪类选择器设置鼠标悬停效果 */
        #button div:hover {
            background-color: cornflowerblue;
        }
 
    </style>
    <script type="text/javascript">
        //获取一个元素
        function aler(){
        var cal = document.getElementById("calc-title").innerHTML;
        window.alert(cal);
        }
        document.getElementsByClassName("point");
        //输入数字
        function num(number){
        var result = document.getElementById("result")
        result.innerHTML = result.innerHTML + number 
        }//这里的result，不是name里面的
        //输入运算符
        function oper(operator){
        var result = document.getElementById("result")
        result.innerHTML = result.innerHTML + operator
        }
        //计算结果
        function yunsuan(){
            var result= document.getElementById("result")
            var expression = result.innerHTML
            result.innerHTML =eval(expression)//eval是一个可以把里面的字符串当成代码运行，eval可以把字符串转为数字然后执行
        }
        function doback(){
            var result =document.getElementById("result")//这里只是定位到result
            var len=result.innerHTML.length//这里才是取出result的值并取他的总长度
            result.innerHTML =result.innerHTML.substr(0,len-1)//把result里面的值处理后重新放到result里面
             
        }
        function qingkong(){
            var result = document.getElementById("result")
            result.innerHTML = ""
 
        }
    </script>
</head>
<body >
    <div id="top">
        <div id="calc-title">计算器</div>
    </div>
 
    <div id="result" name="result" ></div>
 
    <div id="button">
        <!--当被单击时触发事件-->
        <!--在<script>里面写函数，下面调用函数，传参-->
        <div onclick="qingkong()">AC</div>
        <div>+/-</div>
        <div onclick="oper('%')">%</div>
        <div onclick="oper('/')">÷</div>
        <div onclick="num(7)">7</div>
        <div onclick="num(8)">8</div>
        <div onclick="num(9)">9</div>
        <div onclick="oper('*')">*</div>
        <div onclick="num(4)">4</div>
        <div onclick="num(5)">5</div>
        <div onclick="num(6)">6</div>
        <div onclick="oper('-')">-</div>
        <div onclick="num(1)">1</div>
        <div onclick="num(2)">2</div>
        <div onclick="num(3)">3</div>
        <div onclick="oper('+')">+</div>
        <div onclick="num(0)">0</div>
        <div onclick="doback()">删除</div>
        <div onclick="oper('.')">.</div>
        <div onclick="yunsuan()">=</div>
    </div>
 
</body>
</html>

7.计算器运行：

加法：

减法：

乘法：

除法：

8.连接数据库代码：

var mysql = require('mysql');
var connection = mysql.createConnection({
      host        : 'localhost',
      user        :'root',
      password :'',
      database : 'test'
});
 
 
connection.connect(function(err) {
       if(err) throw err;
       console.log("Connected!");
});