[实验目的]
1.掌握软件开发的基本流程
2.掌握常用的软件开发方式和工具。
[实验内容]
1.设计一个包含登录界面的计算器软件，该软件可以实现第一次作业中的全部功能，同时可以保存用户的历史计算记录（保存数据最好使用数据库）。
[实验要求]
1.完成软件的UI设计、使用Visio设计软件中所涉及的所有流程图。
2.选择HBulider X集成开发环境和工具完成计算器软件的开发
3.将开发好软件进行测试并截图
4.将本次实验过程写成实验报告提交在本次作业的链接中
5.关键代码部分以代码块格式粘贴在实验报告正文中
一、登陆页面的设计
1、数据流程图
3、网页登陆页面截图
login.html
< !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script scr="ls.js"></script>
<script scr="Click.js"></script>
</head>
<body>
<div class="control">
<div class="item" >
<div class="active">登录</div><div>注册</div>
</div>
<div class="content">
<div style="display: block;">
<p>账号</p>
<input type="text" placeholder="username" id="login-username" />
<p>密码</p>
<input type= "password" placeholder="password" id="login-password"/>
<br/>
<input type="submit"value="登录" onclick="login()"/>
</div>
<div>
<p>用户名</p>
<input type="text" placeholder="username" id="register-username"/>
<p>密码</p>
<input type="password" placeholder="password" id="register-password"/>
<p>邮箱</p>
<input type= "text" placeholder="email" id="register-email"/>
<br/>
<input type="submit"value="登录"onclick="register()" />
</div>
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
body{
background:#f3f3f3;
}
.control
{
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
}
.item
{
width: 340px;
height: 60px;
background: #eeeeee;
}
.item div
{
width:170px;
height:60px;
display:inline-block;
color:black;
font-size:18px;
text-alihn:center;
line-heiht:60px;
cursor:pointer;
}
.content{
width: 100%;
}
.content div
{
margin: 20px 30px ;
display:none;
text-align: left;
}
p{
color: #4a4a4a;
margin-top: 30px;
margin-bottom: 6px;
font-size: 15px;
}
.content input [type= "text"]， . content input [type-"password"]
{
width: 100%;
height: 40px;
border-radius: 3px;
border: 1px solid #adadad;
padding: 0 10px;
box-sizing: border- box;
}
.content input[type="submit"]
{
margin-top: 40px;
width: 100%;
height: 40px;
border-radius: 5px;
color: white;
border: 1px solid #adadad;
background: #00dd60;
cursor: pointer;
letter-spacing:4px;
margin-bottom:40px;
}
.active{
background:white;
}
.item div:hover{
background:#f6f6f6;
}
二、数据库的连接
三、计算器实现简单加减乘除
1、状态流程图
2、实现“加”“减”“乘”“除”截图
实现简单计算器的代码
jisuanqi.htm<!DOCTYPE html<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style: none;}
.reveal{width:100%;height:100px;}
.reveal>input{height:50px;line-height: 50px;font-size:50px;color:#ffffff;background-color: black;text-align: right;border: none;width: 240px;padding-right: 10px;}
.button>ul>li>button{height:50px;width:45px;border:none;border-radius: 25px;margin:5px ;color:#ffffff;background-color:#585252;font-size:20px;}
.button>ul li:first-child>button{background:#D6D0CE;color:black;}
.button>ul li button:last-child{background:#F09C10;color:#ffffff;}
</style>
<script type="text/javascript">
$(function(){
//获取输入框元素
var res=$('.result');
//获取结果显示框
var sum=$('.sum');
var resval=0;
var sumval=0;
var operator=-1;
var jon=['+','_','*',''];
//求10的幂函数
function funm(n){
if(n==0){
return 1
}
return funm(n-1)*10
}
//AC清除按钮
$('.dump').on('click',function(){
res.val('0');
resval=0;
sum.val('');
sumber=0;
operator=-1;
});
//C清楚按钮
$('.clear').on('click',function(){
if(resval!='0'){
resval=resval.slice(0,resval.length-1);
res.val(resval);
}
})
//数字按钮
$(".number").on('click',function(){
if(operator==0){
operator=-1;
res.val('0');
resval='';
}
if(resval=="0"){
res.val('0');
resval='';
}
resval=resval+$(this).html();
res.val(resval);
});
$('.spot').on('click',function(){
for(var i=0;i<resval.length;i++){
if(resval[i]=="."){
return false;
}
}
if(operator==0){
operator=1;
res.val('0')
resval=res.val();
}
resval=resval+$(this).html();
res.val(resval);
});
$('.oper').on('click',function(){
if(operator != 0){
switch(operator){
case 0:
resval=Number(sumval)+Number(resval);
break;
case 1:
resval=Number(sumval)+Number(resval);
break;
case 2:
resval=Number(sumval)-Number(resval);
break;
case 3:
resval=Number(sumval)*Number(resval);
break;
case 4:
resval=Number(sumval)/Number(resval);
break;
case 5:
resval=Number(sumval)%Number(resval);
break;
}
}
operator=Number($(this).attr('operator'));
sumval=resval;
sum.val(resval+jon[operator-1]);
resval=0;
res.val('');
})
//等于
$('.equal').on('click',function(){
switch(operator){
case 0:
sum.val(sumval+'+'+resval);
resval=Number(sumval)+Number(resval);
res.val(resval);
operator=0;
break;
case 1:
sum.val(sumval+'+'+resval);
resval=Number(sumval)+Number(resval);
res.val(resval);
operator=0;
break;
case 2:
sum.val(sumval+'-'+resval);
resval=Number(sumval)-Number(resval);
res.val(resval);
operator=0;
break;
case 3:
sum.val(sumval+'*'+resval);
resval=Number(sumval)*Number(resval);
res.val(resval);
operator=0;
break;
case 4:
sum.val(sumval+'/'+resval);
resval=Number(sumval)/Number(resval);
res.val(resval);
operator=0;
break;
case 5:
sum.val(sumval+'%'+resval);
resval=Number(sumval)%Number(resval);
res.val(resval);
operator=0;
break;
}
});
});
</script>
</head>
<body>
<div style="width:250px;height:400px;background-color:black;margin:300px auto 0">
<div class="reveal">
<input type="button" name="" class="sum" style="width:250px">
<input type="text" name="" value="0" class="result">
</div>
<div class="button">
<ul>
<li>
<button class="dump">AC</button>
<button class="clear">C</button>
<button class="oper" operator="5">%</button>
<button class="oper" operator="4">/</button>
</li>
<li>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="oper" operator="3">*</button>
</li>
<li>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="oper" operator="2">-</button>
</li>
<li>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="oper" operator="1">+</button>
</li>
<li>
<button class="number" style="width:105px;">0</button>
<button class="spot">.</button>
<button class="equal" operator="0">=</button>
</li>
</ul>
</div>
</div>
</body>
</html>
实验总结
通过本次实验还有部分要求未掌握，未通过此次实验实现