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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< - ชั้นแรก (สีเขียวในกรณีนี้) กำหนดแบบไดนามิก ->
<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 มาใช้งานนะครับ

1
2
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก tutorialzine

Comments

comments

Powered by Facebook Comments