เราได้ดูการสร้างนาฬิกาโดยใช้ CSS และ JavaScript แล้ว ในบทช่วยสอนนี้ เราจะสร้างนาฬิกาแบบเดียวกันโดยใช้ CSS3 เพื่อดูว่าทำอย่างไร มาตรฐานใหม่เปลี่ยนแนวทางการพัฒนาเอฟเฟกต์ต่างๆ การสาธิตสำหรับบทช่วยสอนนี้จะใช้ได้เฉพาะในเบราว์เซอร์ที่รองรับคุณสมบัติ CSS3 เท่านั้น หมุน(การสาธิตไม่ทำงานใน IE6)

แปลงร่าง:หมุน- คุณสมบัติ CSS 3 ใหม่ที่ให้คุณหมุนองค์ประกอบต่างๆ เมื่อใช้การแปลง คุณยังสามารถเปลี่ยนขนาดขององค์ประกอบ บิดเบือนแนวนอนและแนวตั้ง และย้ายองค์ประกอบรอบๆ หน้าเว็บได้ ทั้งหมดนี้สามารถสร้างภาพเคลื่อนไหวได้โดยใช้คุณสมบัติ การเปลี่ยนแปลง(กับ ประเภทต่างๆการเปลี่ยนผ่านและระยะเวลา)

การดำเนินการเดียวกันสำหรับการสร้างภาพเคลื่อนไหวองค์ประกอบของหน้าสามารถทำได้โดยใช้ไลบรารี JavaScript บางตัว (เช่น jQuery) แน่นอน คุณสามารถทำให้การเปลี่ยนแปลงต่างๆ เคลื่อนไหวได้มากขึ้นโดยใช้ jQuery คุณสมบัติซีเอสเอสกว่าการใช้ การเปลี่ยนแปลง- แต่ jQuery เป็นเครื่องมือ CSS ในตัว ไลบรารี JavaScript เป็นเครื่องมือภายนอกที่อาจไม่พร้อมใช้งาน ไม่ว่าในกรณีใด CSS3 จะเปิดแนวทางใหม่ที่มีแนวโน้มสำหรับการพัฒนานักพัฒนา

ก่อนอื่นเราต้องสร้างอินเทอร์เฟซแบบกราฟิกสำหรับนาฬิกา เราจะมีฐานและลูกศรสามลูก ส่วนที่เคลื่อนไหวทั้งหมดถูกตัดใน Photoshop ให้มีขนาดความสูง 600px และความกว้าง 30px และจัดวางในแนวตั้ง และตามค่าเริ่มต้นของคุณสมบัติ หมุนหมุนองค์ประกอบรอบจุดศูนย์กลาง คุณสามารถใช้คุณสมบัติ เปลี่ยนต้นกำเนิดเพื่อกำหนดจุดศูนย์กลางการหมุนไปยังจุดอื่น

คุณสามารถใช้ภาพใดก็ได้ที่คุณชอบเป็นฐานของนาฬิกา ส่วนที่เคลื่อนไหวเป็นภาพ PNG ที่มีความโปร่งใส

เก็บถาวรด้วย ซอร์สโค้ดการสาธิตประกอบด้วยไฟล์ PSD ที่มีรูปภาพทั้งหมด

เค้าโครงของนาฬิกาเป็นรายการที่ไม่เรียงลำดับง่ายๆ องค์ประกอบแต่ละรายการประกอบด้วยส่วนที่เคลื่อนไหวและมีรหัสที่เกี่ยวข้อง:

#clock ( ตำแหน่ง: สัมพันธ์; ความกว้าง: 600px; ความสูง: 600px; ระยะขอบ: 20px อัตโนมัติ 0 อัตโนมัติ; พื้นหลัง: url (clockface.jpg); สไตล์รายการ: ไม่มี; ) #sec, #min, #hour ( ตำแหน่ง: สัมบูรณ์ ; ความกว้าง: 30px; ความสูง: 600px; ด้านบน: 0px; z-index: 1; )

CSS ก็ค่อนข้างง่ายเช่นกัน เนื่องจากชิ้นส่วนที่เคลื่อนไหวมีขนาดและจุดเริ่มต้นเท่ากัน เราจึงสามารถประกาศเข้าด้วยกันเพื่อหลีกเลี่ยงการทำซ้ำ องค์ประกอบ ulได้รับตำแหน่งสัมพัทธ์ซึ่งช่วยให้สามารถวางตำแหน่งลูกศรที่อยู่ภายในได้อย่างสมบูรณ์

