Máy tính OOP JavaScript

Chúng tôi sẽ quan tâm đến tính không thực tế của việc xử lý những con số lớn liên quan đến trò chơi Đoán ngày gần đây nhất của chúng tôi được giới thiệu trong. Để "dễ chịu" với thiết kế trò chơi có nghĩa là thêm "gợi ý", khá thường xuyên và trong trường hợp xử lý những con số lớn mà bạn gặp phải trong trò chơi này, chúng tôi muốn cung cấp chức năng gợi ý "máy tính" nội bộ

Có thể bạn nhớ lại Hướng dẫn Máy tính Tcl và PHP của chúng tôi kết hợp tài năng của…

  • Ngôn ngữ phía máy chủ PHP để tổ chức các công cụ dòng lệnh như…
  • Tcl với kịch bản và toán học của nó

… để tạo một iframe HTML “máy tính” lưu trữ tiện ích bổ sung tùy chọn cho trò chơi của chúng tôi, có thể gọi được bằng một …

  • nhấp vào số lớn giây màu xanh để tính toán giá trị một năm (gấp đôi) … hoặc …
  • nhấp đúp vào số giây màu xanh lam để tính toán giá trị một ngày (gấp đôi)

… điều đó có thể giúp ích trong khi không bỏ trò chơi. Những kẻ bạo dâm của bạn có thể từ chối sự giúp đỡ này

Theo mã…

  • chúng tôi đã thay đổi từ năm_1970. ứng dụng web html Trò chơi mà bạn có thể hoặc bên dưới, được gọi trên một…
  • máy tính đã thay đổi của chúng tôi. công cụ máy tính php như một ứng dụng web độc lập

… đã làm điều này xảy ra, cùng với một số mã ngày (giờ) (giờ) (GMT?) “con số may mắn” (à, bạn phải ở đó … phải không?)


Hướng dẫn trình xây dựng trình xây dựng lập trình hướng đối tượng Javascript có liên quan trước đây được hiển thị bên dưới

Máy tính OOP JavaScript

Hướng dẫn lập trình hướng đối tượng Javascript Constructor Người chơi Hướng dẫn

Trò chơi của ngày hôm qua đã được mã hóa và thiết kế cho một người chơi. Nhưng có lẽ bạn có một nhóm những người chơi “số lớn” và/hoặc “hẹn hò” muốn chơi. Chà, kể từ hôm nay, hãy tập hợp tối đa chín người trong số họ xung quanh thiết bị máy tính của bạn và thử thay đổi của chúng tôi từ năm 1970. Ứng dụng web html Trò chơi mà bạn có thể hoặc bên dưới

