网页月考练习1_网页基础月考-CSDN博客

本文链接：https://blog.csdn.net/wwe11122/article/details/79746024

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


	<style type="text/css">
	thead{
	background-color: gainsboro;
	}
	.top{
	padding-top: 10px;
	padding-bottom: 10px;
	}
	.tip{
	background-color: yellow;
	border: 1px solid red;
	padding-left: 5px;
	width: 160px;
	display: inline-block;/将span标签转换成行内块元素/

	}
	</style>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">

	<div class="top">
	<button ng-click="isShow=!isShow">新增订单</button>
	<button ng-click="delMore()">批量删除</button>
	<input type="text" name="" id="" value="" title="按商品名查询" ng-model="qname"/>
	<input type="text" name="" id="" value="" title="按手机号查询" ng-model="qphone"/>
	<select name="" ng-model="qstatus">
	<option value="">--按状态查询--</option>
	<option value="已发货">--已发货--</option>
	<option value="未发货">--未发货--</option>
	</select>
	</div>
	<table border="1" cellspacing="0" cellpadding="0" width="70%">
	<thead>
	<tr>
	<th><input type="checkbox" name="" id="" value="" /></th>
	<th>id<button ng-click="orderbyId()">排序</button></th>
	<th>商品名</th>
	<th>用户名</th>
	<th>手机号</th>
	<th>价格<button ng-click="orderbyPrice()">排序</button></th>
	<th>城市</th>
	<th>下单时间<button ng-click="orderbyDate()">排序</button></th>
	<th>状态</th>
	</tr></thead>
	<tbody>
	<tr ng-repeat="x in orders\|filter:{name:qname,phone:qphone,status:qstatus}\|orderBy:ob">
	<td><input type="checkbox" name="" id="" value="{{$index}}" />{{$index}}</td>
	<td>{{x.id}}</td>
	<td>{{x.name}}</td>
	<td>{{x.user}}</td>
	<td>{{x.phone}}</td>
	<td>{{x.price\|currency:"￥："}}</td>
	<td>{{x.city}}</td>
	<td>{{x.otime\|date:"MM-dd HH:mm:ss"}}</td>
	<td>{{x.status}}</td>

	</tr>
	</tbody>
	</table>


	<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="sname" value="" /></td>
	<td><span id="sname_tip"></span></td>
	</tr>
	<tr>
	<td align="right">用户名</td>
	<td><input type="text" name="" id="suser" value="" /></td>
	<td><span id="suser_tip"></span></td>
	</tr>
	<tr>
	<td align="right">手机号</td>
	<td><input type="text" name="" id="sphone" value="" /></td>
	<td><span id="sphone_tip"></span></td>
	</tr>
	<tr>
	<td align="right">价格为</td>
	<td><input type="text" name="" id="sprice" value="" /></td>
	<td><span id="sprice_tip"></span></td>
	</tr>
	<tr>
	<td align="right">城市</td>
	<td><select name="" id="scity">
	<option value="0">--选择城市--</option>
	<option value="1">北京</option>
	<option value="2">上海</option>
	</select></td>
	<td><span id="scity_tip"></span></td>
	</tr>
	<tr>
	<td align="center" colspan="3"><button ng-click="addOrder()">保存</button></td>

	</tr>
	</table>


	</fieldset>




	<script type="text/javascript">
	//1.查找Angular模块
	var app=angular.module("myapp",[]);
	//2.设置控制器
	app.controller("myctrl",function($scope){
	// var d=new Date().toLocaleDateString();
	// var nativeDate=new Date();
	// console.log(nativeDate);

	//初使化，添加订单列表不显示
	$scope.isShow=false;
	//初使化订单集合数据
	$scope.orders=[
	{id:2001,name:"iphone1",user:"张三",phone:"13212343212",price:5699,city:"北京",otime:(new Date()).setDate(new Date().getDate()+1),status:"已发货"},
	{id:3001,name:"iphone2",user:"李四",phone:"15212343212",price:8700,city:"北京",otime:(new Date()).setDate((new Date()).getDate()+2),status:"已发货"},
	{id:1001,name:"iphone3",user:"王五",phone:"17212343212",price:4300,city:"深圳",otime:(new Date()).setDate((new Date()).getDate()+3),status:"未发货"},
	{id:4001,name:"iphone4",user:"赵六",phone:"13412343212",price:5300,city:"上海",otime:(new Date()).setDate((new Date()).getDate()+4),status:"已发货"},
	{id:6001,name:"iphone5",user:"田七",phone:"18912343212",price:5600,city:"广州",otime:(new Date()).setDate((new Date()).getDate()+6),status:"未发货"}];

	//定义排序的字段
	$scope.ob="";
	//记住是否点击
	$scope.isClick=true;

	//按id字段进行排序
	$scope.orderbyId=function(){
	if($scope.isClick){
	$scope.ob="id";//升序排序
	$scope.isClick=false;
	}else{
	$scope.ob="-id";//降序排序
	$scope.isClick=true;
	}

	}
	//按price字段进行排序
	$scope.orderbyPrice=function(){
	if($scope.isClick){
	$scope.ob="price";//升序排序
	$scope.isClick=false;
	}else{
	$scope.ob="-price";//降序排序
	$scope.isClick=true;
	}
	}

	//按下单时间进行排序
	$scope.orderbyDate=function(){
	if($scope.isClick){
	$scope.ob="otime";
	$scope.isClick=false;
	}else{
	$scope.ob="-otime";
	$scope.isClick=true;
	}
	}

	//批量删除
	$scope.delMore=function(){
	//得到选中的checkbox
	var cheboxs=$("input:checked");
	for (var i = cheboxs.length-1; i >=0; i--) {
	//得到序号--从0开始
	var index=cheboxs[i].value;
	//进行删除
	$scope.orders.splice(index,1);
	}
	}

	$scope.addOrder=function(){

	//得到商品名
	var sname=$("#sname").val();
	var suser=$("#suser").val();
	var sphone=$("#sphone").val();
	var sprice=$("#sprice").val();
	var scity=$("#scity :selected").val();

	if(sname==""){
	$("#sname_tip").html("商品名不能为空");
	$("#sname_tip").addClass("tip");
	$("#sname").css("border","1px solid red");

	}else{
	$("#sname_tip").html("");
	$("#sname_tip").removeClass("tip");//移除class样式
	$("#sname").css("border","1px solid grey");
	}
	//判断用户名
	if(suser==""){
	$("#suser_tip").html("用户不能为空");
	$("#suser_tip").addClass("tip");
	$("#suser").css("border","1px solid red");

	}else{
	$("#suser_tip").html("");
	$("#suser_tip").removeClass("tip");//移除class样式
	$("#suser").css("border","1px solid grey");
	}
	//判断手机号
	if(sphone==""){
	$("#sphone_tip").html("手机号不能为空");
	$("#sphone_tip").addClass("tip");
	$("#sphone").css("border","1px solid red");

	}else{
	$("#sphone_tip").html("");
	$("#sphone_tip").removeClass("tip");//移除class样式
	$("#sphone").css("border","1px solid grey");
	}
	//判断价格
	if(sprice==""){
	$("#sprice_tip").html("价格不能为空");
	$("#sprice_tip").addClass("tip");
	$("#sprice").css("border","1px solid red");

	}else{
	$("#sprice_tip").html("");
	$("#sprice_tip").removeClass("tip");//移除class样式
	$("#sprice").css("border","1px solid grey");
	}

	//判断城市
	if(scity=="0"){
	$("#scity_tip").html("城市不能为空");
	$("#scity_tip").addClass("tip");
	$("#scity").css("border","1px solid red");

	}else{
	$("#scity_tip").html("");
	$("#scity_tip").removeClass("tip");//移除class样式
	$("#scity").css("border","1px solid grey");
	}

	if(sname!="" && suser!="" && sphone!="" && sprice!="" && scity!="0" ){
	var citytext=$("#scity :selected").text();
	//进行添加数据
	var neworders={};//定义对象
	neworders.id="5000";
	neworders.name=sname;
	neworders.user=suser;
	neworders.phone=sphone;
	neworders.price=sprice;
	neworders.city=citytext;
	neworders.otime="2018-3-23";
	neworders.status="未发货";

	$scope.orders.push(neworders);

	}
	}

	});


	</script>



	</body>
	</html>

网页 月考练习1

网页月考练习1