SOURCE

console 命令行工具 X clear

                    
>
console
// JavaScript Document

$(document).ready(function(e) {
	
	function wink(flag) {
		if(flag) {
			$(".eye .round").hide();
			$(".eye").removeClass("open_eye").addClass("close_eye");
		} else {
			$(".eye").removeClass("close_eye").addClass("open_eye");
			$(".eye .round").show();
		}
	}
	function ear_up_and_down(flag) {
		if(flag) {
			$("#left-ear").addClass("left-ear-up");
			$("#right-ear").addClass("right-ear-up");
		} else {
			$("#left-ear").removeClass("left-ear-up");
			$("#right-ear").removeClass("right-ear-up");
		}
	}
	function bread_up_and_down(flag) {
		if(flag) {
			$(".one-beard").addClass("one-beard-up");
			$(".two-beard").addClass("two-beard-up");
		} else {
			$(".one-beard").removeClass("one-beard-up");
			$(".two-beard").removeClass("two-beard-up");
		}
	}
	
	$(".eye").click(function(e) {
		var n = 0, flag = true;
        var count = setInterval(function() {
			if (n == 3)
				window.clearInterval(count);
			console.log(n++);
			
			wink(flag);
			if(flag)
				flag = false;
			else
				flag = true;
		}, 300);
    });
	$(".ear").click(function(e) {
        var n = 0, flag = true;
		var count = setInterval(function() {
			if (n == 3)
				window.clearInterval(count);
			console.log(n++);
			
			ear_up_and_down(flag);
			if(flag)
				flag = false;
			else
				flag = true;
		}, 300);
    });
	
	$(".beard").click(function(e) {
        var n=0, flag=true;
		var count = setInterval(function() {
			if (n == 3)
				window.clearInterval(count);
			console.log(n++);
			
			bread_up_and_down(flag);
			if(flag)
				flag = false;
			else
				flag = true;
		}, 300);
    });
	
	$(".mouses").click(function(e) {
        $("#bottom-mouse").slideDown("normal").slideUp("slow");
    });
	
	$(".face").click(function(e) {
        $(".cheeks").fadeIn("slow").fadeOut("slow");
    });

});
<script id="jquery_172" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<div class="face">
  <div class="half-face"></div>
	<div class="cheeks">
		<div class="cheek left-cheek"></div>
		<div class="cheek right-cheek"></div>
	</div>
  <div class="eyes">
    <div class="eye left-eye open_eye">
      <div class="round"></div>
    </div>
    <div class="eye right-eye open_eye">
      <div class="round"></div>
    </div>
  </div>
  <div class="mouses">
  	<div id="bottom-mouse"></div>
    <div class="mouse left-mouse"></div>
    <div class="mouse right-mouse"></div>
  </div>
  <div class="beards">
    <div class="half-beards left-beards">
      <div class="beard one-beard"></div>
      <div class="beard two-beard"></div>
    </div>
    <div class="half-beards right-beards">
      <div class="beard one-beard"></div>
      <div class="beard two-beard"></div>
    </div>
  </div>
</div>
<div class="ears">
  <div id="left-ear" class="ear left-ear">
    <div class="round"></div>
  </div>
  <div id="right-ear" class="ear right-ear">
    <div class="round"></div>
  </div>
</div>
/* CSS Document */

div { position:absolute; }

