Heim Web-Frontend js-Tutorial js-Implementierung des großen Karussell-Lotteriespiels example_javascript skills

js-Implementierung des großen Karussell-Lotteriespiels example_javascript skills

May 16, 2016 pm 03:53 PM
js großer Plattenspieler 抽奖 游戏

Das Beispiel in diesem Artikel beschreibt die Implementierung des großen Karussell-Lotteriespiels mit js. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!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>
 <title>js抽奖</title>
 <style type="text/css">
  td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle}
 </style>
</head>
<body>
<table id="tb">
<tr>
 <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
 <td>16</td><td></td><td></td><td></td><td>6</td>
</tr>
<tr>
 <td>15</td><td></td><td></td><td></td><td>7</td>
</tr>
<tr>
 <td>14</td><td></td><td></td><td></td><td>8</td>
</tr>
<tr>
 <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td>
</tr>
</table>
<p></p>
请输入1-16其中一位整数,代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="开始" onclick="StartGame()" />
 <script type="text/javascript">
  /*
  * 删除左右两端的空格
  */
  function Trim(str){
   return str.replace(/(^\s*)|(\s*$)/g, ""); 
  }
  /*
   * 定义数组
   */
  function GetSide(m,n){
   //初始化数组
   var arr = [];
   for(var i=0;i<m;i++){
    arr.push([]);
    for(var j=0;j<n;j++){
     arr[i][j]=i*n+j;
    }
   }
   //获取数组最外圈
   var resultArr=[];
   var tempX=0,
    tempY=0,
    direction="Along",
    count=0;
   while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n)
   {
    count++;
    resultArr.push([tempY,tempX]);
    if(direction=="Along"){
     if(tempX==n-1)
      tempY++;
     else
      tempX++;
     if(tempX==n-1&&tempY==m-1)
      direction="Inverse"
    }
    else{
     if(tempX==0)
      tempY--;
     else
      tempX--;
     if(tempX==0&&tempY==0)
      break;
    }
   }
   return resultArr;
  }
  var index=0,   //当前亮区位置
  prevIndex=0,   //前一位置
  Speed=300,   //初始速度
  Time,   //定义对象
  arr = GetSide(5,5),   //初始化数组
   EndIndex=0,   //决定在哪一格变慢
   tb = document.getElementById("tb"),  //获取tb对象 
   cycle=0,   //转动圈数 
   EndCycle=0,   //计算圈数
  flag=false,   //结束转动标志 
  quick=0;   //加速
  function StartGame(){
   cycle=0;
   flag=false;
   EndIndex=Math.floor(Math.random()*16);
   //EndCycle=Math.floor(Math.random()*4);
  EndCycle=1;
   Time = setInterval(Star,Speed);
  }
  function Star(num){
   //跑马灯变速
   if(flag==false){
    //走五格开始加速
    if(quick==5){
     clearInterval(Time);
     Speed=50;
     Time=setInterval(Star,Speed);
    }
    //跑N圈减速
    if(cycle==EndCycle+1 && index==EndIndex){
    clearInterval(Time);
     Speed=300;
     flag=true;   //触发结束
     Time=setInterval(Star,Speed);
    }
   }
   if(index>=arr.length){
    index=0;
    cycle++;
   }
   //结束转动并选中号码
   if(flag==true && index==parseInt(Trim(document.getElementById("txtnum").value))-1){ 
   quick=0;
   clearInterval(Time);
   }
   tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3px solid red";
   if(index>0)
    prevIndex=index-1;
   else{
    prevIndex=arr.length-1;
   }
   tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc";
   index++;
   quick++;
  }
  /*
  window.onload=function(){
   Time = setInterval(Star,Speed);
  }
  */
 </script>
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Nvgpucomp64.dll führt zum Absturz von Windows-PC-Spielen; Nvgpucomp64.dll führt zum Absturz von Windows-PC-Spielen; Mar 26, 2024 am 08:20 AM

