JavaScript를 사용하여 복권 번호를 생성하는 분석 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript를 사용하여 복권 번호를 생성하는 분석 예

黄舟

Oct 31, 2017 am 10:02 AM

javascriptjs생성하다

이 "복권 번호 생성기"는 HTML, JS 및 CSS를 포함하는 순전히 프런트 엔드 개발입니다. 단순화를 위해 모든 코드를 html 파일로 작성했는데, 이것의 장점은 파일을 브라우저로 바로 열 수 있다는 점입니다. 물론 실제 작업에서는 다른 파일에 넣어 두는 것이 가장 좋습니다. 전체 영역은 직사각형 영역으로 나타나는 큰 p 태그에 배치되며, 표시 위치는 JS를 통해 제어되며 드롭다운 목록을 설정하고 1~5개의 난수 그룹을 생성하도록 선택할 수 있습니다. 버튼을 클릭하면 해당 그룹의 번호가 생성되며, 번호 영역은 두 부분으로 나누어집니다. 위쪽 부분은 순서가 지정되지 않은 숫자를 무작위로 생성한 번호이고, 아래쪽 부분은 이러한 순서가 지정되지 않은 번호를 정렬한 후의 번호입니다. 생성된 그룹 수는 위의 드롭다운 목록에 의해 제어됩니다. 이 도구의 핵심은 난수를 생성하고 난수를 정렬하는 것인데, 둘 다 JS 코드를 통해 구현됩니다. 다음은 몇 가지 중요한 JS 코드입니다.

난수 생성: 로또는 앞부분 번호와 뒷부분 번호로 나누어져 있으며, 앞부분 번호는 01~35번 중 5번, 뒷부분 번호는 01번~12번 중 중복되지 않는 번호입니다. 7자리 숫자의 집합을 형성합니다. 여기에는 두 개의 배열이 정의되어 있습니다. arr35는 앞 영역에 01~35 숫자를 저장하고, arr12는 뒷 영역에 01~12 숫자를 저장합니다. "temp = Math.floor(Math.random()*arr35.length)" 메소드를 사용하여 0-arr35.length에서 난수를 인덱스로 취하고 arr35[temp]를 사용하여 인덱스 위치의 값을 가져옵니다. 배열에서도 임의의 숫자이며 ID를 가져와 정렬하기 전에 범위에 동적으로 추가됩니다. 가져온 후 "arr35.splice(temp,1);"를 사용하여 배열의 임의의 숫자를 삭제하고 배열의 길이를 1만큼 줄입니다. 반복 없이 01-35 중에서 임의의 숫자 5개를 얻으려면 5번 반복하세요. 다음 두 자리도 마찬가지입니다.

