Web Front-end
JS Tutorial
js implementation of big carousel lottery game example_javascript skills
js implementation of big carousel lottery game example_javascript skills
The example in this article describes the implementation of the big carousel lottery game using js. Share it with everyone for your reference. The specific implementation method is as follows:
<!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>I hope this article will be helpful to everyone’s JavaScript programming design.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
Nvgpucomp64.dll causes Windows PC games to crash;
Mar 26, 2024 am 08:20 AM
If Nvgpucomp64.dll is causing your game to crash frequently, the solutions provided here may help you. This problem is usually caused by outdated or corrupted graphics card drivers, corrupted game files, etc. Fixing these issues can help you deal with game crashes. The Nvgpucomp64.dll file is associated with NVIDIA graphics cards. When this file crashes, your game will crash too. This usually happens in games like LordsoftheFallen, LiesofP, RocketLeague, and ApexLegends. Nvgpucomp64.dll crashes games on Windows PC if N
Introduction to how to download and install the superpeople game
Mar 30, 2024 pm 04:01 PM
The superpeople game can be downloaded through the steam client. The size of this game is about 28G. It usually takes one and a half hours to download and install. Here is a specific download and installation tutorial for you! New method to apply for global closed testing 1) Search for "SUPERPEOPLE" in the Steam store (steam client download) 2) Click "Request access to SUPERPEOPLE closed testing" at the bottom of the "SUPERPEOPLE" store page 3) After clicking the request access button, The "SUPERPEOPLECBT" game can be confirmed in the Steam library 4) Click the install button in "SUPERPEOPLECBT" and download
NVIDIA launches RTX HDR function: unsupported games use AI filters to achieve HDR gorgeous visual effects
Feb 24, 2024 pm 06:37 PM
According to news from this website on February 23, NVIDIA updated and launched the NVIDIA application last night, providing players with a new unified GPU control center, allowing players to capture wonderful moments through the powerful recording tool provided by the in-game floating window. In this update, NVIDIA also introduced the RTXHDR function. The official introduction is attached to this site: RTXHDR is a new AI-empowered Freestyle filter that can seamlessly introduce the gorgeous visual effects of high dynamic range (HDR) into In games that do not originally support HDR. All you need is an HDR-compatible monitor to use this feature with a wide range of DirectX and Vulkan-based games. After the player enables the RTXHDR function, the game will run even if it does not support HD
Where is Spider Solitaire in win11 How to play Spider Solitaire game in win11
Mar 01, 2024 am 11:37 AM
Friends who have played enough AAA masterpieces and mobile games, do you want to relive the computer games of your childhood? Then let’s look for Spider Solitaire in Windows 11 together! Click the Start menu on the interface, click the "All Apps" button; click "All Apps". Find and select "MicrosoftSolitaireCollection", which is Microsoft's Solitaire series game application; Solitaire series game selection. After loading is complete, enter the selection interface and find "Spider Solitaire"; select "Spider Solitaire". Although the interface has changed slightly, it is still the same as before
ASUS releases BIOS update to improve gaming stability on Intel's 13th/14th generation processors
Apr 20, 2024 pm 05:01 PM
According to news from this site on April 20, ASUS recently released a BIOS update, which improves instability such as crashes when running games on Intel's 13th/14th generation processors. This site previously reported that players reported problems including that when running the PC demo version of Bandai Namco's fighting game "Tekken 8", even if the computer has sufficient memory and video memory, the system will crash and prompt an error message indicating insufficient memory. Similar crashing issues have also appeared in many games such as "Battlefield 2042", "Remnant 2", "Fortnite", "Lord of the Fallen", "Hogwarts Legacy" and "The Finals". RAD published a long article in February this year, explaining that the game crash problem is a combination of BIOS settings, high clock frequency and high power consumption of Intel processors.
How to add games purchased from Little Black Box to Steam
Feb 23, 2024 pm 05:30 PM
Various games can be purchased in the small black box, so how do you add the purchased games to Steam? Users need to activate the product on Steam in Steam, and then copy the activation code in the small black box to activate. This introduction to the method of storing purchased games into Steam will tell you the specific method. The following is a detailed introduction, hurry up Come and take a look! How to add games purchased from Little Black Box to Steam Answer: Activate the product on Steam in Steam to add it to the warehouse. Specific methods: 1. First, click the game button on Steam. 2. Click Activate product on Steam. 3. Then click Next in the window that appears. 4. Paste the purchase code in the small black box in the product activation. 5. Then click Next to add
Why is there no sound when playing games on ipad?
Feb 20, 2024 am 08:24 AM
There is no sound when playing games on iPad. Possible reasons. When using iPad for game entertainment, it is very frustrating to suddenly find that there is no sound. A silent gaming experience will undoubtedly reduce the fun significantly and make people feel confused and dissatisfied. So, when we encounter the problem of no sound when playing games on iPad, what are the possible reasons? This article will analyze and solve the possible causes of such problems. Volume settings are incorrect First, we need to check the iPad’s volume settings. Physical buttons on the side or top of the iPad can
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
