JavaScript >> Javascript 文檔 >  >> jQuery

JavaScript 挑戰:讓我變藍!

你認為你知道 JavaScript 和 jQuery 嗎?接受我們的挑戰來證明這一點!你將面對敵人、老闆和足夠多的 div,讓一個成熟的 Web 開發人員哭泣。你將需要瘋狂的 JavaScript 和 jQuery 技能,以及一個午休時間來完成它們。最好的部分是什麼?它看起來好像你在工作!

$.fn.blue = function(){ 

    if(this.filter('.bomb').length) return _FAIL('You triggered a bomb!');

    for(var i=0; i < this.length; i++){
        if( this.eq(i).data('_BOMB') ) return _FAIL('You triggered a bomb!');
    }

    this.addClass('blue');
    _VALIDATE(this);
    return this;
}
var evil = {
    armBomb: function(el){ el.addClass('bomb'); el.data('_BOMB', true); },
    disarmBomb: function(el){ el.removeClass('bomb'); el.data('_BOMB', false); },
    unBlue: function(el){ el.removeClass('blue'); }
};

$('.bomb').each(function(){
    $(this).data('_BOMB', true);
});

body{background-color:#fcfcfc;padding:40px;text-align:center;}
ul {list-style:none;}
ul li, div{width:50px;height:50px;background-color:#ccc;display:inline-block;color:#fff; font-family:sans-serif; line-height:50px; text-align:center;}
.blue{background-color:#5babcd;}
.bomb{background-color:#df463f;}
span, i{display:inline-block;min-width:20px;min-height:10px;}
教程雜誌 挑戰 0% 分享你的分數 Twitter Facebook G+

規則

挑戰包括在我們出色的代碼編輯器中運行的 10 個任務。每個編輯器都有許多帶有代碼的選項卡,但除了一個之外,所有選項卡都被鎖定。您將需要使用您的 JavaScript 技能和獨創性來通過它們。

  • 您可以使用任何您喜歡的 jQuery 函數。
  • 使用我們的 .blue() 讓元素變藍的 jQuery 方法。

這就是規則。讓我們從第一個任務開始吧!

1。 ID 很簡單

您的挑戰是製作 #me div 藍色。因為這是你的第一個,我們繼續為你做了。只需取消註釋 JS 選項卡 中的行 然後點擊運行 .只有真正的編程如此簡單!

<div id="me"></div>
// Write your JS code in this pane. The first one is on us:
// $('#me').blue();
_VALIDATE = function(){
    if($('#me').hasClass('blue')){
        _SUCCESS();
    }
    else _FAIL();
}
// Timeout failure:
setTimeout(_FAIL, 100);

在輕鬆獲勝之後,讓我們轉向更具挑戰性的事情。

2。課程也是如此..

所以你聽說過這些叫做類的東西嗎?驚人的!使用 .wants-to-be-blue 製作元素 類名藍色,就像你在第一個挑戰中對 div 所做的那樣。

<div></div>
<div></div>
<div class="wants-to-be-blue"></div>
<div></div>
// Write your JS here
_VALIDATE = function(){

    var blue = $('.blue');
    var shouldBe = $('div:eq(2)');

    if(blue.length == 1 && shouldBe.length == 1 && shouldBe.is('.blue')){
        _SUCCESS();
    }
    else _FAIL();
}
// Timeout failure:
setTimeout(_FAIL, 100);

3。無序列表

沒有人能阻止你!這個怎麼樣?將帶有註釋的 LI 元素(但只有那個 LI)設為藍色!

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li><!-- Make me blue! --></li>
    <li></li>
    <li></li>
</ul>
// Write your JS here
_VALIDATE = function(){

    var blue = $('.blue');
    var shouldBe = $('li:eq(3)');

    if(blue.length == 1 && shouldBe.length == 1 && shouldBe.is('.blue')){
        _SUCCESS();
    }
    else _FAIL();
}
// Timeout failure:
setTimeout(_FAIL, 100);

4。前面有危險的 HTML!

你的 jQuery-fu 很強大。也許你需要一些更困難的東西?規則和以前一樣 - 將帶有註釋的元素設為藍色。

<section>
    <p>Treacherous HTML ahead!</p>

    <div id="make-me-blue">
        <!-- Make me blue! -->
    </div>

    <div></div>

    <div><!-- Make me blue! --></div>
</section>

<section>

    <p>Can you make this span blue too? <span><!-- Make me blue! --></span></p>
    <p>But not <span>this one!</span></p>

    <div></div>

    <p>Yes, I know, HTML can be mean sometimes. But it is not on purpose! 
        <span>Or is <i>it?</i> <i><!-- Make me blue! --></i></span></p>

    <div><div><!-- Make me blue! --></div></div>
</section>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 5 && $('section:first div:eq(0)').is('.blue') && $('section:first div:eq(2)').is('.blue') 
        && $('section:last p:eq(0) span').is('.blue') && $('section:last p:last span i:last').is('.blue') 
        && $('section:last div div').is('.blue') ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 100);

5。注意順序!

這個很棘手。將 div 變為藍色,但按照它們包含的數字的順序排列。

<!-- Make all these divs blue in the correct order -->

<div>6</div>
<div>2</div>
<div>7</div>
<div>5</div>
<div>9</div>
<div>4</div>
<div>8</div>
<div>1</div>
<div>3</div>
// Write your JS here
_VALIDATE = function(elem){

    var num = parseInt(elem.text(), 10);

    if(isNaN(num)){
        return _FAIL();
    }

    for(var i = 0; i < num; i++){
        if( !$('div:contains(' + (i+1) + ')').is('.blue') ) return _FAIL('Wrong order!');
    }

    if( $('div.blue').length == 9 ){
        _SUCCESS();
    }
};
setTimeout(_FAIL, 1000);

6。當心炸彈!

讓我們讓事情變得更有趣。一些 div 是“炸彈”。試圖讓它們變成藍色會導致它們熄滅。所以你必須想辦法把所有的 :not bomb divs 變成藍色(得到提示了嗎?;)。

<!-- Make all divs blue *except* the bombs. -->

<div></div>
<div class="bomb"></div>
<div></div>
<div class="bomb"></div>
<div></div>
<div></div>
<div class="bomb"></div>
<div></div>
<div></div>
<div class="bomb"></div>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 6 && $('div.blue').length == 6 ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 100);

7。你有敵人!

但是沒有敵人的生活是什麼?見敵人 編輯器中的標籤?它包含您無法編輯的 JS 代碼。仔細閱讀以通過此挑戰。提示:setTimeout 是你的朋友!

// Your enemy's JS

var div = $('<div>'),
    container = $('section');

setTimeout(function(){
    container.append(div);
}, 1000);
<section>
    <!-- Your enemy will append a div here. Make it blue! -->
</section>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 1 && $('section div').is('.blue') ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 2500);

8。速度就是一切

敵人可以使用特殊物品 - 邪惡 .它包含各種邪惡的方法,旨在讓你的生活變得悲慘。但是每個敵人都有自己的弱點!

// Your enemy's JS

var div = $('div'),
    button = $('button');

// Only enemies have access to evil.* functions.
evil.armBomb(div);

button.on('click', function(){
    evil.disarmBomb(div);
});

setTimeout(function(){
    button.off('click');
}, 100);
<button>Click me, fast!</button>
<div><!-- Make me blue --></div>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 1 && $('div').is('.blue') ){

        _SUCCESS();

    }
};
setTimeout(_FAIL, 1000);

