實現隨機產生人名的js特效

時間 2019-11-30

原文原文鏈接

下面是使用jQuery和js寫的一個小小特效，但願能對你們有所幫助，若是有什麼更好的方法，請分享javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隨機產生人名</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.container{
width:700px;
height:auto;
margin:0px auto;

}
.up{
width:700px;
height:160px;
background-color:#366;

}
.down{
width:700px;
height:600px;
background-color:#993;
position:relative;
}
li{
list-style:none;
float:left;
width:50px;
text-align:center;
background-color:#FF0;
padding:5px;
margin:5px;
}
span{
display:block;
padding:4px;
width:80px;
height:25px;
background-color:#CF0;
text-align:center;
position:absolute;
}
.input{
width:70px;
height:25px;
background-color:#FFF;
border:none;
text-align:center;
margin-left:20px;

 

}

</style>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(e) {
//準備人名
var stuName=["李萌","高雪薇","王路","楊佳","毛毛","高麗靜","於雲鵬","李小虎","常向陽","韓飛","薛曉鬆","小孩","李曉陽"];
$(stuName).each(function(index, element) {
//準備隨機數，控制位置
var num1=Math.random()*1000;
var num2=Math.random()*1000;
while(num1>612){//不能超出容器寬高
num1=Math.random()*1000;
}
while(num2>567){
num2=Math.random()*1000;
}
var color1=parseInt(Math.random()*256);//隨機產生的顏色

var color2=parseInt(Math.random()*256);

var color3=parseInt(Math.random()*256);


$("#down").append("<span style='left:"+num1+"px;top:"+num2+"px;background-color:rgb("+color1+","+color2+","+color3+")' >"+this+"</span>");
});


});
var timer;
//開始進行隨機抽取
function beginChou(){
timer=setInterval(function(){//定義一個timer
$("#down span").each(function(index, element) {
var num1=Math.random()*1000;
var num2=Math.random()*1000;
while(num1>612){
num1=Math.random()*1000;
}
while(num2>567){
num2=Math.random()*1000;
}
$(this).animate({//讓本身自己進行自定義動畫
left:num1+"px",
top:num2+"px"
},500);
});

},100);

}
//結束隨機抽取
function endChou(){
clearInterval(timer);
$("#down span").each(function(index, element) {
$(this).stop(true);
});
var count=$("#down span").length;
var ranChou;
if(count>10){//判斷你的數組長度是大於10仍是100
ranChou=Math.random()*100;
while(ranChou>count){
ranChou=Math.random()*100;
}
}
ranChou=Math.random()*10;
while(ranChou>count){
ranChou=Math.random()*10;
}
ranChou=parseInt(ranChou);
var spanUp=$("#down span")[ranChou];//獲取你抽到的元素
$("#mingdan").append("<li>"+$(spanUp).html()+"</li>");
$("#down span")[ranChou].remove();//移除你抽到的元素
}

</script>
</head>

<body>
<div class="container" id="container">
<div id="up" class="up">
<h3 style="float:left">抽獎人員名單</h3>
<input class="input" type="button" value="開始" onclick="beginChou()" />
<input class="input" type="button" value="結束" onclick="endChou()" />
<ul style="margin-top:30px;" id="mingdan">

</ul>
</div>
<div id="down" class="down">

</div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。