Edit in JSFiddle

 $(document).ready(function () {
     // To run the clock with current time.
     updateVisual();

     function updateVisual() {
         var time = new Date();
         second = time.getSeconds();
         hour = time.getHours();
         minute = time.getMinutes();

         // Calculating  the seconds,minutes,hours  position values.
         sec = second * 6;
         min = minute * 6;
         hrs = ((hour % 12) / 12) * 360 + 90 + minute / 12;

         //Setting css sytles
         $('#hour').css({
             "transform": "rotate(" + hrs + "deg)",
                 "-webkit-transform": "rotate(" + hrs + "deg)"
         });
         $('#minute').css({
             "transform": "rotate(" + min + "deg)",
                 "-webkit-transform": "rotate(" + min + "deg)"
         });
         $('#second').css({
             "transform": "rotate(" + sec + "deg)",
                 "-webkit-transform": "rotate(" + sec + "deg)"
         });

     }

     setInterval(function () {
         updateVisual()
     }, 1000);
     
     //Setting the link "herf" attribute value.
     $("#themeChooser").change(function () {
         $("#themeStyle").attr("href", "http://code.jquery.com/ui/1.10.3/themes/" + $(this).val() + "/jquery-ui.css");

     });
 });

<link id="themeStyle" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="circle ">
    <div class="face ui-widget-header  ">
        <div id="hour" class="ui-state-hover" style="-webkit-transform: rotate(0deg)"></div>
        <div id="minute" class="ui-state-hover" style="-webkit-transform: rotate(360deg)"></div>
        <div id="second" class="ui-state-hover" style="-webkit-transform: rotate(270deg)"></div>
    </div>
    <br />
    <br />
    <label>Select Your Theme:</label>
    <select id="themeChooser">
        <option value="smoothness">smoothness</option>
        <option value="black-tie">black-tie</option>
        <option value="blitzer">blitzer</option>
        <option value="cupertino">cupertino</option>
        <option value="dark-hive">dark-hive</option>
        <option value="dot-luv">dot-luv</option>
        <option value="eggplant">eggplant</option>
        <option value="excite-bike">excite-bike</option>
        <option value="flick">flick</option>
        <option value="hot-sneaks">hot-sneaks</option>
        <option value="humanity">humanity</option>
        <option value="le-frog">le-frog</option>
        <option value="mint-choc">mint-choc</option>
        <option value="overcast">overcast</option>
        <option value="pepper-grinder">pepper-grinder</option>
        <option value="redmond">redmond</option>
        <option value="south-street">south-street</option>
        <option value="start">start</option>
        <option value="sunny">sunny</option>
        <option value="swanky-purse">swanky-purse</option>
        <option value="trontastic">trontastic</option>
        <option value="ui-darkness">ui-darkness</option>
        <option value="ui-lightness">ui-lightness</option>
        <option value="vader">vader</option>
    </select>
</div>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;"
/>

body {
    background-color: whitesmoke;
}
.face {
    width: 150px;
    height: 150px;
    border: 5px solid whitesmoke;
    border-radius: 50%;
    position: relative;
}
.face:before {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: whitesmoke;
    border-radius: 50%;
    content:"";
    display: block;
}
.class {
    width: 260px;
    height: 260px;
    left: 20px;
    top: 20px;
    position: absolute;
}
#hour {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0px -5px -25%;
    padding: 5px 0px 5px 25%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    border-radius: 5px 0 0 5px;
}
#minute {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -5px 0;
    padding: 40% 5px 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    border-radius: 5px 5px 0 0;
}
#second {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -1px 0 0;
    padding: 40% 1px 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}