9。隨機化

這次敵人會隨機選擇 5 個 id 放在 p 元素中。你的工作是解析它的內容,然後把這 5 個元素變成藍色。

// Your enemy's JS

var ids = 'edno dve tri chetiri pet shest sedem osem devet deset'.split(' ');

// Randomize the array (somewhat)
ids.sort(function() {
    return .5 - Math.random();
});

$('#map').text(ids.slice(0, 5).join(' '));
<p id="map">
    <!-- This paragraph will be populated with randomly generated IDs -->
</p>

<div id="edno"></div>
<div id="dve"></div>
<div id="tri"></div>
<div id="chetiri"></div>
<div id="pet"></div>
<div id="shest"></div>
<div id="sedem"></div>
<div id="osem"></div>
<div id="devet"></div>
<div id="deset"></div>
// Write your JS here
_VALIDATE = function(){

    var ids = $('#map').text().split(' ');

    if(ids.length !== 5) return _FAIL();

    var selected = $('div.blue').filter( function(id){ return ids.indexOf(this.id) != -1 });

    if( $('.blue').length == 5 && selected.length == 5 ){
        _SUCCESS();
    }
};
setTimeout(_FAIL, 1000);

10.老闆打架

幹得好,士兵!我們印象深刻。你已經達到了把男人變成英雄的水平。您的任務是使頁面上的所有 div 變為藍色,但要注意 - 有兩個老闆會四處移動炸彈。你能打敗他們嗎?

// Boss 1

var delay = 0,
    position = 0,
    divs = $('div');

setTimeout(moveBomb, delay);

function moveBomb(){

    evil.disarmBomb(divs.eq(position));

    setTimeout(function(){

        position++;

        if(position >= divs.length){
            position = 0;
        }

        evil.unBlue(divs.eq(position));
        evil.armBomb(divs.eq(position));

        setTimeout(moveBomb, 500);

    }, 100);

};
// Boss 2

var delay = 50,
    position = 5,
    divs = $('div');

setTimeout(moveBomb, delay);

function moveBomb(){

    evil.disarmBomb(divs.eq(position));

    setTimeout(function(){

        position++;

        if(position >= divs.length){
            position = 0;
        }

        evil.unBlue(divs.eq(position));
        evil.armBomb(divs.eq(position));

        setTimeout(moveBomb, 500);

    }, 100);

};
<!-- Make all divs blue! -->

<div class="bomb"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="bomb"></div>
<div></div>
<div></div>
<div></div>
<div></div>
// Write your JS here
_VALIDATE = function(){

    if( $('.blue').length == 10 && $('div.blue').length == 10 ){

        // hackerishly clear all timeouts
        var t = setTimeout(function(){}, 10);
        for(var i = 0; i < t; i++) clearTimeout(i);

        _SUCCESS();
    }
};
setTimeout(_FAIL, 10000);

Tutorial JavaScript 教程
  1. tailwindcss 3 沒有在反應中加載 css

  2. Switch – JavaScript 系列 – 第 10 部分

  3. 我是 6 個多月的全職區塊鏈開發人員,AMA!

  4. 什麼是 React 中的三個點 (...) 或展開運算符

  5. 最短的 Javascript 程序,窗口和這個

  6. 為什麼使用腳本在 div 中加載的 html 不調用 javascript?

  7. React 身份驗證,簡化

  1. 命名參數 | JS

  2. 檢測 Javascript 中的自動填充字段

  3. React 和 TypeScript Pt.1 入門 - 如何設置您的項目

  4. Vue.js 中的片段

  5. 您不知道自己需要的 10 大開發人員工具

  6. 可能沒有比使用更漂亮的代碼格式更好的方法來毫不費力地提高代碼質量

  7. TypeScript 文字和集合類型

  1. 使用 Vercel 創建無服務器函數

  2. 為標籤雲效果動態調整文本大小

  3. 如何用 PureScript 替換 React 組件

  4. 從選項數量中獲取所有變體