CSS3 จะถูกนำไปใช้โดยใช้โค้ด jQuery เล็กน้อย

ควรสังเกตว่า jQuery ทำงานได้ดีกับคุณสมบัติ CSS3 ใหม่ นอกจากนี้ เนื่องจากมีการเพิ่มสไตล์แบบไดนามิก ไฟล์ซีเอสเอสผ่านการตรวจสอบเป็น CSS2.1!

ยังสามารถหาเวลาได้จาก โดยใช้ PHPรหัสแต่มันจะเป็นเวลาเซิร์ฟเวอร์ และ JavaScript จะส่งคืนเวลาท้องถิ่นของผู้ใช้

เราจะรับข้อมูลโดยใช้ วันที่()และตั้งค่าตัวแปรทั้งหมดของเรา เราจะใช้ตามนั้น รับวินาที(), รับนาที()หรือ รับชั่วโมง()สำหรับ วันที่()เพื่อตั้งค่าวินาที นาที และชั่วโมงตามลำดับ:

Var วินาที = วันที่ใหม่ ().getSeconds();

ในบรรทัดด้านบน จะได้รับตัวเลขจากช่วง 0 ถึง 59 และกำหนดให้กับตัวแปร วินาที.

จากนั้นคุณจะต้องคำนวณมุมการหมุนของลูกศรแต่ละอัน สำหรับเข็มวินาทีและเข็มนาทีซึ่งมี 60 ตำแหน่งบนวงกลมชั่วโมง เราต้องหาร 360 องศาด้วย 60 ซึ่งจะได้เลข 6 นั่นคือแต่ละวินาทีหรือนาทีจะสอดคล้องกับการหมุน 6 องศา เราจะเก็บผลลัพธ์การคำนวณไว้ในตัวแปรอื่น โค้ดจะมีลักษณะดังนี้:

ระดับ Var = วินาที * 6;

สำหรับนาฬิกาการคำนวณจะแตกต่างออกไป เนื่องจากเรามีหน้าปัดสำหรับเข็มชั่วโมง 12 ตำแหน่ง แต่ละชั่วโมงจึงมีมุมการหมุน 30 องศา (360/12=30) แต่เข็มชั่วโมงจะต้องอยู่ในสถานะตรงกลางด้วย กล่าวคือ จะต้องเคลื่อนที่ทุกนาที กล่าวคือ เวลา 4.30 น. เข็มชั่วโมงควรอยู่ตรงกลางระหว่าง 3 ถึง 4 นาฬิกา ต่อไปนี้คือวิธีที่เราจะดำเนินการ:

Var hdegree = ชั่วโมง * 30 + (นาที / 2);

นั่นคือเราบวกมุมการหมุนด้วยจำนวนชั่วโมงค่าของการหารจำนวนนาทีด้วย 2 (ซึ่งจะให้ค่าในช่วงตั้งแต่ 0.5 ถึง 29.5) ดังนั้นเข็มชั่วโมงจะ “หมุน” เป็นมุมตั้งแต่ 0 ถึง 30 องศา (เพิ่มทีละชั่วโมง)

ตัวอย่างเช่น:

2 ชั่วโมง 40 นาที -> 2*30 = 60 องศา และ 40/2 = 20 องศา รวม: 80 องศา

เราสามารถสรุปได้ว่านาฬิกาจะแสดงว่าใครจะรู้หลังจาก 12 เนื่องจากค่าการหมุนจะมากกว่า 360 องศา แต่ทุกอย่างทำงานได้ดีมาก

ตอนนี้เราพร้อมที่จะแทรกกฎ CSS แล้ว

นี่คือลักษณะของกฎ CSS3 หมุนในสไตล์ชีท:

#sec ( -webkit-transform: หมุน(45deg); -moz-transform: หมุน(45deg); )

และนี่คือวิธีการแทรกโค้ดโดยใช้ jQuery:

$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));

ปัญหาเดียวคือการตั้งค่ามุมผลลัพธ์ในตัวแปร "sdegree" ในรูปแบบไวยากรณ์แทนที่จะเป็น 45 องศา จำเป็นต้องสร้างสตริงในตัวแปรอื่น หมุนและแทนที่อาร์กิวเมนต์ที่สองอย่างสมบูรณ์ แบบนี้:

Var srotate = "หมุน (" + องศา + "องศา)";

และโค้ด jQuery จะมีลักษณะดังนี้:

$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));

รหัส jQuery จะมีลักษณะดังนี้:

