สร้างนาฬิกาสีสันแบบเก๋ๆ ด้วย CSS & jQuery

Posted by : The Evilman September 26, 2013

สร้างนาฬิกาสีสันแบบเก๋ๆ ด้วย CSS & jQuery

วันนี้เป็นการสร้างนาฬิกาด้วย CSS และ jQuery โดยการใช้ css ในการจัดการสีและรูปแบบหนุมของรูปวงกลมที่ใช้ในการหมุนคล้ายกับเข็มนาฬิกาโดยเวลาที่กำหนอจะเป็นเวลาปัจุบันโดยกำหนดเป็น 24 ชั่วโมง โดยรูปแบบของหน้า index จะเป็นการใช้ XHTML เป็นมาร์กอัปโดยการใช้ Div และเรียกใช้งานเอาครับ

< - ชั้นแรก (สีเขียวในกรณีนี้) กำหนดแบบไดนามิก ->

<div class="green clock"</div>

< - วินาทีนาทีหรือชั่วโมง - - DIV นี้มีค่าการตรวจสอบของหน่วย>

<div class="display"></div>

< -! พื้นที่สีดำที่ซ่อนอยู่ภายใต้พื้นหลัง ->

<div class="front left"></div>

< - ส่วนด้านซ้ายของพื้นหลัง: ->

<div class="rotate left">

<div class="bg left"></div>

</div>

< - ส่วนขวาของพื้นหลัง: ->

<div class="rotate right">

<div class="bg right"></div>

</div>

</div>

อย่าลืมใส่โค้ดด้านล่างเพื่อเรียก css มาใช้งานนะครับ

<link rel="stylesheet" type="text/css" href="styles.css" />

<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{

    /* Simple page reset */

    margin:0;

    padding:0;

}

body{

    /* Setting default text color, background and a font stack */

    color:#dddddd;

    font-size:13px;

    background: #302b23;

    font-family:Arial, Helvetica, sans-serif;

}

#fancyClock{

    margin:40px auto;

    height:200px;

    border:1px solid #111111;

    width:600px;

}