var arr35 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17",                           
"18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"];
var arr12 = ["01","02","03","04","05","06","07","08","09","10","11","12"];
var span = "";
var temp = "";
for(var i=1;i<6;i++){
    span = "span" + x + i;
    temp = Math.floor(Math.random()*arr35.length);//随机取一个数
    document.getElementById(span).innerText = arr35[temp];
    document.getElementById(span).style.backgroundColor = "red";
    arr35.splice(temp,1);//删除该位置的值}

무작위 숫자 정렬: 여기서는 각 숫자 그룹의 처음 5자리만 정렬하는 삽입 정렬 알고리즘이 사용됩니다. 정렬 후 데이터의 양이 매우 적습니다. ID.

//插入排序
function bubbleSort(array){    
var len = array.length;    
for (var i = 0; i < len; i++) {        
for (var j = i; j > 0 && array[j]<array[j-1]; j--) {            
var swap = array[j];  //第二个for循环使元素比较并移动到合适位置
            array[j] = array[j-1];
            array[j-1] = swap;
        }
    }    return array;
}

나머지 JS, HTML, CSS 기술에 대해서는 자세히 소개하지 않겠습니다.

전체 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大乐透号码生成器</title>
<style type="text/css">
#table{
width:800px; 
height:500px;
margin:10px;
border:2px 
solid 
#000000;
box-shadow: 10px 10px 5px;border-radius:50px;}
.buttonStyle{height:40px;margin:20px;font-size:20px;background-color:#6495ED;color:white;border-radius:10px;}
.oneStyle{margin-left:200px;margin-top:10px;font-family:sans-serif;font-size:20px;}
span{border-radius: 50%;color: #FFFFFF;padding:3px;font-size:13px;}
</style>
</head>
<body>
    <p id="table">
        <p>
            <h1 id="大乐透号码生成器">大乐透号码生成器</h1>
        </p>
        <p class="oneStyle">
                        生成组数：<select id="zushu" style="width:150px;height:30px;margin:10px;" onchange="select()">
                        <option value="1">生成 1 组号码</option>
                        <option value="2">生成 2 组号码</option>
                        <option value="3">生成 3 组号码</option>
                        <option value="4">生成 4 组号码</option>
                        <option value="5">生成 5 组号码</option>
                    </select>
        </p>
        <p class="oneStyle">
        随机号码1：<span id="span11"></span> <span id="span12"></span> <span id="span13"></span> 
        <span id="span14"></span> <span id="span15"></span>
           <span id="span16"></span> <span id="span17"></span><br>
        随机号码2：<span id="span21"></span> <span id="span22"></span> <span id="span23"></span> 
        <span id="span24"></span> <span id="span25"></span>
           <span id="span26"></span> <span id="span27"></span><br>
        随机号码3：<span id="span31"></span> <span id="span32"></span> <span id="span33"></span> 
        <span id="span34"></span> <span id="span35"></span>
           <span id="span36"></span> <span id="span37"></span><br>
        随机号码4：<span id="span41"></span> <span id="span42"></span> <span id="span43"></span> 
        <span id="span44"></span> <span id="span45"></span>
           <span id="span46"></span> <span id="span47"></span><br>
        随机号码5：<span id="span51"></span> <span id="span52"></span> <span id="span53"></span> 
        <span id="span54"></span> <span id="span55"></span>
           <span id="span56"></span> <span id="span57"></span><br>
        </p>
        <p class="oneStyle">
        排序后码1：<span id="span61"></span> <span id="span62"></span> <span id="span63"></span> 
        <span id="span64"></span> <span id="span65"></span>
           <span id="span66"></span> <span id="span67"></span><br>
        排序后码2：<span id="span71"></span> <span id="span72"></span> <span id="span73"></span> 
        <span id="span74"></span> <span id="span75"></span>
           <span id="span76"></span> <span id="span77"></span><br>
        排序后码3：<span id="span81"></span> <span id="span82"></span> <span id="span83"></span> 
        <span id="span84"></span> <span id="span85"></span>
           <span id="span86"></span> <span id="span87"></span><br>
        排序后码4：<span id="span91"></span> <span id="span92"></span> <span id="span93"></span> 
        <span id="span94"></span> <span id="span95"></span>
           <span id="span96"></span> <span id="span97"></span><br>
        排序后码5：<span id="span101"></span> <span id="span102"></span> <span id="span103"></span> 
        <span id="span104"></span> <span id="span105"></span>
           <span id="span106"></span> <span id="span107"></span><br>
        </p>
        <p style="text-align:center">
            <input class="buttonStyle" id="fiveNumber" type="button" onclick="number()">
        </p>
    </p>
    <script type="text/javascript">
        var table = document.getElementById("table");        
        var width = document.documentElement.clientWidth;  //浏览器可见区域宽
        var height = document.documentElement.clientHeight;  //浏览器可见区域高        
        table.style.marginLeft = ((width-800)/2)+"px";        
        table.style.marginTop = ((height-700)/2)+"px";
        var val = "1";
        document.getElementById("fiveNumber").setAttribute("title","生成 1 组号码");
        document.getElementById("fiveNumber").setAttribute("value","生成 1 组号码");        
        //随机生成五组号码
        function select()
        {
            val = document.getElementById("zushu").value;            
            var des = "生成 " + val + " 组号码";
            document.getElementById("fiveNumber").setAttribute("title",des);
            document.getElementById("fiveNumber").setAttribute("value",des);
        }        //随机生成五组号码
        function number()
        {            for(var n=1;n<11;n++){                
        for(var m=1;m<8;m++){                    
        var a = "span" + n + m;
                    document.getElementById(a).innerText = "";//每次点击按钮先清空上一次数据                    
                    document.getElementById(a).style.backgroundColor = "white";
                }
            }            for(var x=1;x<(parseInt(val)+1);x++){                //从35个号码里面无放回地取5位
                var arr35 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17",               
                            "18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"];       
                                     //从12个号码里面无放回地取2位
                var arr12 = ["01","02","03","04","05","06","07","08","09","10","11","12"];                
                var span = "";                
                var temp = "";                
                for(var i=1;i<6;i++){
                    span = "span" + x + i;
                    temp = Math.floor(Math.random()*arr35.length);//随机取一个数                    
                    document.getElementById(span).innerText = arr35[temp];
                    document.getElementById(span).style.backgroundColor = "red";
                    arr35.splice(temp,1);//删除该位置的值                
                    }                
                    for(var j=6;j<8;j++){
                    span = "span" + x + j;
                    temp = Math.floor(Math.random()*arr12.length);//随机取一个数                    
                    document.getElementById(span).innerText = arr12[temp];
                    document.getElementById(span).style.backgroundColor = "blue";
                    arr12.splice(temp,1);//删除该位置的值                
                    }
            }            
            for(var x=1;x<(parseInt(val)+1);x++){                
            var span = "";                //前五位排序
                var arr = new Array(5);                
                for(var y=0;y<5;y++){
                    span = "span" + x + (y+1);
                    arr[y] = document.getElementById(span).lastChild.nodeValue;
                }                var a = bubbleSort(arr);                
                for(var l=0;l<5;l++){
                    span = "span" + (x+5) + (l+1);
                    document.getElementById(span).innerText = a[l];
                    document.getElementById(span).style.backgroundColor = "red";
                }                //后两位排序
                var spann6 = "span" + x + "6";                
                var spann7 = "span" + x + "7";                
                var spanm6 = "span" + (x+5) + "6";                
                var spanm7 = "span" + (x+5) + "7";                
                var span6 = document.getElementById(spann6).lastChild.nodeValue;                
                var span7 = document.getElementById(spann7).lastChild.nodeValue;                
                if(parseInt(span6) > parseInt(span7)){
                    document.getElementById(spanm6).innerText = span7;
                    document.getElementById(spanm7).innerText = span6;
                }else{
                    document.getElementById(spanm6).innerText = span6;
                    document.getElementById(spanm7).innerText = span7;
                }
                document.getElementById(spanm6).style.backgroundColor = "blue";
                document.getElementById(spanm7).style.backgroundColor = "blue";
            }
        }        //插入排序
        function bubbleSort(array){            
        var len = array.length;            
        for (var i = 0; i < len; i++) {                
        for (var j = i; j > 0 && array[j]<array[j-1]; j--) {                       
        var swap = array[j];  //第二个for循环使元素比较并移动到合适位置                       
        array[j] = array[j-1];
                       
                   array[j-1] = swap;
                }
            }            return array;
        }    </script></body></html>

브라우저 열기 효과:

위 내용은 JavaScript를 사용하여 복권 번호를 생성하는 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

드림위버 CS6

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.