路由习题

最新推荐文章于 2024-02-29 21:46:08 发布

8520mmm

最新推荐文章于 2024-02-29 21:46:08 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/qq_39753947/article/details/78301485

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.leftSide{
width: 20%;
display: inline-block;
background-color: red;
height: 600px;
float: left
}
.rightSide{
width: 80%;
display: inline-block;
background-color:#b2d235;
height: 600px;
float: right
}
li {
list-style-type: none;
font-size: 30px;
padding: 37px 0px 37px 100px;
border: 1px solid blue;
margin-left: -40px;
}
li a {
text-decoration: none;
}
</style>

<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>

<script>
/*2.注入路由服务*/
var app = angular.module("myApp",['ngRoute']);
//3.配置路由规则
app.config(["$routeProvider",function($routeProvider){
//使用路由服务对象，配置路由规则
$routeProvider
.when("/login",{
controller:"loginCtrl",
templateUrl:"login.html"
})
.when("/main",{
controller:"mainCtrl",
templateUrl:"main.html"
})
.when("/game",{
controller:"gameCtrl",
templateUrl:"game.html"
})
.when("/mine",{
controller:"mineCtrl",
templateUrl:"mine.html"
})
.when("/setting",{
controller:"settingCtrl",
templateUrl:"setting.html"
})
.otherwise({redirectTo:"/login"});
}]);
//主控制器
app.controller("myCtrl",function($scope){

});
//游戏
app.controller("gameCtrl",function($scope){
$scope.check = function() {
//console.log($scope.random);
$scope.differ = $scope.guess - $scope.random;
$scope.num++;

};
$scope.reset = function() {
$scope.differ = null;//差值
$scope.guess = null;//猜的数
$scope.num = 0;//次数
$scope.random = Math.ceil(Math.random() * 10);//随机数，标准值

};
$scope.reset();

});
//注册页面控制器
app.controller("loginCtrl",function($scope){
$scope.name = "";
$scope.login = function(){
if($scope.name == null || $scope.name == ""){
alert("用户名不能为空");
}
}
});
//主页面控制器
app.controller("mainCtrl",function($scope){
$scope.users = [{
id:1,
name:"张三",
pwd:"111",
age:22,
sex:"男",
state:false
},{
id:2,
name:"李四",
pwd:"222",
age:22,
sex:"男",
state:false
},{
id:3,
name:"王五",
pwd:"333",
age:44,
sex:"男",
state:false
},{
id:4,
name:"赵六",
pwd:"444",
age:55,
sex:"男",
state:false
}];

$scope.deleteSel = function(){
//定义空数组，保存选中项的name
var arr = [];
//遍历数据源，把选中项的名字添加到数组中。
for(index in $scope.users){
if($scope.users[index].state){
//$scope.users.splice(index,1);
arr.push($scope.users[index].name);
}
}
//遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。
if(arr.length>0){
for(i in arr){
//对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。
for(i2 in $scope.users){
if(arr[i] == $scope.users[i2].name){
$scope.users.splice(i2,1);
}
}
}
}else{
alert("请选择");
}
}
//删除
$scope.del=function($index){
if($index>=0)
{
if(confirm("确认删除")){
$scope.users.splice($index,1);
}
}
}
//全选方法
$scope.selectAll = false;
$scope.selectAllFun = function(){
if($scope.selectAll){
//alert("afsd");
for(index in $scope.users){
$scope.users[index].state = true;
}
}else{
for(index in $scope.users){
$scope.users[index].state = false;
}
}
}

//检测是否全选
$scope.checkSelect = function(index){
var temp = 0;
if($scope.users[index].state == true){
alert("asdf");
temp++;
}else{
temp--;
}
if(temp == $scope.users.length){
$scope.selectAll = true;
}else{
$scope.selectAll = false;
}

var haha = false;
for(i in $scope.users){
if($scope.users[i].state == true){

}else{
haha = true;
}
}
if(haha){
$scope.selectAll = false;
}else{
$scope.selectAll = true;
}
}

//判断年龄范围
$scope.size = "--请选择--";
$scope.ageSize = function(age,size){
if(size == "--请选择--"){
return true;
}else{
var arr = size.split("-");
var ageMin = arr[0];
var ageMax = arr[1];
if(age>ageMin && age<ageMax){
return true;
}else{
return false;
}
}
}
});

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="leftSide">
<ul>
<li><a href="#/login">登录</a></li>
<li><a href="#/main">首页</a></li>
<li><a href="#/game">游戏</a></li>
<li><a href="#/mine">我的</a></li>
<li><a href="#/setting">设置</a></li>
</ul>
</div>
<div class="rightSide" ng-view>

</div>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
font-size: 30px;
}

input {
width: 400px;
height: 40px;
font-size: 30px;
}

button {
width: 80px;
height: 50px;
border: 0;
text-align: center;
line-height: 50px;
background: darkblue;
color: #fff;
margin-left: 5px;
}
.check{
background-color: #aaf;
}
.reset{
background-color: #afa;
}
div{
width: 500px;
height: 50px;
background-color: #aaa;
}

</style>
</head>
<body>
<center>
<h2>猜数游戏</h2>
<div>猜一猜，多大值？（1-10）</div><br/>
<input type="number" ng-model="guess">
<button ng-click="check()" class="check">检查</button>
<button ng-click="reset()" class="reset">重玩一次</button><br/><br/>
<p ng-if="differ>0">猜大了</p>
<p ng-if="differ<0">猜小了</p>
<p ng-if="differ==0">猜对了</p>
<p>一共猜了<span ng-bind="num"></span>次</p>
</center>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h3>主页面</h3>
<div>
姓名：<input type="text" placeholder="用户名" size="8" ng-model="gen"/>  
年龄：<select ng-model="size">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select>  
<button ng-click="deleteSel()">批量删除</button><br/><br/>
</div>
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>id</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{name:gen}" ng-if="ageSize(user.age,size)">
<td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.pwd}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h3>注册界面</h3>
<table border="1" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<th>用户名：</th>
<td><input ng-model="name" type="text" placeholder="请输入用户名"/></td>
</tr><tr>
<th>密码：</th>
<td><input ng-model="name" type="text" placeholder="请输入密码"/></td>
</tr>
<tr>
<th>年龄：</th>
<td><input ng-model="name" type="text" placeholder="请输入年龄"/></td>
</tr>
<tr>
<th>性别：</th>
<td><input ng-model="name" type="text" placeholder="请输入性别"/></td>
</tr>
<tr align="center">
<td colspan="2"><input ng-click="login()" type="button" value="注册"/></td>
</tr>
</tbody>
</table>
</center>

</body>
</html>

8520mmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由习题

.leftSide{width: 20%;display: inline-block;background-color: red;height: 600px;float: left}.rightSide{width: 80%;display: inline-block;background-color:#b2d235;height: 600px;fl
复制链接

扫一扫