$(document).ready(function() ( setInterval(function() ( var วินาที = new Date().getSeconds(); var sdegree = minutes * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)), 1000); setInterval(function() ( var ชั่วโมง = วันที่ใหม่()); .getHours(); var mins = new Date().getMinutes(); var hdegree = ชั่วโมง * 30 + (นาที / 2); var hrotate = "rotate(" + hdegree + ").css( ("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); 1,000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = นาที * 6 ; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); );

เราใช้ ฟังก์ชันจาวาสคริปต์ ตั้งค่าช่วงเวลาเพื่ออัปเดตสไตล์ทุกวินาที จะต้องอัปเดตตัวแปรที่ได้รับค่าเวลา ไม่เช่นนั้นนาฬิกาจะกลายเป็นขยะไร้ประโยชน์บนเพจ

บทเรียนนี้แสดงให้เห็นถึงการประยุกต์ใช้คุณสมบัติในทางปฏิบัติ หมุนไม่เกี่ยวข้องกับการออกแบบ

นี่คือสคริปต์หลักของพวกเขา:

200"200px":"+(this.scrollHeight+5)+"px");">00:00:00

setInterval(ฟังก์ชัน () (
วันที่ = วันที่ใหม่ ()
ชั่วโมง = date.getHours()
ม. = date.getMinutes()
s = date.getSeconds(),
ชม. = (ชม< 10) ? "0" + h: h,
ม. = (ม< 10) ? "0" + m: m,
ส = (ส< 10) ? "0" + s: s,
document.getElementById("เวลา").innerHTML = h + /// + m + /// + s;
}, 1000);

ที่ด้านบนสุดเราเห็น:

200"200px":"+(this.scrollHeight+5)+"px");">00:00:00

เพียงแค่เพิ่ม ข้อความตัวหนาและโทนสีเหลืองและลูกศร

200"200px":"+(this.scrollHeight+5)+"px");">"00:00:00"

และนี่คือสิ่งที่เกิดขึ้น:

คุณจึงเห็นได้ด้วยตัวเองว่าทุกอย่างเปลี่ยนแปลงไปอย่างไร และตอนนี้คุณสามารถทำทุกอย่างได้ด้วยตัวเองและจัดเรียงให้สวยงามตามสไตล์ของคุณ คนอื่นไม่สามารถทำได้ เนื่องจาก Flash เปิดอยู่ และพวกเขาไม่ได้อยู่ที่นี่

ตอนนี้ยังมีนาฬิกาบน Flash ด้วย

200?"200px":"+(this.scrollHeight+5)+"px");">
.swf">

ดังนั้นคุณสามารถเลือกอันที่คุณชอบที่สุดและติดตั้งได้ เนื่องจากบางอันสามารถติดตั้งในบล็อกได้ แต่คุณชอบอันแรกมากกว่าเนื่องจากมันยืดหยุ่นและปรับแต่งได้ซึ่งใคร ๆ ก็สามารถทำได้

มาทำกัน นาฬิกาอิเล็กทรอนิกส์ด้วยวันที่และเวลาโดยใช้ jQuery และ CSS3 สำหรับภาพเคลื่อนไหวขนาดเล็ก

มาร์กอัปนั้นเรียบง่ายและยืดหยุ่น สร้าง DIV ด้วยคลาสที่เรียกว่า clock , DIV ด้วยคลาสที่เรียกว่า Date ซึ่งจะแสดงวันที่ และรายการแบบไม่เรียงลำดับซึ่งประกอบด้วยชั่วโมง นาที และวินาที

สไตล์การออกแบบพร้อมแอนิเมชั่นขนาดเล็ก:

