JavaScript — case demonstration: Click to have surprise

Time:2021-4-19

1、 Mode one

Several pages click once to switch once

Steps:

1. Build box1, set the position of box1's width and height background color, its internal text line height, font size and font color

2. Set box1 click event

Code demonstration:

Document
    
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: auto;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: white;
        }


    



    Click to have surprise!


    var box=document.getElementsByClassName("box")[0]
    var count=0
    box.onclick=function () {
        count++
        if (count  == 1){
            this.style.backgroundColor="green"
            this.innerText= "Keep clicking! "
        }else if(count  == 2){
            this.style.backgroundColor="yellow"
            this.innerText= "The best is coming soon"

        }else if(count  == 3){
            this.style.backgroundColor="pink"
            this.innerText= "Fool you"

        }else {
            this.style.backgroundColor="red"
            this.innerText="Click to have surprise!"
            count=0

        }

    }

2、 Mode 2

The steps are the same, that is, there is a slight change in mode 1

Using JavaScript to get remainder

Change code demo:

box.onclick=function () {
        count++
        if (count % 4 == 1){
            this.style.backgroundColor="green"
            this.innerText= "Keep clicking! "
        }else if(count % 4 == 2){
            this.style.backgroundColor="yellow"
            this.innerText= "The best is coming soon"

        }else if(count % 4 == 3){
            this.style.backgroundColor="pink"
            this.innerText= "Fool you"

        }else {
            this.style.backgroundColor="red"
            this.innerText= "Click to have surprise! "
            // count=0
        }

 

Recommended Today

Rust Study RoadMap

background In recent months, I began to learn rust, and began to write some code with rust. Now, I don’t have a deep understanding of rust, but it’s OK to write some code everyday, and I can learn the next step as needed. In the process of learning, the author also read a lot of […]