随机选择案例

来源：互联网发布：linux查看文件编码格式编辑：程序博客网时间：2024/05/22 09:43

<!DOCTYPE HTML>
<html ng-app="myApp1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
.boxin{
padding:0 20px;
}
.boxin span{
position:relative;
top: -1px;
left: 6px;

}
label{
width: 100%;
height: 100%;
display: block;
}
.boss{
color:red;
font-size:18px;
font-weight:bold;
}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp1',[]);
m1.controller('Aaa',['$scope',function($scope){


$scope.adminx=[
"人物一",
"人物二",
"人物三",
"人物四",
"人物五",
"人物六",
"人物七",
"人物八",
"人物九",
"人物十"
]

$scope.adminy=[
"哈哈一",
"哈哈二",
"哈哈三",
"哈哈四",
"哈哈五",
"哈哈六",
"哈哈七",
"哈哈八",
"哈哈九",
"哈哈十"
]

y = $scope.adminy.length-1;

//取一个范围内的随机数函数
function rnd(n,m){
return parseInt(n+Math.random()*(m-n));//随机数函数Math.random()是大于等于0 到1的一个随机数不等于1
};

/* alert(parseInt(0+Math.random()*(x-0)));

alert($scope.adminx[parseInt(0+Math.random()*(x-0))]);*/


$scope.confirm = function(){
$scope.obValue = [];
var arrays = document.getElementsByClassName("ipt");
for(var i = 0; i < arrays.length;i++){
var single = arrays[i];
if(single.checked){
$scope.obValue.push($scope.adminx[i]);

}
}
if($scope.obValue.length <= 0){
alert("请选择");
return;
}
x = $scope.obValue.length;
var randomInt = parseInt(0+Math.random()*(x-0));
alert($scope.obValue[randomInt]);
}

}]);

</script>
</head>

<body>
<div ng-controller="Aaa">
<div class="box" style="width:100%;height:660px;background:#000;opacity:0.6;padding-top:10px;">
<div class="boss">
<p>1</p>
<p>2</p>
</div>
<div class="boxin" style="width:600px;padding:60px 40px;border:2px solid #fff;overflow:hidden;margin:0px auto;position:relative;">
<ul style="z-index:1;color:#fff;width:40%;float:left;">
<li ng-repeat="admin in adminx" style="line-height:30px;border-bottom:1px solid #fff;cursor:pointer;">
<label ><input type="checkbox" class="ipt" index = {{$index}}><span>{{admin}}</span></label>
</li>
</ul>
<ul style="z-index:1;color:#fff;width:40%;float:right;">
<li ng-repeat="admin in adminy" style="line-height:30px;border-bottom:1px solid #fff;cursor:pointer;">
<label ><input type="checkbox" ><span>{{admin}}</span></label>
</li>
</ul>
<div style="position:absolute;bottom:10px;width: 100%;left: 43%;text-align: center;">
<p style="width:100px;height:40px;line-height:40px;background:orange;cursor:pointer;" ng-click="confirm()">确定</p>
</div>
</div>
</div>
</div>
</body>
</html>

0 0