2022 13th Blue Bridge Cup web group solution

Article directory

01 Fruit Platter

topic

answer

  • Layout with flex

/* TODO: code to be added */ 
#pond {
    display: flex;
    flex-direction: column; //The main axis is the y-axis and the fruit is on the y-axis 
    flex-wrap: wrap; //Allow line 
breaks}

02 Expand your fan

topic

answer

  • Using CSS animation knowledge, transform: rotate(deg)deg is the unit

/*TODO: Please add CSS code*/

#box:hover #item7 {
    transform: rotate(10deg);
}

#box:hover #item8 {
    transform: rotate(20deg);
}

#box:hover #item9 {
    transform: rotate(30deg);
}

#box:hover #item10 {
    transform: rotate(40deg);
}

#box:hover #item11 {
    transform: rotate(50deg);
}

#box:hover #item12 {
    transform: rotate(60deg);
}

#box:hover #item6 {
    transform: rotate(-10deg)
}

#box:hover #item5 {
    transform: rotate(-20deg)
}

#box:hover #item4 {
    transform: rotate(-30deg)
}

#box:hover #item3 {
    transform: rotate(-40deg)
}

#box:hover #item2 {
    transform: rotate(-50deg)
}

#box:hover #item1 {
    transform: rotate(-60deg)
}

03 Time spent with mobile phones

topic

answer

  • The type value of the original code xAxis and the type value of yAxis are reversed, and the following is the correction

var option = {
        title: {
            text: "A week's mobile phone usage time" ,
        },
        xAxis: {
            type: "category",
            data: [ "Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday" ],
        },
        yAxis: {
            type: "value",
        },
        series: [{
            data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
            type: "line",
        }, ],
    };

04 Color change of lights

topic

answer

  • timing function is used

// TODO: Improve this function to display red color lights 
function  red () {
    const defaultlight = document.querySelector('#defaultlight')
    const redlight = document.querySelector('#redlight')
    clearTimeout(redTime)
    var redTime = setTimeout(() => {
        defaultlight.style.display = 'none' 
        redlight.style.display = 'inline-block'  //note that inlin-block is written according to the css value of the original file 
    }, 3000 );
}

// TODO: Improve this function to display the green color light 
function  green () {
    const redlight = document.querySelector('#redlight')
    const greenlight = document.querySelector('#greenlight')
    clearTimeout(greenTime)
    var greenTime = setTimeout(() => {
        redlight.style.display = 'none'
        greenlight.style.display = 'inline-block'
    }, 6000);
}

// TODO: Improve this function 
function  trafficlights () {
    red()
    green()
}

trafficlights();

05 Winter Olympics Lucky Draw

topic

answer

  • Observing the html, you can see that the divs that need to turn yellow have classes written in order, so let the corresponding class names add the .active class in turn and remove the .active class from the others.

// TODO: please improve this function 
function  rolling () {
    time++; // add 1 to the number of rotations
    clearTimeout(rollTime);
    rollTime = setTimeout(() => {
        let className = {{EJS0}}
        if (time % 8 === 0) {
            className = {{EJS1}}
        }
        $( {{EJS2}} ).addClass( "active" ).siblings().removeClass( "active" )
         window .requestAnimationFrame(rolling); // do recursive animation 
    }, speed);

06 Blue Bridge Knowledge Network

topic

answer

  • Investigate html and css, and write as required

html code

<!--TODO: Please add code--> 
    < div  class = "canter" > 
        < div  class = "header" > 
            < div  class = "nav" > 
                < span > Bluebridge Knowledge Network </ span > 
                < div  class = "nav_c" > 
                    < span > Home </ span > 
                    < span > Popular Technologies </ span > 
                    < span >User Manual </ span > 
                    <span > knowledge base </ span > 
                    < span > practice questions </ span > 
                    < span > contact us </ span > 
                    < span > more </ span > 
                </ div > 
            </ div > 
            < div  class = "header_text" > 
                < p  class = "title_header" > Blue Bridge Cloud Class </ p > 
                <p class="title_p"> Enrich your tech stack anytime, anywhere! </ p > 
                < div  class = "join" >
                    join us
                </div>
            </div>
        </div>

    </ div > 
    < div  class = "conter" > 
        < div  class = "item" > 
            < span > Artificial intelligence </ span > 
            < p > Artificial intelligence, also known as omniscient, machine intelligence, refers to the displayed intelligence. Generally artificial intelligence refers to the technology of rendering human intelligence through ordinary computer programs. </ p > 
        </ div > 
        < div  class = "item" > 
            < span > front-end development </ span > 
            < p >Front-end development is the process of creating front-end interfaces such as WEB pages or APPs to present to users. The user interface interaction of Internet products is realized through HTML, CSS, JavaScript and various derived technologies, frameworks and solutions. </ p > 
        </ div > 
        < div  class = "item" > 
            < span > Back- end development </ span > 
            < p > Back-end development is to realize the interactive logic of the page, and realize the operation function of the page by using the back-end language , such as login, registration, etc. </ p > 
        </ div > 
        < div  class = "item" > 
            < span > Information Security </ span > 
            <ISO (International Organization for Standardization) is defined as: technical and administrative security protections established and adopted for data processing systems in order to protect computer hardware, software, and data from accidental and malicious reasons. Give way. </ p > 
        </ div > 
    </ div > 
    < div  class = "footer" > 
        < div  class = "footer_text" > 
            < span > © Blue Bridge Cloud Class 2022 </ span > 
            < p > Beijing Public Network Security 11010102005690 No. Beijing ICP No. 2021029920 </ p > 
        </ div >

    </div>

css code

TODO: please add code 
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.canter {
    background-color: #a6b1e1;
}

.header {
    width: 1024px;
    margin: 0 auto;
    height: 440px;
    padding-top: 13px;
}

.nav {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    height: 46px;
    padding: 0 10px;
}

.nav>span {
    font-size: 18px;
    color: white;
    margin-right: 365px;
    font-weight: 600;
}

.nav_c span {
    font-size: 16px;
    color: white;
    margin-right: 28px;
    font-weight: 600;
}

.nav_c span:nth-child(7) {
    margin-right: 0px;
}

.header_text {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.title_header {
    font-size: 45px;
    color: black;
    margin-bottom: 62px;
}

.title_p {
    font-size: 21px;
    font-weight: 200;
    color: white;
    margin-bottom: 36px;
}

.join {
    color: #efbfbf;
    border-radius: 2px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: inset 0 0 0 2px #efbfbf;
}

.conter {
    width: 1024px;
    margin: 74px auto 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 302px;
}

.conter .item {
    height: 144px;
    width: 502px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.conter .item span {
    font-size: 30px;
    font-weight: 200;
    color: black;
}

.conter .item p {
    font-size: 18px;
    color: #aaa;
    line-height: 1.4em;
}

.footer {
    width: 100%;
    height: 80px;
    border-top: 2px solid #aaa;
}

.footer_text {
    width: 1024px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    color: #aaa;
    padding-top: 30px;
}

.footer_text p {
    margin-top: 10px;
}

07 Layout switching

topic

answer

08 Shopping Cart

topic

09 Finding Werewolf

topic

answer

10 Course List

topic

answer

Leave a Comment

Your email address will not be published. Required fields are marked *