怎样用javascript 编写一个盒子,点击盒子使其呈阶梯性变换大小,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <style>
   *{
       margin:0;
       padding:0;
       
       }
       div {
           width: 400px;
           height:400px;
           background-color:pink;
           }
   </style>
</head>

  <body>
  <div></div>
    <script>
       var div = document.querySelector('div');
      
       div.onclick = function() {
             this.style.width = '200px';
             this.style.height = '200px';
             this.style.backgroundColor = 'green';
          
          
       } 
    </script>
  </body>
</html>

 

在里面定义一个变量 var flag = 0; 使用if ....else.... 循环可以吗  

你所想表达的是在变换的过程中加上动画过渡效果吗?如果是请去了解  CSS transition 属性