Wenn Nvgpucomp64.dll dazu führt, dass Ihr Spiel häufig abstürzt, können Ihnen die hier bereitgestellten Lösungen helfen. Dieses Problem wird normalerweise durch veraltete oder beschädigte Grafikkartentreiber, beschädigte Spieledateien usw. verursacht. Das Beheben dieser Probleme kann Ihnen dabei helfen, Spielabstürze zu beheben. Die Datei Nvgpucomp64.dll ist mit NVIDIA-Grafikkarten verknüpft. Wenn diese Datei abstürzt, stürzt auch Ihr Spiel ab. Dies geschieht normalerweise in Spielen wie LordsoftheFallen, LiesofP, RocketLeague und ApexLegends. Nvgpucomp64.dll stürzt Spiele auf Windows-PCs ab, wenn N

NVIDIA führt RTX HDR-Funktion ein: Nicht unterstützte Spiele nutzen KI-Filter, um wunderschöne visuelle HDR-Effekte zu erzielen NVIDIA führt RTX HDR-Funktion ein: Nicht unterstützte Spiele nutzen KI-Filter, um wunderschöne visuelle HDR-Effekte zu erzielen Feb 24, 2024 pm 06:37 PM

Laut Nachrichten dieser Website vom 23. Februar hat NVIDIA gestern Abend die NVIDIA‏‏-Anwendung aktualisiert und gestartet und bietet Spielern ein neues einheitliches GPU-Kontrollzentrum, das es Spielern ermöglicht, wunderbare Momente durch das leistungsstarke Aufzeichnungstool des In-Game-Floating festzuhalten Fenster. In diesem Update hat NVIDIA auch die RTXHDR-Funktion eingeführt. Die offizielle Einführung ist wie folgt beigefügt: RTXHDR ist ein neuer KI-gestützter Freestyle-Filter, der die großartigen visuellen Effekte von High Dynamic Range (HDR) nahtlos in Spiele einführen kann, die dies ursprünglich nicht tun unterstützt HDR. Sie benötigen lediglich einen HDR-kompatiblen Monitor, um diese Funktion mit einer Vielzahl von DirectX- und Vulkan-basierten Spielen nutzen zu können. Nachdem der Player die RTXHDR-Funktion aktiviert hat, läuft das Spiel auch dann, wenn es HD nicht unterstützt

Einführung in das Herunterladen und Installieren des Superpeople-Spiels Einführung in das Herunterladen und Installieren des Superpeople-Spiels Mar 30, 2024 pm 04:01 PM

Das Superpeople-Spiel kann über den Steam-Client heruntergeladen werden. Die Größe dieses Spiels beträgt normalerweise eineinhalb Stunden. Hier ist ein spezielles Download- und Installations-Tutorial. Neue Methode zur Beantragung globaler geschlossener Tests 1) Suchen Sie nach „SUPERPEOPLE“ im Steam-Store (Steam-Client-Download) 2) Klicken Sie unten auf der „SUPERPEOPLE“-Store-Seite auf „Zugriff auf geschlossene SUPERPEOPLE-Tests anfordern“ 3) Nachdem Sie auf geklickt haben Schaltfläche „Zugriff anfordern“. Das Spiel „SUPERPEOPLECBT“ kann in der Steam-Bibliothek bestätigt werden. 4) Klicken Sie auf die Schaltfläche „Installieren“ in „SUPERPEOPLECBT“ und laden Sie es herunter

Wo ist Spider Solitaire in Win11? Wie spielt man das Spider Solitaire-Spiel in Win11? Wo ist Spider Solitaire in Win11? Wie spielt man das Spider Solitaire-Spiel in Win11? Mar 01, 2024 am 11:37 AM

Freunde, die genug AAA-Meisterwerke und Handyspiele gespielt haben, möchten Sie die Computerspiele Ihrer Kindheit noch einmal erleben? Dann lasst uns gemeinsam nach Spider Solitaire in Windows 11 suchen! Klicken Sie auf der Benutzeroberfläche auf das Startmenü und dann auf die Schaltfläche „Alle Apps“. Suchen und wählen Sie „MicrosoftSolitaireCollection“, die Spieleanwendung der Solitaire-Serie von Microsoft. Nachdem der Ladevorgang abgeschlossen ist, rufen Sie die Auswahloberfläche auf und suchen Sie nach „Spider Solitaire“. Wählen Sie „Spider Solitaire“. Obwohl sich die Benutzeroberfläche geringfügig geändert hat, ist sie immer noch dieselbe wie zuvor

