Edit in JSFiddle

JavaScript
HTML
CSS
Result

$(document).ready(function(){
	var elevator = $('.elevator');
	var floors = $('.floor');
	var f1 = $('#f1');



	elevator.css({
	    top: f1.position().top+58,
  	});

	elevator.hover(function() {
		$(this).addClass('yellowgreen');
	}, function() {
		$(this).removeClass('yellowgreen');
	});

	elevator.click(function(event) {
		$('div:animated').stop()
		$('div:animated').fadeOut('fast');
		$('div:animated').fadeIn('fast');
		$('div:animated').animate({param1: value1, param2: value2}, speed)
	});

	floors.bind({
		mouseenter : function() {$(this).addClass('brown')},
		mouseleave : function() {$(this).removeClass('brown')},
		click: function(){
			floors.removeClass('clickbrown')
			$(this).addClass('clickbrown')
		}
	});

	floors.each(function() {
   		var pos = $(this).position();
		$(this).click(function(){    
			if ( $(this).attr('id') === 'runner' ) {
    	  		return;
    		};
   			elevator.delay(500).animate({top: pos.top+58}, 1000);
			runner.animate({left: '-=150px'}, 500);
      		runner.animate({
      				top: pos.top+58,
        			left: pos.left+230
      				}, 1000);
      		runner.animate({left: '+=150px'}, 500);
		});
	});
});

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="testing.css" />
  <title>송광섭</title>
 <!-- <script src="event.js"></script>  -->
  <script type="text/javascript">
<!--
    setInterval("dpTime()",1000);
    function dpTime(){
       var now = new Date();
        hours = now.getHours();
        minutes = now.getMinutes();
        seconds = now.getSeconds();
 
        if (hours > 12){
            hours -= 12;
        ampm = "오후 ";
        }else{
            ampm = "오전 ";
        }
        if (hours < 10){
            hours = "0" + hours;
        }
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
document.getElementById("dpTime").innerHTML = ampm + hours + ":" + minutes + ":" + seconds;
    }



//-->
</script>
 
</head>
<body>
<div class="tower"> 
    <div class="floor" id="f7">7th floor</div> 
    <div class="floor" id="f6">6th floor</div>
    <div class="floor" id="f5">5th floor</div>
    <div class="floor" id="f4">4th floor</div>
    <div class="floor" id="f3">3rd floor</div>
    <div class="floor" id="f2">2nd floor</div>
    <div class="floor" id="f1">1st floor</div>
  </div>
  <div class="elevator">elevator</div>

  <div class="clock" id="dpTime">time</div>
  </div>
  
</body>
</html>

body{
    background:#222;
    color:#fff;
    padding:30px 20px 20px 30px;
    line-height:1.4;
    font-family: '나눔 고딕';
}

.tower{
    display: inline-block;
    background-color: grey;
    left: 320px;
    position: relative;
}



.floor {
    width: 300px;
    height: 100px;
    background-color: pink;
    margin:10px 10px 10px 10px;
    font-size:2em;
    font-weight:bold;
    cursor: pointer;
    position: 50px;
    text-align: right;
    padding-right: 10px;
}

.clock{
    width: 300px;
    height: 50px;
    background-color: red;
    margin:10px 10px 10px 10px;
    padding-right: 10px;
    font-size:2em;
    font-weight:bold;
    top: 100px;
    text-align: center;
}

.elevator {
    width: 300px;
    height: 100px; 
    margin: -10px 10px 10px 10px;
    background-color: skyblue;
    position: absolute;
    padding-left: 10px;
    font-size:2em;
    font-weight:bold;
    cursor: default;
}

.brown {
    background-color: brown;
}

.clickbrown {
    background-color: brown;
}

.yellowgreen {
    background-color: yellowgreen;
}