คอนเทนเนอร์ (กว้าง: 960px; ระยะขอบ: 0 อัตโนมัติ; ล้น: ซ่อน;) .clock (กว้าง: 800px; ระยะขอบ: 0 อัตโนมัติ; ขยาย:30px; เส้นขอบ: 1px ทึบ #333; สี:#fff; ) #Date ( font- ครอบครัว: Arial, Helvetica, sans-serif; text-align:center; text-shadow:0 0 5px #00c6ff; ul (width:800px; margin:0 auto; padding:0px; list- style:none; text-align) :center; ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( ตำแหน่ง: ญาติ; -moz-animation:mymove 1s บรรเทาความไม่มีที่สิ้นสุด; -webkit-animation:mymove 1s บรรเทาความไม่มีที่สิ้นสุด; padding-left:10px; padding-right:10px; -shadow:0 0 20px #00c6ff;) 50% (ความทึบ:0; text-shadow:none; ) 100% (ความทึบ:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (ความทึบ:1.0; text-shadow:0 0 20px #00c6ff;) 50% (ความทึบ:0; text-shadow:none; ) 100% (ความทึบ:1.0; text-shadow :0 0 20px #00c6ff; ) )

การเชื่อมต่อไลบรารี jQuery

จากนั้นสคริปต์ของเรา $(document).ready(function() ( // สร้างตัวแปรสองตัวพร้อมชื่อเดือนและวันในสัปดาห์ในอาร์เรย์ var monthNames = [ "January", "February", "March", " เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม" ]; var dayNames= ["วันอาทิตย์", "วันจันทร์", "วันอังคาร" , "วันพุธ" ,"วันพฤหัสบดี", "วันศุกร์", "วันเสาร์"] // สร้างวัตถุ newDate() var newDate = new Date(); // ดึงวันที่ปัจจุบันจากวัตถุ Date newDate.setDate(newDate. getDate()); วัน, วันที่, เดือนและปี $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); function() ( / / สร้างวัตถุ newDate() และดึงวินาทีของเวลาปัจจุบัน var วินาที = new Date().getSeconds(); // เพิ่มศูนย์นำหน้าให้กับค่าวินาที $("#sec"). html((วินาที< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });

• new Date() - สร้างวัตถุ Date ใหม่ที่มีค่า วันที่ปัจจุบันและเวลาปัจจุบันในเบราว์เซอร์คอมพิวเตอร์ของคุณ
• setDate() - วิธีการกำหนดวันของเดือน (ตั้งแต่ 1 ถึง 31) ตามเวลาท้องถิ่น
• getDate() - วิธีการส่งคืนวันของเดือน (ตั้งแต่ 1 ถึง 31) สำหรับวันที่ที่ระบุตามเวลาท้องถิ่น
• getSeconds(), getMinutes() และ getHours() - วิธีการเหล่านี้ช่วยให้คุณสามารถดึงข้อมูลวินาที นาที และชั่วโมงของเวลาปัจจุบันในเบราว์เซอร์
• (วินาที< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• ฟังก์ชัน setInterval เป็นฟังก์ชัน JavaScript มาตรฐาน ไม่ใช่ส่วนหนึ่งของ jQuery รันโค้ดหลายครั้งในช่วงเวลาสม่ำเสมอ (มิลลิวินาที)

นี่เป็นสคริปต์ง่ายๆ ที่แสดงให้เห็น เวลาของระบบใน JavaScript ในรูปแบบข้อความธรรมดา ชั่วโมง นาที และวินาทีคั่นด้วยเครื่องหมายทวิภาค แค่นั้นเอง

เพื่อกำหนดสไตล์นาฬิกาของคุณเอง การกำหนดสไตล์สำหรับบล็อกด้วย ID - #time ก็เพียงพอแล้ว ใน CSS คุณสามารถตั้งค่าแบบอักษรของคุณเองสำหรับนาฬิกา สี และขนาดได้ หากคุณไม่ต้องการนาฬิกาธรรมดา แต่นาฬิกาที่ซับซ้อนกว่านั้นให้ดูที่นาฬิกา Flash สำหรับไซต์ สคริปต์รับข้อมูลเวลาจากที่ไหน เวลาที่แสดงเป็นเวลาที่ตั้งไว้บนอุปกรณ์ทุกประการ

วางโค้ดต่อไปนี้ในตำแหน่งที่คุณต้องการดูนาฬิกาบนไซต์ของคุณ บน uCoz อาจเป็น "ด้านบน" หรือ "ด้านล่างสุดของเว็บไซต์":

200?"200px":"+(this.scrollHeight+5)+"px");">
00:00:00

setInterval(ฟังก์ชัน () (
วันที่ = วันที่ใหม่ ()
ชั่วโมง = date.getHours()
ม. = date.getMinutes()
s = date.getSeconds(),
ชม. = (ชม< 10) ? "0" + h: h,
ม. = (ม< 10) ? "0" + m: m,
ส = (ส< 10) ? "0" + s: s,
document.getElementById("เวลา").innerHTML = h + /// + m + /// + s;
}, 1000);

สคริปต์จะแสดงบรรทัดข้อความพร้อมนาฬิกาในตำแหน่งที่คุณติดตั้งทันที ตัวอย่างเช่น "00:00:00" อย่างไรก็ตาม วินาที นาที และชั่วโมงจะเป็นตัวเลขสองหลักเสมอ ดังนั้นการเปลี่ยนแปลงค่าจึงเกิดขึ้นได้อย่างราบรื่น