思路：
2（装有二维码为背景图片）、3、4号盒子独立成块。如下图：
4号盒子装码登陆的内容，3号盒子装账号登陆的内容。3、4号两个盒子堆叠放置。设立一个全局变量的标志位var flag = ture。因为默认显示的是账号登陆，flag默认时ruetrue，为了让2号盒子能实现来回切换，所以监听2号盒子下写上if条件，当flag为true时，点击盒子4号盒子diplay为block。并把flag改为false。否则4号盒子display = ‘none，并把flag改为ture。
js代码：
var flag = true;cod.addEventListener('click', function() { //cod是2号盒子if (flag) {this.children[0].src = 'img/loading/whitecodecomputer.png'; //2号盒子的img标签是第一个子孩子this.children[0].style.transform = 'rotate(0deg)';this.children[2].innerHTML = '密码登陆'; //鼠标悬浮提示密码登陆还是扫码登陆，是2号盒子的第三个子孩子card.style.display = 'block'; //card是4号盒子（即扫码登陆的大盒子）flag = false;} else {this.children[0].src = 'img/loading/white_cod.png';this.children[0].style.transform = 'rotate(90deg)';this.children[2].innerHTML = '扫码登陆';card.style.display = 'none';flag = true;};});
效果如下：
