Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Skrypt losowania z efektem

Salur

Przez Salur
w Niezbędnik Programisty - Archiwum

Rekomendowane odpowiedzi

Salur Znawca

Salur

Opublikowano
Znawca

Salur

Opublikowano

Dzieńdoberek :)


W moim już drugim poradniku przedstawię Wam skrypt losowania który kiedyś używałem lecz mi się nie przydał. Kod jest w miarę wytłumaczony więc myślę że początkujący zrozumieją. Kod jest pisany główne w javascript/jquery, ma on za zadanie wylosować liczbę oraz ładnym efektem losującym ją ukazać. Przejdźmy do samego kodu.

CODE JS/HTML:

<html lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="author" content="Salur">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="css/style.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

	<title></title>

</head>

<body>
	<div class="cardList">
		<div class="card">1</div>
		<div class="card">2</div>
		<div class="card">3</div>
		<div class="card">4</div>
		<div class="card">5</div>
		<div class="card">6</div>
		<div class="card">7</div>
		<div class="card">8</div>
		<div class="card">9</div>
		<div class="card">10</div>
	</div>

	<button id="start">Losuj</button>

<script>
// zdefiniujmy globalne zminne
var winner,
    distance,
    extraRounds = 5, // dodatkowe orkążenia dla lepszego efektu
    speed = 10000, // prędkosc w ms
    $cardList   = $('.cardList').first(), // odwołujemy sie do elemntu za pomocą DOM
    $cards      = $('.card'), // odwołanie do diva
    cardsNumber = $cards.length, // zliczmy ile mamy takich okienek
    width       = $('.card').width(), // sprawdzmy szerokość okienka
    margin,
    currentMargin = 0;