Vì vậy, chúng tôi đã tiếp cận phần mở rộng chức năng này như thế nào?

  1. sẵn sàng cho một đối số get mới được gọi là numplayers cho một biến toàn cục mới…

    var numplayers=location.search.split('numplayers=')[1] ? eval(decodeURIComponent(location.search.split('numplayers=')[1].split('&')[0])) : 1;
  2. khởi tạo mảng và thêm một số biến toàn cục mới và biến biến vô hướng thành mảng sau đó điền vào mảng…

    var numplayers=location.search.split('numplayers=')[1] ? eval(decodeURIComponent(location.search.split('numplayers=')[1].split('&')[0])) : 1;
    var restdone=true;
    if (numplayers > 1) { restdone=false; }
    var zero=0;
    var thecurrentone='';
    var im=0;

    var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var dowm=['January','February','March','April','May','June','July','August','September','October','November','December'];


    var nts=1970;
    var adate = null;
    var bdate = null;
    var his, mis, sis, daym, monthm, yearm;
    var now = new Date();
    nts=eval('' + now.getFullYear());
    var utcMilllisecondsSinceEpoch = now.getTime(); // + (now.getTimezoneOffset() * 60 * 1000);
    var utcSecondsSinceEpoch = Math.round(utcMilllisecondsSinceEpoch / 1000);


    var score=[eval(73000 * 24 * 60 * 60)];
    var goes=[0];
    var blurb='';


    var myr=[eval(Math.floor(Math.random() * 56) + 1)];


    nts++;
    for (im=0; im<myr[0]; im++) {
    nts++;
    utcSecondsSinceEpoch+=eval(24 * 60 * 60);
    }


    var myantiguess=[eval(Math.floor(Math.random() * utcSecondsSinceEpoch) + 0)];


    for (im=1; im<numplayers; im++) {
    score.push(score[0]);
    goes.push(goes[0]);
    myr.push(myr[0]);
    myantiguess.push(eval(Math.floor(Math.random() * utcSecondsSinceEpoch) + 0));
    }
  3. làm việc để cho người dùng biết rằng chức năng này khả dụng…

    <h1>Big Number (Starts at 1/1/1970) Date and Time Guessing via Seconds Since Game for <input id=inumplayers style=display:inline-block;width:35px; type=number step=1 min=1 max=9 onblur="if (eval(this.value) > 1) { location.href=document.URL.split('#')[0].split('?')[0] + '?numplayers=' + this.value; }" value=1></input> Player(s)</h1>



    <body onload="document.getElementById('inumplayers').value='' + numplayers; display();">
  4. thay đổi lệnh gọi logic onclick của các phần tử loại đầu vào=nút …

    <tr><td style=text-align:center;><br><input class=mybut id=mybut type=button onclick=checkanswer(this); value='Check my Datetime Above'></input><br></td></tr>
  5. làm cho loại đầu vào = nút được định danh và phân loại nó…

    <tr><td style=text-align:center;><br><input class=mybut id=mybut type=button onclick=checkanswer(this); value='Check my Datetime Above'></input><br></td></tr>
  6. làm cho phần tử bảng HTML hiện có được nhúng vào một bảng HTML bên ngoài (với các trình trợ giúp phần tử “thead” và “tbody” “và tr=row1” được liên kết của nó) và phân loại thêm một số phần tử và điều chỉnh một số kiểu dáng thuộc tính chiều rộng tối thiểu CSS…

    <table id=outertable><thead id=mythead></thead><tbody id=mytbody><tr id=row1><td id=cell1>
    <table border=20>
    <tr><th id=thscore>Points left: <span class=score id=score></span>     Survival count: <span class=goes id=goes></span></th></tr>
    <tr><th id=secanswer>Seconds since 1/1/1970: <span class=spananswer id=spananswer></span> .. try to match GMT datetime closely below, else lose points</th></tr>
    <tr><td style=text-align:center;><br><form>
    <input style=display:inline-block;min-width:28px; onblur=fixitzero(this,1,31); onchange=fixitzero(this,1,31); type="text" title="Date" id="sday" name="sday" value="01"></input>/<select style=display:inline-block; id="smonth" name="smonth" title="Month"><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>/<input style=display:inline-block;min-width:55px; onblur=fixitzero(this,1970,nts); onchange=fixitzero(this,1970,nts); step=1 min=1970 type="number" id="syear" name="syear" value="1970" title="Year"></input>     <input onblur=fixitzero(this,0,23); onchange=fixitzero(this,0,23); style=display:inline-block;min-width:28px; type="text" id="shour" name="shour" value="00" title="Hours"></input>:<input onblur=fixitzero(this,0,59); onchange=fixitzero(this,0,59); title="Minutes" style=display:inline-block;min-width:28px; type="text" id="sminute" name="sminute" value="00"></input>:<input onblur=fixitzero(this,0,59); onchange=fixitzero(this,0,59); title="Seconds" style=display:inline-block;min-width:28px; type="text" id="ssecond" name="ssecond" value="00"></input><span> GMT</span><br>
    </form><br></td></tr>
    <tr><td style=text-align:center;><br><input class=mybut id=mybut type=button onclick=checkanswer(this); value='Check my Datetime Above'></input><br></td></tr>
    </table>
    </td></tr></tbody></table>
  7. tại tài liệu. Sự kiện body onload ghi nhớ InternalHTML của phần tử td ban đầu (bây giờ id'ed thành id=cell1) và truy cập vào đó và bán bản sao InternalHTML ở trên nhưng thay đổi bất kỳ id nào để phản ánh chỉ mục của ô trình phát mới và nối thêm “td” mới

    function display() {
    document.getElementById('score' + thecurrentone).innerHTML='' + score[zero];
    document.getElementById('goes' + thecurrentone).innerHTML='' + goes[zero];
    document.getElementById('spananswer' + thecurrentone).innerHTML='' + myantiguess[zero];
    adate=new Date(eval(eval('' + myantiguess[zero]) * 1000));
    yearm=eval('' + adate.getFullYear());
    monthm=dowm[eval(0 + eval('' + adate.getMonth()))];
    daym=eval(0 + eval('' + adate.getDate()));
    his=eval('' + adate.getHours());
    mis=eval('' + adate.getMinutes());
    sis=eval('' + adate.getSeconds());
    //blurb='';
    //document.getElementById('asp').title='';
    if (!restdone) { restdone=true; dorest(); }
    }


    function dorest() {
    var ccellone=document.getElementById('cell1').innerHTML;
    var acellarr=ccellone.split(' id="');
    var newtdis=acellarr[0];
    document.getElementById('mythead').innerHTML+='<tr id=row0><th><div id=div1 contenteditable=true>Player 1</div></th></tr>';
    for (var ii=2; ii<=numplayers; ii++) {
    for (var jj=1; jj<acellarr.length; jj++) {
    newtdis+=' id="' + acellarr[jj].split('"')[0] + ii + acellarr[jj].replace(acellarr[jj].split('"')[0], '');
    }
    document.getElementById('mythead').innerHTML=document.getElementById('mythead').innerHTML.replace('</tr>','<th><div id=div' + ii + ' contenteditable=true>Player ' + ii + '</div></th></tr>');
    document.getElementById('row1').innerHTML+='<td id=cell' + ii + '>' + newtdis + '</td>';
    document.getElementById('spananswer' + ii).innerHTML='' + myantiguess[eval(-1 + ii)];
    newtdis=acellarr[0];
    }
    }
  8. thay đổi chức năng sự kiện logic onclick của các phần tử input type=button …
    ________số 8_______
  9. thay đổi CSS để bắt đầu sử dụng bộ chọn lớp…

    <style>
    input:not([type=button]) { width:10%; background-color:#f0f0f0; }
    input[type=button] { background-color:yellow; }
    select { background-color:#f0f0f0; }
    .spananswer { color: blue; }
    .goes { color: purple; }
    </style>

Và phần còn lại là của người chơi



Hướng dẫn cơ bản về lập trình hướng đối tượng Javascript có liên quan trước đó được hiển thị bên dưới

Máy tính OOP JavaScript

Hướng dẫn lập trình hướng đối tượng Javascript Constructor Primer

Một khía cạnh quan trọng đối với bất kỳ cuộc thảo luận nào về Lập trình hướng đối tượng (hoặc OOP) sẽ phải bao gồm phần giới thiệu sớm về khái niệm Trình xây dựng (đối tượng)…

Trong lập trình hướng đối tượng dựa trên lớp, hàm tạo là một loại chương trình con đặc biệt được gọi để tạo đối tượng. Nó chuẩn bị đối tượng mới để sử dụng, thường chấp nhận các đối số mà hàm tạo sử dụng để đặt các biến thành viên cần thiết

Bản chất của chữ ký phương thức bao gồm…

  • tên phương thức … và …
  • đối số (còn được gọi là tham số) … và …
  • (các) giá trị trả về

… “kiểm tra” tính duy nhất và do đó, tính hợp lệ, có nghĩa là bất kỳ một “lớp” nào (như “bản thiết kế”, trong đó “Trình tạo” được xác định cho các “đối tượng” đã triển khai tuân theo) có thể có nhiều (tên phương thức) “Trình tạo

Vì vậy, làm thế nào tốt nhất để minh họa điều này? . Hãy xem bốn cách dưới đây để bạn có thể “xây dựng” một đối tượng Date…

Tạo đối tượng ngày
Các đối tượng ngày được tạo bằng hàm tạo Date() mới

Có 4 cách để tạo một đối tượng ngày mới

Ngày mới()
ngày mới (năm, tháng, ngày, giờ, phút, giây, mili giây)
Ngày mới (mili giây)
Ngày mới (chuỗi ngày)

Thú vị nhỉ?. Đầu tiên chúng tôi sử dụng phổ biến nhất, dẫn đến một đối tượng Ngày mô tả Ngày và Giờ khi dòng mã thực thi. Cái thứ hai được sử dụng để tạo lại Ngày và Giờ mà bạn có thông tin về. Thứ tư là cách tạo đối tượng Ngày thông qua chuỗi dấu thời gian

Chúng tôi cho rằng phần thứ ba ở trên rất hấp dẫn và tiết lộ. Có thể nào chế độ xem máy tính của dữ liệu của đối tượng Date đơn giản như có thể chứa được trong một loại mục dữ liệu "số đếm" (hoặc số nguyên) không? . Nó được tổ chức theo cách đó bởi vì nó đã được quyết định rằng ngày 1 tháng 1 năm 1970 00. 00. 00 phải là điểm bắt đầu (tức là. tham số 0) cho sự sắp xếp này. Đối với nhiều người trong chúng ta là “cũ”, thì tin buồn là, để diễn tả ngày sinh của bạn sẽ cần đến hàm tạo thứ hai hoặc thứ tư, mà thôi. Mệnh đề Hello Boomer Revenge là ba tham số của hàm tạo có thể âm. Không thích quá trẻ con ở đây, nhưng … ngarh, ngarh ngarh ngarh, ngarrrhhhh. Nhưng hãy vui lên, vì sự sắp xếp này thực sự tuyệt vời cho tốc độ xử lý của máy tính Logic đối tượng ngày tháng.

Chúng tôi quyết định viết một chút trò chơi “bằng chứng về khái niệm” (vui nhộn và) từ năm 1970. Ứng dụng web html Trò chơi mang đến cho bạn cảm giác về tất cả những điều này, có tính năng “Người xây dựng” hai và ba ở trên. Bạn cũng có thể thử nó dưới đây…

Tôi có thể sử dụng JavaScript cho OOP không?

Javascript là ngôn ngữ đa mô hình hỗ trợ các phong cách lập trình theo thủ tục, hướng đối tượng (dựa trên nguyên mẫu) và chức năng .

Làm cách nào để tạo máy tính đơn giản bằng JavaScript?

Hướng dẫn tạo một máy tính đơn giản .
Mã HTML ban đầu để bao gồm. js và. tập tin css. .
Input the Digits And Operators. This step creates buttons for digits from 0 to 9 and operators like +,-,*,/, and = .. .
Thêm kiểu dáng trong. tập tin css. Để làm đẹp những gì bạn nhìn thấy trên màn hình, kiểu dáng là rất quan trọng

Làm cách nào để tạo máy tính khoa học trong JavaScript?

<đầu>
.