Skip to content

Instantly share code, notes, and snippets.

@ntuaha

ntuaha/random.js

Created December 27, 2014 14:21
Show Gist options
  • Save ntuaha/f7495a53fbe761d1dec2 to your computer and use it in GitHub Desktop.
Save ntuaha/f7495a53fbe761d1dec2 to your computer and use it in GitHub Desktop.
Download ZIP
Random
Raw
gistfile1.html
<!doctype html>
<html ng-app="randomPick">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="./css/bootstrap.3.2.0.css">
<link rel="stylesheet" href="./css/simulator.css">
<script src="./js/jquery.js"></script>
<script src="./js/angular.1.3.8.min.js"></script>
<script src="./js/random.js"></script>
<title>隨機抽獎</title>
</head>
<body ng-controller="RandomCtrl as rand ">
<!--<body vote-simulator>-->
<div class="row col-md-12 randbox" style="display:block;height:1500px;">
<div class="inbox col-md-7 ">
<ul id="random_box" >
<li ng-repeat="i in id_list" ng-attr-id="{{ 'random_' + i }}" ng-style="{'background-position-x':-102*(i-1)+20+'px'}">
<div style='width:100%;height:164px;background:rgba(0,0,0,0.5);position:absolute;top:-20px'></div>
</li>
<li id="random_14" style=" background-image:none;background-color:rgba(44,152,147,0.8);color:white;font-size:14pt;"><div style='width:100%;height:164px;background:rgba(0,0,0,0.5);position:absolute;top:-20px' class="text-center"><br/><br/><br/>再來一次</div></li>
</ul>
<b class="ok" onclick="StartGame()">隨機</b>
</div>
<div class="col-md-3 col-md-1-offset">
<button class="btn btn-default" onClick="nextStage()">下一階段</button>
<ul class="list-group">
<li class='list-group-item active'><span class="badge">0</span>目前已挑出</li>
</ul>
</div>
</div>
<div class="container-flow">
<!-- 全體名單 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">全體名單</h3></div>
<div class="panel-body">
目前還剩下{{random.candidates.length}}人
</div>
<table class="table table-striped">
<tbody>
<!-- 各候選人 -->
<tr ng-repeat = "pop in random.candidates">
<td >
<img style="width:64px;height:64px" src="{{'img/'+pop+'.jpg'}}" />
<span >
{{pop}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">被選上的人</h3></div>
<div class="panel-body">
已經選上{{random.results.length}}人
</div>
<table class="table table-striped">
<tbody>
<!-- 各候選人 -->
<tr ng-repeat = "pop in random.results">
<td>
<img style="width:64px;height:64px" src="{{'img/'+pop+'.jpg'}}" />
<span >
{{pop}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-3 col-md-1-offset">
<div class='row'>
<button class="btn btn-default" ng-click="pick(random.pick())" ng-show="random.candidates.length>0">挑選!</button>
<button class="btn btn-default" ng-click="random.redo()" ng-show="random.results.length>0">回到上一步</button>
<button class="btn btn-default" ng-click="random.reset()" ng-show="random.results.length>0">重來</button>
<button class="btn btn-default" ng-click="up()" >回上頭</button>
</div>
<div class="row">
<ul class="list-group">
<li class='list-group-item active'><span class="badge">0</span>目前已挑出</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12" id="info-pannel" ng-click="hideinfo()">
<h1>得獎的是</h1>
<div id="info" class="text-center" style="font-size:50pt">
Panel content
</div>
<img src="" style="margin-left:45%;height:550px" class="img-circle">
</div>
</body>
</html>
Raw
random.js
var RANDOM_AHA = function(list){
var _this = this ;
_this.list= list;
_this.results = [];
_this.candidates = [];
};
RANDOM_AHA.prototype.reset = function(){
this.candidates=this.list.slice(0);
this.results = [];
};
RANDOM_AHA.prototype.pick = function(){
var temp = [];
this.candidates = shuffle(this.candidates);
var num = parseInt(Math.random()*this.candidates.length);
for (var i in this.candidates){
if (i==num){
var result = this.candidates[i];
}else{
temp.push(this.candidates[i]);
}
}
this.candidates = temp;
console.log(num);
console.log(this.candidates);
console.log(this.results);
return result;
};
RANDOM_AHA.prototype.redo = function(){
this.candidates.push(this.results[this.results.length-1]);
this.results = this.results.slice(0,this.results.length-1);
};
/*
*/
(function(){
var list = [
"aaa",
"bbb"
];
var app = angular.module('randomPick',[]);
app.controller('RandomCtrl',['$scope',function($scope){
$scope.id_list = [];
for (var i=0;i<13;i++){
$scope.id_list.push(i+1);
}
$scope.random= new RANDOM_AHA(list);
$scope.random.reset();
/*
var checklist = ['candidates','results'];
for(var i in checklist){
$scope.$watch(checklist[i],function(){
console.log(checklist[i]);
},true);
}
*/
$scope.pick = function(data){
$scope.infostatus=false;
$("#info").text("");
$("#info-pannel img").attr("src","img/"+data+".jpg").hide();
$("#info-pannel").show(function(){
var typing_inst = setInterval(typing, 1000);
var i = 0;
var str=data;
function typing()
{
if(i < str.length-1)
{
i++;
$('#info').text(str.substr(0,i) + "_");
}
else if(i == str.length-1)
{
$('#info').text(str);
clearInterval(typing_inst);
$("#info-pannel img").show();
$scope.infostatus = true;
}
}
});
};
$scope.hideinfo = function(){
if($scope.infostatus){
$("#info-pannel").fadeOut(1000,function(){
$scope.$apply(function(){
$scope.random.results.push($("#info").text());
});
});
$scope.infostatus = false;
}
}
$scope.up = function(){
window.up = true;
$('html, body').animate({scrollTop: 0}, 'slow');
};
$scope.infostatus = false;
}]);
$('#info-pannel').keydown(function (e){
if(e.keyCode == 13){
$("#info-pannel").click();
return false;
}
});
})();
/**/
var index=1, //µ±Ç°ÁÁÇøλÖÃ
prevIndex=14, //ǰһλÖÃ
Speed=300, //³õʼËÙ¶È
Time, //¶¨Òå¶ÔÏó
arr_length = 14; //GetSide(5,5), //³õʼ»¯Êý×é
EndIndex=1, //¾ö¶¨ÔÚÄÄÒ»¸ñ±äÂý
cycle=0, //ת¶¯È¦Êý
EndCycle=3, //¼ÆËãȦÊý
flag=false, //½áÊøת¶¯±êÖ¾
random_num=1, //Öн±Êý
quick=0; //¼ÓËÙ
function StartGame(){
$("#random_box li").removeClass("random_current"); //È¡ÏûÑ¡ÖÐ
$(".inbox b").fadeOut();
//random_num = parseInt($("#txtnum").val());//
random_num = Math.floor(Math.random()*13+2); //²ú³öËæ»úÖн±Êý2--12Ö®¼ä
index=1; //ÔÙÀ´Ò»´Î,´Ó1¿ªÊ¼
cycle=0;
flag=false;
//EndIndex=Math.floor(Math.random()*12);
if(random_num>5) {
EndIndex = random_num - 5; //Ç°5¸ñ¿ªÊ¼±äÂý
} else {
EndIndex = random_num + 14 - 5; //Ç°5¸ñ¿ªÊ¼±äÂý
}
//EndCycle=Math.floor(Math.random()*3);
Time = setInterval(Star,Speed);
}
var color = 0;
var number = 0;
var sizes = [0,-285,-570,-855,-1455];
var add = false;
var text = null;
var up = true;
function Star(num){
//ÅÜÂíµÆ±äËÙ
if(flag==false){
//×ßÎå¸ñ¿ªÊ¼¼ÓËÙ
if(quick==5){
clearInterval(Time);
Speed=50;
Time=setInterval(Star,Speed);
}
//ÅÜNȦ¼õËÙ
if(cycle==EndCycle+1 && index-1==EndIndex){
clearInterval(Time);
Speed=300;
flag=true; //´¥·¢½áÊø
Time=setInterval(Star,Speed);
}
}
if(index>arr_length){
index=1;
cycle++;
}
//½áÊøת¶¯²¢Ñ¡ÖкÅÂë
if(flag==true && index==parseInt(random_num)){
quick=0;
clearInterval(Time);
number = index ;
pickColor();
console.log(color);
console.log(number);
var text = (Math.random()>0.5)?"遞增":"遞減";
$(".inbox b").click(function(){
$("#random_box li").html("");
$("<div style='width:100%;height:164px;background:rgba(0,0,0,0.5);position:absolute;top:-20px'></div>").appendTo($("#random_box li"));
});
if(index ==14){
$(".inbox b").fadeIn(200).text("在挑一次!!");
}else{
$(".inbox b").text("").fadeIn(200,function(){
$(this).text(getText(window.number,window.color,text));
$(".col-md-3 ul").append($("<li class='list-group-item'></li>").text(getText(window.number,window.color,text)));
$(".col-md-3 li.active .badge").css({"background-color":"red"}).text(($(".col-md-3 li").length/2-1));
});
}
}
$("#random_"+index).addClass('random_current');
$("#random_"+index+" div").slideUp(100);
pickColor();
if(index>1)
prevIndex=index-1;
else{
prevIndex=arr_length;
}
$("#random_"+prevIndex).removeClass('random_current').html(""); //È¡ÏûÉÏ´ÎÑ¡ÔñÑùʽ
$("<div style='width:100%;height:164px;background:rgba(0,0,0,0.5);position:absolute;top:-20px'></div>").appendTo($("#random_"+prevIndex));
index++;
quick++;
}
function pickColor(){
switch(color){
case 0:
$("#random_box li").removeClass('spade');
break;
case 1:
$("#random_box li").removeClass('heart');
break;
case 2:
$("#random_box li").removeClass('diamond');
break;
case 3:
$("#random_box li").removeClass('club');
break;
}
color = parseInt(Math.random()*4);
switch(color){
case 0:
$("#random_box li").addClass('spade');
break;
case 1:
$("#random_box li").addClass('heart');
break;
case 2:
$("#random_box li").addClass('diamond');
break;
case 3:
$("#random_box li").addClass('club');
break;
}
}
function getText(number,color,text){
switch(number){
case 11:
number='J';
break;
case 12:
number='Q';
break;
case 13:
number='K';
break;
case 1:
number='A';
break;
}
switch(color){
case 0:
color='黑桃';
break;
case 1:
color='紅心';
break;
case 2:
color='方塊';
break;
case 3:
color='梅花';
break;
}
return color+" "+number+"\n"+text;
}
function nextStage(){
window.up = false;
$('html,body').animate({scrollTop: $('.col-md-4').offset().top }, 'slow');
}
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
$.fn.scrollStopped = function(callback) {
var $this = $(this), self = this;
$this.scroll(function(){
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,1000,self));
});
};
$('html,body').scrollStopped(function(){
if(window.up){
$('html, body').animate({
scrollTop: 0
},'slow');
console.log(window.up);
}else{
$('html, body').animate({
scrollTop: $('.col-md-4').offset().top
},'slow');
}
});
Raw
simulator.css
path { stroke: #fff; }
path:hover { opacity:0.9; }
rect:hover { fill:blue; }
.axis { font: 10px sans-serif; }
.legend tr{ border-bottom:1px solid grey; }
.legend tr:first-child{ border-top:1px solid grey; }
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path { display: none; }
.legend{
margin-bottom:76px;
display:inline-block;
border-collapse: collapse;
border-spacing: 0px;
}
.legend td{
padding:4px 5px;
vertical-align:bottom;
}
.legendFreq, .legendPerc{
align:right;
width:50px;
}
*{
font-family: "Consolas","微軟正黑體";
}
.box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; }
.inbox{ width:751px; height:596px;position:relative;}
#random_box li{ position:absolute; width:144px; overflow:hidden; height:144px; border:1px solid #c7c5ca; background-image:url(../img/cards.png); background-repeat:no-repeat;}
#random_box li img{ width:144px; display:block; height:144px;}
.ok{ display:block; width:442px; height:294px; background:rgb(44,152,147); color:#fff; font-size:48px; position:absolute; top:149px; left:148px; cursor:pointer; text-align:center; line-height:280px;}
#random_1{ left:0; top:0;}
#random_2{ left:148px;top:0;}
#random_3{ left:296px;top:0;}
#random_4{ left:444px;top:0;}
#random_5{ left:592px;top:0; }
#random_6{ left:592px;top:148px;}
#random_7{ left:592px; top:298px;}
#random_8{ left:592px; top:446px;}
#random_9{ left:444px; top:446px;}
#random_10{ left:296px; top:446px;}
#random_11{ left:148px; top:446px;}
#random_12{ left:0; top:446px;}
#random_13{ left:0; top:298px;}
#random_14{ left:0; top:148px;}
.spade{ background-position-y:0px }
.heart{ background-position-y:-286px }
.club{ background-position-y:-143px }
.diamond{ background-position-y:-429px }
#random_101{ left:0; top:0;}
#random_102{ left:148px;top:0;}
#random_103{ left:296px;top:0;}
#random_104{ left:444px;top:0;}
#random_105{ left:592px;top:0; }
#random_106{ left:592px;top:148px;}
#random_107{ left:592px; top:298px;}
#random_108{ left:592px; top:446px;}
#random_109{ left:444px; top:446px;}
#random_110{ left:296px; top:446px;}
#random_111{ left:148px; top:446px;}
#random_112{ left:0; top:446px;}
#random_113{ left:0; top:298px;}
#random_114{ left:0; top:148px;}
body{overflow: hidden};
#random_box li.random_current{border:4px solid rgb(44,152,147);}
#info-pannel{
z-index:99;
display:none;
left:0px;
top:0px;
position:fixed;
height:100%;
background-color:rgba(0,0,0,0.8);
color:white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment