首先,你好。很棒的论坛/网站:)
我整个周末一直在我的个人网站上工作,现在我仍然坚持这个“游戏”的想法,我想添加我的网站。我非常了解HTML和CSS,但我对JS / jQuery很新。
让我试着从用户体验中解释他应该对“游戏”做些什么。
用户从新号码列表(11-15)中选择 10个号码,用户从中选择3个号码以及 2个额外号码。这些选定的数字然后转到另一个div(或其他)。从这一点来说,我可以使用PHP完成我的工作。但我完全坚持这一部分。我知道,我知道它非常简单但是必须将我的网站编码冻结48小时:D
从这些中选择5个数字:1-2-3-4-5-6-7-8-9-10 从那里选择2个额外的数字:11-12-13-14-15
这些选中的数字应该用div中的jQuery显示,如下所示: 正常:2-3-6-7-8额外:12-14
用户还可以清除所选的号码(如果他想要一起选择不同的号码)和/或删除一个号码并选择新的号码。当选择5/2 号码时,所有其他号码应以某种方式禁用,以便用户不能选择超过5/2的号码。
如果用户可以随机选择数字(点击某个按钮并自动选择5 + 2个数字),那也很酷。但我不知道如何做到这一点?
现在选择数字可能就是这样吗?
//5 numbers
$("#mainNumbers div").click(function) {
var selectedNumber = $(this).text().clone();
$("#selectedMainNumbers").append("<div>"+selectedNumber+"</div>");
}
//2 extra numbers
$("#extraNumbers div").click(function) {
var selectedNumber = $(this).text().clone();
$("#selectedExtraNumbers").append("<div>"+selectedNumber+"</div>");
}
清除选择可能是这样的吗?
$("#clearNumbers").click(function) {
$("#selectedMainNumbers, #selectedExtraNumbers").empty();
}
那些看起来不错吗?或者那些能以某种方式做得更好。
现在是我不知道的部分。 如何进行数字排序?使用数组?例如,用户首先点击数字5,然后将其添加到#selectedMainNumbers div,然后选择2并将其添加到#selectedMainNumbers div中,现在看起来像是8-3,但我想要数字是数字顺序总是,所以数字应该是3-8格式。
还应该如何挑选随机数?如果用户已经选择了所需的5个号码,那么选择禁用号码呢?
这是很长的帖子。对于那个很抱歉。希望你能给我一些暗示......因为我的大脑不工作:/谢谢你。询问是否有什么不清楚。答案 0 :(得分:3)
这个怎么样:http://jsfiddle.net/ABetK/?
如果您想将其发送到服务器,请使用表单:http://jsfiddle.net/ABetK/1/
修改强>
似乎我没有阅读所有问题,所以我的jsfiddle没有做user1610229想要的所有事情。
答案 1 :(得分:1)
HTML:
<div id="mainNumbers"></div>
<div id="extraNumbers"></div>
<div id="selected_mainNumbers"></div>
<div id="selected_extraNumbers"></div>
<br /> <button id="generateNumbers">Generate random numbers</button>
<br /> <button id="clearNumbers">Clear selected</button>
CSS:
#mainNumbers, #extraNumbers{
margin:5px;
padding:16px;
background:#345;
}
#mainNumbers div,
#extraNumbers div,
#selected_mainNumbers div,
#selected_extraNumbers div
{
cursor:pointer;
display:inline;
background:#eee;
padding:5px 10px;
border-radius:10px;
margin:3px;
}
#selected_mainNumbers, #selected_extraNumbers{
margin-top:5px;
padding:16px;
height:20px;
background:#789;
}
.selectedNum{
opacity:0.5;
}
#selected_mainNumbers div,
#selected_extraNumbers div{
opacity:1;
background:gold;
}
jQuery的:
// generate buttons with numbers
for(i=1;i<=15;i++){
var appendWhile= i<=10 ?
$('#mainNumbers').append('<div>'+ i +'</div>') :
$('#extraNumbers').append('<div>'+ i +'</div>') ;
}
// create arrays for selected numbers
var mainNumbers=[], extraNumbers=[];
// function print array ///
function printArray(name, arrName){
$('#selected_'+name).empty();
for(a=0;a<arrName.length;a++){
$('#selected_'+name).append('<div>'+ arrName[a]+'</div>');
}
}
// select function ////////
function selectNum(clickedElement, name, len){
var arrName = window[name]; // convert string to var
var num = parseInt( $(clickedElement).text(), 10 );
if( arrName.length < len && $.inArray(num,arrName) == -1 ) {
arrName.push(num);
arrName.sort(function(a,b){return a-b;}); // sort numerically
printArray(name, arrName);
$(clickedElement).addClass('selectedNum');
}else{
$(clickedElement).parent().fadeTo(0,0.3).fadeTo(400,1); // visually alert array is full
}
}
// remove function ///////////
function removeFromArr(clickedElement,arrName){
var num = parseInt( $(clickedElement).text(), 10 );
for(i=0;i<arrName.length;i++){
if(arrName[i]==num){
arrName.splice(i,1);
$(clickedElement).remove();
}
}
}
// clear function
function clearAll(){
mainNumbers=[], extraNumbers=[]; // reset arrays
$('#selected_mainNumbers, #selected_extraNumbers').empty(); // remove selected buttons
$('.selectedNum').removeClass(); // reset 'selected' states
}
// clicks ////////////////////
$('#mainNumbers, #extraNumbers').on('click','div',function(){
var len = $(this).parent().attr('id')=='mainNumbers' ? 5 : 2;
selectNum( $(this), $(this).parent().attr('id'), len );
});
$('#selected_mainNumbers, #selected_extraNumbers').on('click','div',function(){
var arrName = $(this).parent().attr('id').split('selected_')[1];
$('#'+arrName).find('div:contains('+$(this).text()+')').removeClass('selectedNum');
removeFromArr( $(this), window[arrName] );
});
// clear all /////////////////
$('#clearNumbers').click(function(){
clearAll();
});
// generate random ///////////
$('#generateNumbers').click(function(){
clearAll();
for(r=0;r<5;r++){
var n = Math.ceil(Math.random() * 10);
while ($.inArray(n, mainNumbers) > -1){ // loop until no match found
n = Math.ceil(Math.random() * 10);
}
mainNumbers[r] = n;
$('#mainNumbers div').eq(n-1).addClass('selectedNum');
}
for(rr=0;rr<2;rr++){
var nn = Math.ceil(Math.random() * (15-10)+10);
while ($.inArray(nn, extraNumbers) > -1){
nn = Math.ceil(Math.random() * (15-10)+10);
}
extraNumbers[rr] = nn;
$('#extraNumbers div').eq(nn-10-1).addClass('selectedNum');
}
mainNumbers.sort(function(a,b){return a-b;}); // sort array
extraNumbers.sort(function(a,b){return a-b;}); // sort array
printArray( 'mainNumbers', mainNumbers );
printArray('extraNumbers', extraNumbers);
});