div.face {
  top:100px;
  left:50px;
  width:350px;
  height:300px;
  border-radius:50% 50% 40% 40%;
  background-color:#cff;
  border:3px solid #000;
}
div.face div.half-face {
  width:50%;
  height:50%;
  background-color:#3cf;
  top:0px;
  left:50%;
  border-radius:0% 100% 0% 70%;
}
div.face div.cheeks {
	display:none;
	top:195px;
	left:15px;
	width:320px;
}
div.face div.cheeks div.cheek {
	width:80px;
	height:35px;
	background-color:#F69;
	border-radius:50%;
}
div.face div.cheeks div.left-cheek { top:0px; left:0px; }
div.face div.cheeks div.right-cheek { top:0px; right:0px; }
div.face div.eyes {
  width:80%;
  height:100px;
  top:100px;
  left:35px;
}
div eye { overflow:auto; }
div.face div.eyes div.left-eye {
  left:0px;
}
div.face div.eyes div.right-eye {
  left:175px;
}
div.face div.eyes div.open_eye {
  width:100px;
  height:100px;
  background-color:#fff;
  border:2px solid #000;
  border-radius:50%;
}
div.face div.eyes div.close_eye {
  top:50px;
  width:100px;
  height:15px;
  background-color:#000;
}

div.face div.eyes div.eye div.round {
  width:80px;
  height:80px;
	background-color:#000;
  border-radius:50%;
  top:10px;
  left:10px;
}

div.face div.mouses {
  width:50px;
  height:12px;
  top:210px;
  left:150px;
  z-index:10;
}
div.face div.mouses div.mouse {
  width:47%;
  height:100%;
  border-bottom:3px solid #000;
  border-radius:0 0 80% 80%;
  background-color:#cff;
}
div.face div.mouses div.left-mouse {
  border-right:3px solid #000;
  border-radius:20% 0 80% 80%;
}
div.face div.mouses div.right-mouse {
  border-radius:0 20% 80% 80%;
  border-left:3px solid #000;
  left:47%;
}
div.face div.mouses div#bottom-mouse {
	display:none;
	width:21px;
	height:50px;
	background-color:#fcf;
	left:12px;
  border-radius:0 0 50% 50%;
  border-left:3px solid #000;
  border-right:3px solid #000;
  border-bottom:3px solid #000;
}


div.face div.beards {
  width:300px;
  height:70px;
  top:210px;
  left:27px;
}
div.face div.beards div.half-beards {
  width:50%;
  height:100%;
}
div.face div.beards div.right-beards {
  left:50%;
}
div.face div.beards div.half-beards div.beard {
  width:50px;
  height:0px;
  border:1px solid #000;
}
div.face div.beards div.left-beards div.one-beard {
  top:10px;
  left:20px;
  -webkit-transform: rotate(5deg);
}
div.face div.beards div.left-beards div.two-beard {
  top:30px;
  left:20px;
  -webkit-transform: rotate(-5deg);
}
div.face div.beards div.right-beards div.one-beard {
  top:10px;
  left:70px;
  -webkit-transform: rotate(-5deg);
}
div.face div.beards div.right-beards div.two-beard {
  top:30px;
  left:70px;
  -webkit-transform: rotate(5deg);
}
div.face div.beards div.left-beards div.one-beard-up {
  top:8px;
  left:20px;
  -webkit-transform: rotate(10deg);
}
div.face div.beards div.left-beards div.two-beard-up {
  top:28px;
  left:20px;
  -webkit-transform: rotate(0deg);
}
div.face div.beards div.right-beards div.one-beard-up {
  top:8px;
  left:70px;
  -webkit-transform: rotate(-10deg);
}
div.face div.beards div.right-beards div.two-beard-up {
  top:28px;
  left:70px;
  -webkit-transform: rotate(0deg);
}

div.ears {
  width:400px;
  height:200px;
  left:30px;
  top:90px;
  z-index:-1;
}
div.ear {
  background-color:#3cf;
  width:200px;
  height:200px;
  border:3px solid #000;
  border-radius:15% 80% 80% 80%;
}
div.left-ear {
  -webkit-transform: rotate(5deg);
}
div.right-ear {
  left:200px;
  -webkit-transform: rotate(85deg);
}
div.left-ear-up {
  -webkit-transform: rotate(15deg);
}
div.right-ear-up {
  -webkit-transform: rotate(75deg);
}
div.ear div.round {
  background-color:#fcf;
  width:160px;
  height:160px;
  border:2px solid #000;
  border-radius:15% 80% 80% 80%;
  top:10px;
  left:10px;
}