电影购票系统

最新推荐文章于 2022-07-27 22:15:21 发布

神游仙人

最新推荐文章于 2022-07-27 22:15:21 发布

阅读量2.8k

点赞数 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
thead{
background: gray;
}
.tip{

background: yellow;

}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="skey" />
<input type="button" id="" value="搜索" ng-click="search()" />
<select name="" ng-model="orderKey">
<option value="0">按要求排序</option>
<option value="time">电影时长升序排列</option>
<option value="-time">电影时长降序排列</option>
<option value="price">售价升序排列</option>
<option value="-price">售价降序排列</option>
<option value="playTime">上映时间升序排列</option>
<option value="-playTime">上映时间降序排列</option>
<option value="score">评分升序排列</option>
<option value="-score">评分降序排列</option>
</select>
<input type="button" id="" value="批量删除" ng-click="delAll()"/>
<input type="button" id="" value="清空所有数据" ng-click="clearAll()"/>
<input type="button" id="" value="添加数据" ng-click="isShow=!isShow"/>
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead ><tr>
<th><input type="checkbox" id="" value="" ng-model="checkAll" /></th>
<th>电影名称</th>
<th>类别</th>
<th>时长</th>
<th>导演</th>
<th>售价</th>
<th>上映时间</th>
<th>评分</th>
<th>操作</th>
</tr>
</thead>
<tbody><tr ng-repeat="x in films|filter:searchKey|orderBy:orderKey">
<td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></td>
<td>{{x.name}}</td>
<td>{{x.type[0]+","+x.type[1]}}</td>
<td>{{x.time}}</td>
<td>{{x.author}}</td>
<td>{{x.price|currency:"￥："}}</td>
<td>{{x.playTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>{{x.score}}</td>
<td>
<input type="button" id="" value="修改" ng-click="modify(x.name)" />
<input type="button" id="" value="删除" ng-click="delfilm(x.name)"/>
</td>
</tr></tbody>

</table>
<div>总价是：{{getTotal()|currency:"￥："}}</div>

<fieldset id="" ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr><td align="right">类别：</td>
<td>
<select ng-init="select_maintype=filmType[0]" ng-model="select_maintype" ng-options="x.maintype for x in filmType"
ng-change="changeType()" >
</select>
<select ng-init="select_child=select_maintype.child[0]" ng-model="select_child" ng-options="y for y in select_maintype.child">
</select>

</td>
<td><span id="s_type" class="tip"></span></td>
</tr>
<tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="atime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr><td align="right">售价：</td><td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr><td align="right">上映时间：</td><td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
<td><span id="s_paytime" class="tip"></span></td>
</tr>
<tr><td align="right">评分：</td><td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()"/></td></tr>
</table>

</fieldset>

<fieldset id="" ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="mname" /></td>
</tr>

<tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>

<tr><td align="center" colspan="2"><input type="button" id="" value="修改保存" ng-click="modifySave()"/></td></tr>
</table>

</fieldset>

<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){

$scope.orderKey="0";
$scope.checkAll=false;
//进行初使化
$scope.films=[];
$scope.isShow=false;

$scope.filmType=[
{"maintype":"喜剧","child":["喜剧1","喜剧2"]},
{"maintype":"冒险","child":["冒险1","冒险2","冒险3"]},
{"maintype":"幻想","child":["幻想1","幻想2"]}

];

//请求网络数据
$http({
method:"GET",
url:"json/new_file.js"
//url:"json/filmdata.json"
//url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce? uri=MonthTest"
}).then(function success(response){
$scope.films=response.data;
},function error(response){

});

//查询
$scope.search=function(){
$scope.searchKey=$scope.skey;
}
//得到总价
$scope.getTotal=function(){
var totalPrice=0;
for (var i = 0; i < $scope.films.length; i++) {
totalPrice+=$scope.films[i].price;
}
return totalPrice;
}
//删除数据
$scope.delfilm=function(fname){
for (var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name==fname){
$scope.films.splice(i,1);
break;
}
}
}
//清除所有数据
$scope.clearAll=function(){
$scope.films=[];
}
//批量删除
$scope.delAll=function(){
//选出所有选中的checkbox
var checks=$("input:checked");
for (var i = 0; i < checks.length; i++) {
var vname=checks[i].value;
// alert(vname);
for (var j = 0; j < $scope.films.length; j++) {
if($scope.films[j].name==vname){
$scope.films.splice(j,1);
break;
}
}
}

}

$scope.save=function(){
//清空所有错误提示数据
$(".tip").html("");
//电影名称
var aname=$scope.aname;
//时长
var atime=$scope.atime;
//导演
var aauthor=$scope.aauthor;
//售价
var aprice=$scope.aprice;
//上映时间
var apaytime=$scope.apaytime;
//评分
var ascore=$scope.ascore;

if(aname==null || aname.length<3 || aname.length>10){
$("#s_name").html("电影名称不能为空且长度在3位到10位之间");
return;
}
if(atime==null){
$("#s_time").html("时长不能为空");
return;
}
if(aauthor==null){
$("#s_author").html("导演不能为空");
return;
}
if(aprice==null){
$("#s_price").html("售价不能为空");
return;
}
if(apaytime==null){
$("#s_paytime").html("上映时间不能为空");
return;
}
if(ascore==null){
$("#s_score").html("评分不能为空");
return;
}

var newfilm={};
newfilm.name=aname;
newfilm.time=atime;
newfilm.author=aauthor;

newfilm.price=aprice;
newfilm.playTime=apaytime;
newfilm.score=ascore;

var newtypes=[];
newtypes.push($scope.select_maintype.maintype);
newtypes.push($scope.select_child);
newfilm.type=newtypes;

//进行添加
$scope.films.push(newfilm);

$scope.isShow=!$scope.isShow;

}
//切换类型
$scope.changeType=function(){
$scope.select_child=$scope.select_maintype.child[0];
}
var mdata="";
//修改
$scope.modify=function(fname){
$scope.isModifyShow=!$scope.isModifyShow;

for (var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name==fname){
mdata=$scope.films[i];
$scope.mname=mdata.name;
$scope.mtime=mdata.time;
$scope.mauthor=mdata.author;
break;
}
}

}

//修改保存
$scope.modifySave=function(){
mdata.name=$scope.mname;
mdata.time=$scope.mtime;
mdata.author=$scope.mauthor;

$scope.isModifyShow=!$scope.isModifyShow;

}

});
</script>

</body>
</html>