day65-test

目次

一、クリックイベントコントロールラベル色

二、クリック回数を実現し、ページラベルの色を変換する

三、周期的に色の回転変色を実現する

練習問題

一、クリックイベントコントロールラベルの色

1、赤、黄、青の3つのボタンと、200 x 200の長方形のボックスboxがあり、異なるボタンをクリックすると、boxの色が指定された色に切り替わる

    
    



    

        

        
        
        
    




    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'red'
            },
        methods:{
            tag (a,b) {
                this.bgc = b
            }
        }
    })

二、クリック数を実現し、ページラベルの色を変換する

2、200 x 200の矩形枠wrapがあり、wrap自体をクリックし、クリック回数を記録し、1回であればwrapがpink色、2回でwrapがgreen色、3回でwrapがcyan色、4回で再びpink色に戻り、順番に類推する

    
    



    

        

    




    let num = 0;
    new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
            bgc: 'yellow'
            },
        methods:{
            tag () {
                num += 1;
                if (num==1){
                    this.bgc = 'pink'
                }else {if (num==2){
                    this.bgc = 'green'
                }else {
                    this.bgc = 'cyan';
                    num = 0
                }}
            }
        }
    })

三、周期的に色の回転変色を実現する

1、図のように:図形の初期の左の赤と右の緑、クリックした後に上の赤と下の緑になって、更にクリックして右の赤と左の緑になって、更にクリックして下の赤と上の緑になって、順番に類推します
2、図をプログラムして自動回転することができる

    
    



    

        

    




    let num = 0;
    let app = new Vue({
        el:'#app',
        data:{
            h: '200px',
            w: '200px',
             //       （  ）
            bgc: 'linear-gradient(to top, red 50%, green 50%)', 
            rad: '50%'
            },
        methods:{
            tag () {
                num += 1;
                if (num==1){
                    //     
                    this.bgc = 'linear-gradient(to top, red 50%, green 50%)' 
                }else {if (num==2){
                    this.bgc = 'linear-gradient(to left, red 50%, green 50%)'
                }else {if (num==3) {
                    this.bgc = 'linear-gradient(to bottom,red  50%, green 50%)'
                }else {
                    this.bgc = 'linear-gradient(to right, red 50%, green 50%)';
                    num = 0
                }
                }}
            }
        }
    });
    function funcTest(){
    //        （    ）     
    window.setInterval(app.tag,666);  
}
    //              
    window.onload = funcTest;