ASUS veröffentlicht BIOS-Update zur Verbesserung der Spielestabilität auf Intels Prozessoren der 13./14. Generation ASUS veröffentlicht BIOS-Update zur Verbesserung der Spielestabilität auf Intels Prozessoren der 13./14. Generation Apr 20, 2024 pm 05:01 PM

Laut Nachrichten dieser Website vom 20. April hat ASUS kürzlich ein BIOS-Update veröffentlicht, das Instabilitäten wie Abstürze beim Ausführen von Spielen auf Intel-Prozessoren der 13./14. Generation verbessert. Diese Seite berichtete zuvor, dass Spieler Probleme gemeldet hätten, unter anderem, dass beim Ausführen der PC-Demoversion von Bandai Namcos Kampfspiel „Tekken 8“ das System abstürzte und eine Fehlermeldung über unzureichenden Speicher ausgab, selbst wenn der Computer über ausreichend Arbeits- und Videospeicher verfügte. Ähnliche Absturzprobleme traten auch in vielen Spielen wie „Battlefield 2042“, „Remnant 2“, „Fortnite“, „Lord of the Fallen“, „Hogwarts Legacy“ und „The Finals“ auf. RAD veröffentlichte im Februar dieses Jahres einen langen Artikel, in dem erklärt wurde, dass das Spielabsturzproblem eine Kombination aus BIOS-Einstellungen, hoher Taktfrequenz und hohem Stromverbrauch von Intel-Prozessoren ist.

So fügen Sie bei Little Black Box gekaufte Spiele zu Steam hinzu So fügen Sie bei Little Black Box gekaufte Spiele zu Steam hinzu Feb 23, 2024 pm 05:30 PM

In der kleinen schwarzen Box können verschiedene Spiele gekauft werden. Wie fügt man die gekauften Spiele zu Steam hinzu? Benutzer müssen das Produkt auf Steam in Steam aktivieren und dann den Aktivierungscode in das kleine schwarze Kästchen kopieren, um es zu aktivieren. Diese Einführung in die Methode zum Speichern gekaufter Spiele in Steam erklärt Ihnen die spezifische Methode. Beeilen Sie sich. Schauen Sie vorbei! Wie füge ich bei Little Black Box gekaufte Spiele zu Steam hinzu? Antwort: Aktivieren Sie das Produkt auf Steam, um es zu Steam hinzuzufügen. Die spezifische Methode ist: 1. Klicken Sie zunächst auf die Spielschaltfläche auf Steam. 2. Klicken Sie auf Produkt auf Steam aktivieren. 3. Klicken Sie dann im angezeigten Fenster auf Weiter. 4. Fügen Sie den Kaufcode in das kleine schwarze Feld in der Produktaktivierung ein. 5. Klicken Sie dann zum Hinzufügen auf Weiter

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

Warum ist beim Spielen auf dem iPad kein Ton zu hören? Warum ist beim Spielen auf dem iPad kein Ton zu hören? Feb 20, 2024 am 08:24 AM

Beim Spielen auf dem iPad ist kein Ton zu hören. Mögliche Gründe: Wenn Sie das iPad zur Spieleunterhaltung verwenden, ist es sehr frustrierend, wenn Sie plötzlich feststellen, dass kein Ton zu hören ist. Ein lautloses Spielerlebnis wird den Spaß zweifellos erheblich reduzieren und die Leute verwirrt und unzufrieden machen. Was sind die möglichen Gründe, wenn wir beim Spielen auf dem iPad auf das Problem stoßen, dass kein Ton zu hören ist? In diesem Artikel werden die möglichen Ursachen solcher Probleme analysiert und gelöst. Die Lautstärkeeinstellungen sind falsch. Zuerst müssen wir die Lautstärkeeinstellungen des iPad überprüfen. Physische Tasten an der Seite oder Oberseite des iPad können

See all articles