// losujemy liczbę z przedziału min-max
function getRandomInt(min, max) {
	// losujemy liczbę z naszego przedziału za pomoca math.random
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// losujemy jaki numer wygra
function chooseWinner() {
	// winner- czyli nasza wylosowana liczn //
    winner = getRandomInt(1, cardsNumber), // losowanie zwycięzcy
    distance = (winner - 2 + cardsNumber * extraRounds) * width - 70;
}

// kręcimy kołem 
function spin() {
    var newMargin = -distance;
	// funkcja animate, zwieksza nam margines, dzięki temu postaje nasz efekt
    $cards.first().animate({
        marginLeft: newMargin
    }, {
		// szybkosc //
        duration: speed,
		// styl //
        easing: 'easeOutExpo',
		// callback ukoczono losowanie//
        complete: showWinner
    });
}

// callback, funkcja zerkująca oraz wysiwetlajaca zwyciezce //

function showWinner() {
	// zerujemy licznik //
	currentMargin = 0;
	// wyswietla wylosowana liczbe //
	alert(winner);
}

// lecimy pętlą po wszystkich okienkach.
for (var i = 0; i < 50; i++) {
    $cards.clone().appendTo($cardList);
}


// po naciścieciu na button odpalamy funkcję ktora losuje liczbe oraz odpala effect.
$('#start').click(function() {
	// losujemy liczbe //
    chooseWinner();
    $cards.first().css('margin-left', 0);
	// efekt animete () z jquery //
    spin();
});

</script>



CODE CSS:

* { box-sizing: border-box; padding: 0; margin: 0; }

html
{
	font-size:12px;
	color: white;
	text-shadow:0px 0px 2px #000;
}

body
{
	margin:0;
    padding:0;
}

.cardList::before, .cardList::after {
	content: ''; display: block; z-index: 100;
	width: 0px; height: 0px; transform: translateX(-50%);
	 border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
.cardList::before {
	position: absolute; top: 0px; left: 50%;
	border-top: 12px solid #33e;
}
 .cardList::after {
	 position: absolute; bottom: 0px; left: 50%;
	 border-bottom: 12px solid #33e;
}
.cardList
{
	position: relative;
	overflow: hidden;
    white-space: nowrap;
	background-color: #222324;
	width: 785px;
	height: 215px;
	border: 1px solid #b2b2b2;
	margin: 42px auto;
}

.card
{
    display: inline-block;
    text-align: center;
    height: 194px;
	width: 194px;
    line-height: 100px;
    background-color: aquamarine;
    font-family: monospace;
	margin: 12px 0px;
}



Użyte funkcje:

-https://api.jquery.com/first/
- http://api.jquery.com/animate/
- http://api.jqueryui.com/easings/
- http://api.jquery.com/appendto/
- https://api.jquery.com/length/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
- http://www.w3schools.com/jsref/jsref_floor.asp
- http://api.jquery.com/css/

Ps: Podziękowania dla Hans Kloss PL za pomoc w dobraniu funkcji oraz samym efekcie. Pierwotny skrypt nie jest mojego autorstwa jest jedynie dostosowany do moich potrzeb. Dla forum wytłumaczyłem jego kod.

Jest to już drugi poradnik. Poradniki będą się ukazywać jeden na 1-2 tygodnie.

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista


"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer


 


Potrzebujesz czegoś? Oznacz mnie @Salur

  • 3 tygodnie później...
Kinoko Nowicjusz

Kinoko

Opublikowano
Nowicjusz

Kinoko

Opublikowano

Słaby tut, nawet zdjęć nie wstawiłeś, a z opisu mało wiem... nawet nie zachęca do skorzystania.

 

Ja bym nawet tego nie nazwał tutem, prędzej gotowcem.

  • 1 miesiąc temu...
Writen Rekrut

Writen

Opublikowano
Rekrut

Writen

Opublikowano

Mi to nie działa a chciałbym tego użyć .Proszę­ o szybką odpowiedź ;/

Musisz użyć magicznego zaklęcia.

 

A tak serio, jak do cholery ktoś ma ci pomóc skoro nie powiedziałeś z czym masz problem?

gamedevmania.com

Salur Znawca

Salur

Opublikowano
Znawca

Salur

  • Autor
Opublikowano

xD nie działa mi losowanie 'całe' bo jak klikam w przyski losuj to nic sie nie dzieje :/

Użyj firebuga. Biblioteka jest wczytana? Localhost pewnie.

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista


"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer


 


Potrzebujesz czegoś? Oznacz mnie @Salur

kamilo10PL Pasjonat

kamilo10PL

Opublikowano
Pasjonat

kamilo10PL

Opublikowano

 

xD nie działa mi losowanie 'całe' bo jak klikam w przyski losuj to nic sie nie dzieje :/

Użyj firebuga. Biblioteka jest wczytana? Localhost pewnie.

 

Firebug co to 0_o i dałem to na serwer nie localhost ;p

 

­

Salur Znawca

Salur

Opublikowano
Znawca

Salur

  • Autor
Opublikowano

Proszę, oto demo: 

http://zrt-shakes.pl/demo/

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista


"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer


 


Potrzebujesz czegoś? Oznacz mnie @Salur

kamilo10PL Pasjonat

kamilo10PL

Opublikowano
Pasjonat

kamilo10PL

Opublikowano

Dobra już znalazłem błąd . W tej linijce cardsNumber = $cards.length, / / zliczmy ile mamy takich okienek // są oddzielone slashe a nie złączone :D

Salur Znawca

Salur

Opublikowano
Znawca

Salur

  • Autor
Opublikowano

Dobra już znalazłem błąd . W tej linijce cardsNumber = $cards.length, / / zliczmy ile mamy takich okienek // są oddzielone slashe a nie złączone :D

Moje przoeczenie :) miał być to komentarz. Dziekuję, juz poprawione.

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista


"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer


 


Potrzebujesz czegoś? Oznacz mnie @Salur

  • 11 miesięcy temu...
wach12 Pomocnik

wach12

Opublikowano
Pomocnik

wach12

Opublikowano

Witam, 

sorka ze odswieza mpo paru latach ale czy mógłby mi ktoś powiedzieć jak skonfigurować ten skrypt z php. 
Tzn żeby nie wyświetlało wyniku w alter tylko jako echo w PHP 

bannermaly.png

  •  carbonx zmienił(a) tytuł na Skrypt losowania z efektem

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...