jquery ಎಲೆಕ್ಟ್ರಾನಿಕ್ ಗಡಿಯಾರ. CSS3 ಬಳಸಿಕೊಂಡು ಕೈ ಗಡಿಯಾರ. ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಸೇರಿಸುವುದು

ಡಯಲ್ ಗಡಿಯಾರಗಳ ರಚನೆಯ ಕುರಿತು ನಾವು ಈಗಾಗಲೇ ಚರ್ಚಿಸಿದ್ದೇವೆ CSS ಬಳಸಿಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್. ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ ನಾವು CSS3 ಬಳಸಿ ಅದೇ ಗಡಿಯಾರವನ್ನು ಹೇಗೆ ಮಾಡುತ್ತೇವೆ ಎಂಬುದನ್ನು ನೋಡುತ್ತೇವೆ ಹೊಸ ಮಾನದಂಡವಿವಿಧ ಪರಿಣಾಮಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವ ವಿಧಾನವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಈ ಟ್ಯುಟೋರಿಯಲ್ ಡೆಮೊ CSS3 ಆಸ್ತಿಯನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ತಿರುಗಿಸಿ(IE6 ನಲ್ಲಿ ಡೆಮೊ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ).

ರೂಪಾಂತರ: ತಿರುಗಿಸು- ವಿವಿಧ ಅಂಶಗಳನ್ನು ತಿರುಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಹೊಸ CSS 3 ಆಸ್ತಿ. ರೂಪಾಂತರಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನೀವು ಅಂಶಗಳ ಪ್ರಮಾಣವನ್ನು ಬದಲಾಯಿಸಬಹುದು, ಅಡ್ಡ ಮತ್ತು ಲಂಬ ವಿರೂಪಗಳನ್ನು ಪರಿಚಯಿಸಬಹುದು ಮತ್ತು ವೆಬ್ ಪುಟದ ಸುತ್ತಲೂ ಅಂಶಗಳನ್ನು ಚಲಿಸಬಹುದು. ಈ ಎಲ್ಲಾ ಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನಿಮೇಷನ್ ಮಾಡಬಹುದು ಪರಿವರ್ತನೆ(ಜೊತೆ ವಿವಿಧ ರೀತಿಯಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅವಧಿ).

ಪುಟದ ಅಂಶಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅದೇ ಕ್ರಿಯೆಗಳನ್ನು ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ ನಿರ್ವಹಿಸಬಹುದು (ಉದಾಹರಣೆಗೆ, jQuery). ಸಹಜವಾಗಿ, ನೀವು jQuery ಬಳಸಿಕೊಂಡು ಹೆಚ್ಚಿನ ಬದಲಾವಣೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬಹುದು ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣಗಳುಬಳಸುವುದಕ್ಕಿಂತ ಪರಿವರ್ತನೆ. ಆದರೆ jQuery ಅಂತರ್ನಿರ್ಮಿತ CSS ಸಾಧನವಾಗಿದೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳು ಬಾಹ್ಯ ಉಪಕರಣಗಳು ಲಭ್ಯವಿಲ್ಲದಿರಬಹುದು. ಯಾವುದೇ ಸಂದರ್ಭದಲ್ಲಿ, CSS3 ಡೆವಲಪರ್ ಅಭಿವೃದ್ಧಿಗೆ ಹೊಸ ಭರವಸೆಯ ನಿರ್ದೇಶನಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.

ಮೊದಲು ನಾವು ಮಾಡಬೇಕಾಗಿದೆ GUIಕೈಗಡಿಯಾರಗಳಿಗಾಗಿ. ನಾವು ಬೇಸ್ ಮತ್ತು ಮೂರು ಬಾಣಗಳನ್ನು ಹೊಂದಿರುತ್ತೇವೆ. ಎಲ್ಲಾ ಚಲಿಸುವ ಭಾಗಗಳನ್ನು ಫೋಟೋಶಾಪ್‌ನಲ್ಲಿ 600px ಎತ್ತರ ಮತ್ತು 30px ಅಗಲದ ಆಯಾಮಗಳಿಗೆ ಕತ್ತರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಲಂಬವಾಗಿ ಇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಆಸ್ತಿ ತಿರುಗಿಸಿಕೇಂದ್ರದ ಸುತ್ತಲೂ ಅಂಶವನ್ನು ತಿರುಗಿಸುತ್ತದೆ. ನೀವು ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದು ರೂಪಾಂತರ-ಮೂಲತಿರುಗುವಿಕೆಯ ಕೇಂದ್ರವನ್ನು ಬೇರೆ ಬಿಂದುವಿಗೆ ಹೊಂದಿಸಲು.

ಗಡಿಯಾರದ ಆಧಾರಕ್ಕಾಗಿ ನೀವು ಇಷ್ಟಪಡುವ ಯಾವುದೇ ಚಿತ್ರವನ್ನು ನೀವು ಬಳಸಬಹುದು. ಚಲಿಸುವ ಭಾಗಗಳು ಪಾರದರ್ಶಕತೆಯೊಂದಿಗೆ PNG ಚಿತ್ರಗಳಾಗಿವೆ.

ಪ್ರಾತ್ಯಕ್ಷಿಕೆ ಮೂಲ ಕೋಡ್ ಆರ್ಕೈವ್ ಒಳಗೊಂಡಿದೆ PSD ಫೈಲ್, ಇದು ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಗಡಿಯಾರದ ವಿನ್ಯಾಸವು ಸರಳವಾದ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಪಟ್ಟಿಯ ಅಂಶವು ಚಲಿಸುವ ಭಾಗವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ಅನುಗುಣವಾದ ಐಡಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ:

#ಗಡಿಯಾರ (ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಅಗಲ: 600px; ಎತ್ತರ: 600px; ಅಂಚು: 20px ಸ್ವಯಂ 0 ಸ್ವಯಂ; ಹಿನ್ನೆಲೆ: url(clockface.jpg); ಪಟ್ಟಿ-ಶೈಲಿ: ಯಾವುದೂ ಇಲ್ಲ; ) #ಸೆಕೆಂಡು, #ನಿಮಿಷ, #ಗಂಟೆ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ ; ಅಗಲ: 30px; ಎತ್ತರ: 600px; ಮೇಲ್ಭಾಗ: 0px; ಎಡ: 285px; ) #ಸೆಕೆಂಡು (ಹಿನ್ನೆಲೆ: url(sechand.png); z-ಸೂಚಿಕೆ: 3; ) #ನಿಮಿಷ (ಹಿನ್ನೆಲೆ: url(minhand.png); z -ಸೂಚ್ಯಂಕ: 2; ) #ಗಂಟೆ (ಹಿನ್ನೆಲೆ: url(hourhand.png); z-ಸೂಚಿಕೆ: 1; )

ಸಿಎಸ್ಎಸ್ ಕೂಡ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ಚಲಿಸುವ ಭಾಗಗಳು ಒಂದೇ ಆಯಾಮಗಳು ಮತ್ತು ಆರಂಭಿಕ ಬಿಂದುಗಳನ್ನು ಹೊಂದಿರುವುದರಿಂದ, ಪುನರಾವರ್ತನೆಯನ್ನು ತಪ್ಪಿಸಲು ನಾವು ಅವುಗಳನ್ನು ಒಟ್ಟಿಗೆ ಘೋಷಿಸಬಹುದು. ಅಂಶ ಉಲ್ಸಂಬಂಧಿತ ಸ್ಥಾನವನ್ನು ಪಡೆಯುತ್ತದೆ, ಇದು ಅದರೊಳಗೆ ಇರುವ ಬಾಣಗಳಿಗೆ ಸಂಪೂರ್ಣ ಸ್ಥಾನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

CSS3 ಅನ್ನು ಸ್ವಲ್ಪ jQuery ಕೋಡ್ ಬಳಸಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.

ಹೊಸ CSS3 ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ jQuery ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಗಮನಿಸಬೇಕು. ಜೊತೆಗೆ, ಶೈಲಿಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸೇರಿಸಿರುವುದರಿಂದ, CSS ಫೈಲ್ ಅನ್ನು CSS2.1 ಎಂದು ಮೌಲ್ಯೀಕರಿಸಲಾಗಿದೆ!

PHP ಕೋಡ್ ಬಳಸಿ ಸಮಯವನ್ನು ಸಹ ಪಡೆಯಬಹುದು, ಆದರೆ ಇದು ಸರ್ವರ್ ಸಮಯವಾಗಿರುತ್ತದೆ. ಮತ್ತು JavaScript ಬಳಕೆದಾರರ ಸ್ಥಳೀಯ ಸಮಯವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.

ಬಳಸಿಕೊಂಡು ನಾವು ಮಾಹಿತಿಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತೇವೆ ದಿನಾಂಕ()ಮತ್ತು ನಮ್ಮ ಎಲ್ಲಾ ಅಸ್ಥಿರಗಳನ್ನು ಹೊಂದಿಸಿ. ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಬಳಸುತ್ತೇವೆ ಗೆಟ್ಸೆಕೆಂಡ್ಸ್(), GetMinutes()ಅಥವಾ GetHours()ಫಾರ್ ದಿನಾಂಕ()ಕ್ರಮವಾಗಿ ಸೆಕೆಂಡುಗಳು, ನಿಮಿಷಗಳು ಮತ್ತು ಗಂಟೆಗಳನ್ನು ಹೊಂದಿಸಲು:

Var ಸೆಕೆಂಡುಗಳು = ಹೊಸ ದಿನಾಂಕ().getSeconds();

ಮೇಲಿನ ಸಾಲಿನಲ್ಲಿ, 0 ರಿಂದ 59 ರವರೆಗಿನ ಶ್ರೇಣಿಯಿಂದ ಸಂಖ್ಯೆಯನ್ನು ಪಡೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ವೇರಿಯಬಲ್‌ಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ ಸೆಕೆಂಡುಗಳು.

ನಂತರ ನೀವು ಪ್ರತಿ ಬಾಣಕ್ಕೆ ತಿರುಗುವಿಕೆಯ ಕೋನವನ್ನು ಲೆಕ್ಕ ಹಾಕಬೇಕು. ಗಂಟೆಯ ವೃತ್ತದಲ್ಲಿ 60 ಸ್ಥಾನಗಳನ್ನು ಹೊಂದಿರುವ ಎರಡನೇ ಮತ್ತು ನಿಮಿಷದ ಕೈಗಳಿಗೆ, ನಾವು 360 ಡಿಗ್ರಿಗಳನ್ನು 60 ರಿಂದ ಭಾಗಿಸಬೇಕಾಗಿದೆ, ಅದು ನಮಗೆ 6 ಸಂಖ್ಯೆಯನ್ನು ನೀಡುತ್ತದೆ. ಅಂದರೆ, ಪ್ರತಿ ಸೆಕೆಂಡ್ ಅಥವಾ ನಿಮಿಷವು 6 ಡಿಗ್ರಿಗಳ ತಿರುಗುವಿಕೆಗೆ ಅನುರೂಪವಾಗಿದೆ. ನಾವು ಲೆಕ್ಕಾಚಾರಗಳ ಫಲಿತಾಂಶವನ್ನು ಮತ್ತೊಂದು ವೇರಿಯೇಬಲ್ನಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತೇವೆ. ಸೆಕೆಂಡುಗಳವರೆಗೆ ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ವರ್ ಪದವಿ = ಸೆಕೆಂಡುಗಳು * 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 ಡಿಗ್ರಿ.

ತಿರುಗುವಿಕೆಯ ಮೌಲ್ಯವು 360 ಡಿಗ್ರಿಗಳಿಗಿಂತ ಹೆಚ್ಚಿರುವುದರಿಂದ ಗಡಿಯಾರವು 12 ರ ನಂತರ ಯಾರಿಗೆ ತಿಳಿದಿದೆ ಎಂದು ತೋರಿಸುತ್ತದೆ ಎಂದು ನಾವು ಊಹಿಸಬಹುದು. ಆದರೆ ಎಲ್ಲವೂ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಈಗ ನಾವು CSS ನಿಯಮಗಳನ್ನು ಸೇರಿಸಲು ಸಿದ್ಧರಿದ್ದೇವೆ.

ಇದು CSS3 ನಿಯಮವು ಹೇಗೆ ಕಾಣುತ್ತದೆ ತಿರುಗಿಸಿಶೈಲಿಯ ಹಾಳೆಯಲ್ಲಿ:

#ಸೆಕೆಂಡು (-ವೆಬ್‌ಕಿಟ್-ರೂಪಾಂತರ: ತಿರುಗಿಸು(45ಡಿಗ್ರೆ); -ಮೊಝ್-ರೂಪಾಂತರ: ತಿರುಗಿಸು(45ಡಿಗ್); )

ಮತ್ತು jQuery ಬಳಸಿ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ:

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

45 ಡಿಗ್ರಿಗಳ ಬದಲಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನಲ್ಲಿ "sdegree" ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಪರಿಣಾಮವಾಗಿ ಕೋನ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುವುದು ಒಂದೇ ಸಮಸ್ಯೆಯಾಗಿದೆ. ಇನ್ನೊಂದು ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಅಗತ್ಯವಿದೆ srotateಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಎರಡನೇ ವಾದವನ್ನು ಬದಲಿಸಿ. ಹೀಗೆ:

Var srotate = "ತಿರುಗಿಸು(" + sdegree + "deg)";

ಮತ್ತು jQuery ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

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

jQuery ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

$(ಡಾಕ್ಯುಮೆಂಟ್).ರೆಡಿ(ಫಂಕ್ಷನ್() (ಸೆಟ್ಇಂಟರ್ವಲ್(ಫಂಕ್ಷನ್() (ವರ್ ಸೆಕೆಂಡ್ಸ್ = ಹೊಸ ದಿನಾಂಕ().ಗೆಟ್ಸೆಕೆಂಡ್ಸ್();ವರ್ ಸೆಕೆಂಡ್ಸ್ = ಸೆಕೆಂಡ್ಸ್ * 6; ವರ್ ಸ್ರೋಟೇಟ್ = "ತಿರುಗಿಸು(" + ಸೆಕೆಂಡ್ಸ್ + "ಡಿಗ್ರಿ)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var hours = ಹೊಸ ದಿನಾಂಕ() .getHours(); var mins = ಹೊಸ ದಿನಾಂಕ().getMinutes(); var hdegree = ಗಂಟೆಗಳು * 30 + (ನಿಮಿಷಗಳು / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#ಗಂಟೆ ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() (var mins = new Date().getMinutes();var mdegree = ನಿಮಿಷಗಳು * 6; var mrotate = "ತಿರುಗಿಸು(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) );), 1000);));

ನಾವು JavaScript ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ ಸೆಟ್ ಮಧ್ಯಂತರಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಶೈಲಿಗಳನ್ನು ನವೀಕರಿಸಲು. ಸಮಯದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುವ ಅಸ್ಥಿರಗಳನ್ನು ಅದರಲ್ಲಿ ನವೀಕರಿಸಬೇಕು. ಇಲ್ಲದಿದ್ದರೆ, ಗಡಿಯಾರವು ಪುಟದಲ್ಲಿ ಅನುಪಯುಕ್ತ ಕಸವಾಗುತ್ತದೆ.

ಈ ಪಾಠವು ಆಸ್ತಿಯ ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ತಿರುಗಿಸಿವಿನ್ಯಾಸಕ್ಕೆ ಸಂಬಂಧಿಸಿಲ್ಲ.

ಚಿಕ್ಕ ಅನಿಮೇಶನ್‌ಗಾಗಿ jQuery ಮತ್ತು CSS3 ಬಳಸಿ ದಿನಾಂಕ ಮತ್ತು ಸಮಯದೊಂದಿಗೆ ಎಲೆಕ್ಟ್ರಾನಿಕ್ ಗಡಿಯಾರವನ್ನು ಮಾಡೋಣ.

ಮಾರ್ಕ್ಅಪ್ ಸರಳ ಮತ್ತು ಮೃದುವಾಗಿರುತ್ತದೆ. ಗಡಿಯಾರ ಎಂಬ ವರ್ಗದೊಂದಿಗೆ DIV ಅನ್ನು ರಚಿಸಿ, ದಿನಾಂಕವನ್ನು ಪ್ರದರ್ಶಿಸುವ ದಿನಾಂಕ ಎಂಬ ವರ್ಗದೊಂದಿಗೆ DIV, ಮತ್ತು ಗಂಟೆಗಳು, ನಿಮಿಷಗಳು ಮತ್ತು ಸೆಕೆಂಡುಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯನ್ನು ರಚಿಸಿ.

ಸಣ್ಣ ಅನಿಮೇಷನ್‌ನೊಂದಿಗೆ ವಿನ್ಯಾಸ ಶೈಲಿಗಳು:

ಕಂಟೈನರ್ (ಅಗಲ: 960px; ಅಂಚು: 0 ಸ್ವಯಂ; ಓವರ್‌ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ;) .ಗಡಿಯಾರ (ಅಗಲ: 800px; ಅಂಚು: 0 ಸ್ವಯಂ; ಪ್ಯಾಡಿಂಗ್: 30px; ಗಡಿ: 1px ಘನ #333; ಬಣ್ಣ:#fff; ) #ದಿನಾಂಕ ( ಫಾಂಟ್- ಕುಟುಂಬ: ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; ಫಾಂಟ್-ಗಾತ್ರ: 36px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಕೇಂದ್ರ; ಪಠ್ಯ-ನೆರಳು: 0 0 5px #00c6ff; ) ಉಲ್ (ಅಗಲ: 800px; ಅಂಚು: 0 ಸ್ವಯಂ; ಪ್ಯಾಡಿಂಗ್: 0px; ಪಟ್ಟಿ- ಶೈಲಿ:ಇಲ್ಲ; ಪಠ್ಯ-ಜೋಡಣೆ:ಮಧ್ಯ; 00c6ff; ) #ಪಾಯಿಂಟ್ (ಸ್ಥಾನ:ಸಂಬಂಧಿ; -moz-ಅನಿಮೇಷನ್:ಮೈಮೂವ್ 1ಎಸ್ ಈಸ್ ಇನ್ಫೈನೈಟ್; -ವೆಬ್‌ಕಿಟ್-ಆನಿಮೇಷನ್:ಮೈಮೋವ್ 1ಎಸ್ ಈಸ್ ಅನಂತ; ಪ್ಯಾಡಿಂಗ್-ಎಡ:10ಪಿಎಕ್ಸ್; ಪ್ಯಾಡಿಂಗ್-ಬಲ:10ಪಿಎಕ್ಸ್; ) @-ವೆಬ್‌ಕಿಟ್-ಕೀಫ್ರೇಮ್‌ಗಳು 0% (ಅಪಾರದರ್ಶಕತೆ: 1.0; ಪಠ್ಯ-ನೆರಳು: 0 0 20px #00c6ff;) 50% (ಅಪಾರದರ್ಶಕತೆ: 0; ಪಠ್ಯ-ನೆರಳು: ಯಾವುದೂ ಇಲ್ಲ; ) 100% (ಅಪಾರದರ್ಶಕತೆ: 1.0; ಪಠ್ಯ-ನೆರಳು: 0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (ಅಪಾರದರ್ಶಕತೆ: 1.0; ಪಠ್ಯ-ನೆರಳು: 0 0 20px #00c6ff;) 50% (ಅಪಾರದರ್ಶಕತೆ: 0; ಪಠ್ಯ-ನೆರಳು: ಯಾವುದೂ ಇಲ್ಲ; ) 100% (ಅಪಾರದರ್ಶಕತೆ: 1.0; ಪಠ್ಯ-ನೆರಳು :0 0 20px #00c6ff;))

jQuery ಲೈಬ್ರರಿಯನ್ನು ಸಂಪರ್ಕಿಸಲಾಗುತ್ತಿದೆ

ತದನಂತರ ನಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ $(ಡಾಕ್ಯುಮೆಂಟ್).ರೆಡಿ(ಫಂಕ್ಷನ್() ( // ಅರೇಯಲ್ಲಿ ವಾರದ ತಿಂಗಳುಗಳು ಮತ್ತು ದಿನಗಳ ಹೆಸರುಗಳೊಂದಿಗೆ ಎರಡು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ರಚಿಸಿ var monthNames = [ "ಜನವರಿ", "ಫೆಬ್ರವರಿ", "ಮಾರ್ಚ್", " ಏಪ್ರಿಲ್", "ಮೇ", "ಜೂನ್", "ಜುಲೈ", "ಆಗಸ್ಟ್", "ಸೆಪ್ಟೆಂಬರ್", "ಅಕ್ಟೋಬರ್", "ನವೆಂಬರ್", "ಡಿಸೆಂಬರ್" ]; var dayNames= ["ಭಾನುವಾರ", "ಸೋಮವಾರ", "ಮಂಗಳವಾರ ", "ಬುಧವಾರ" ,"ಗುರುವಾರ","ಶುಕ್ರವಾರ","ಶನಿವಾರ"] // ಒಂದು ವಸ್ತುವನ್ನು ರಚಿಸಿ newDate() var newDate = ಹೊಸ ದಿನಾಂಕ(); // ದಿನಾಂಕ ವಸ್ತುವಿನ newDate.setDate(newDate) ನಿಂದ ಪ್ರಸ್ತುತ ದಿನಾಂಕವನ್ನು ಹಿಂಪಡೆಯಿರಿ. getDate()); // ಔಟ್‌ಪುಟ್ ದಿನ, ದಿನಾಂಕ, ತಿಂಗಳು ಮತ್ತು ವರ್ಷ $("#ದಿನಾಂಕ").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) ; setInterval(ಫಂಕ್ಷನ್() ( / / ಹೊಸ ದಿನಾಂಕ() ವಸ್ತುವನ್ನು ರಚಿಸಿ ಮತ್ತು ಪ್ರಸ್ತುತ ಸಮಯದ ಸೆಕೆಂಡುಗಳನ್ನು ಹಿಂಪಡೆಯಿರಿ var ಸೆಕೆಂಡುಗಳು = ಹೊಸ ದಿನಾಂಕ().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); });

• ಹೊಸ ದಿನಾಂಕ() - ಕಂಪ್ಯೂಟರ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತ ದಿನಾಂಕ ಮತ್ತು ಪ್ರಸ್ತುತ ಸಮಯದ ಮೌಲ್ಯದೊಂದಿಗೆ ಹೊಸ ದಿನಾಂಕ ವಸ್ತುವನ್ನು ರಚಿಸುತ್ತದೆ.
• setDate() - ವಿಧಾನವು ಸ್ಥಳೀಯ ಸಮಯದ ಪ್ರಕಾರ ತಿಂಗಳ ದಿನವನ್ನು (1 ರಿಂದ 31 ರವರೆಗೆ) ಹೊಂದಿಸುತ್ತದೆ
• getDate() - ವಿಧಾನವು ಸ್ಥಳೀಯ ಸಮಯದ ಪ್ರಕಾರ ನಿಗದಿತ ದಿನಾಂಕಕ್ಕಾಗಿ ತಿಂಗಳ ದಿನವನ್ನು (1 ರಿಂದ 31 ರವರೆಗೆ) ಹಿಂದಿರುಗಿಸುತ್ತದೆ
• getSeconds(), getMinutes() ಮತ್ತು getHours() - ಈ ವಿಧಾನಗಳು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತ ಸಮಯದ ಸೆಕೆಂಡುಗಳು, ನಿಮಿಷಗಳು ಮತ್ತು ಗಂಟೆಗಳನ್ನು ಹಿಂಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• (ಸೆಕೆಂಡುಗಳು< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это ವಿಶೇಷ ಆಪರೇಟರ್ಪ್ರಶ್ನೆಯ (?) ಹಿಂದಿನ ಸ್ಥಿತಿಯು ನಿಜವಾಗಿದ್ದರೆ (ನಿಜ) ಅಥವಾ ಸ್ಥಿತಿಯು ತಪ್ಪಾಗಿದ್ದರೆ (ಸುಳ್ಳು) ಕೊಲೊನ್ ನಂತರದ ಮೌಲ್ಯವನ್ನು ಕೊಲೊನ್‌ನ ಮೊದಲು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• setInterval ಕಾರ್ಯವು ಪ್ರಮಾಣಿತ JavaScript ಕಾರ್ಯವಾಗಿದೆ, jQuery ನ ಭಾಗವಲ್ಲ. ನಿಯಮಿತ ಮಧ್ಯಂತರಗಳಲ್ಲಿ (ಮಿಲಿಸೆಕೆಂಡುಗಳು) ಕೋಡ್ ಅನ್ನು ಹಲವು ಬಾರಿ ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ.

ಇದು ತೋರಿಸುವ ಸರಳ ಸ್ಕ್ರಿಪ್ಟ್ ಆಗಿದೆ ಸಿಸ್ಟಮ್ ಸಮಯಮೇಲೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸರಳಪಠ್ಯ. ಗಂಟೆಗಳು, ನಿಮಿಷಗಳು ಮತ್ತು ಸೆಕೆಂಡುಗಳನ್ನು ಕೊಲೊನ್‌ನಿಂದ ಬೇರ್ಪಡಿಸಲಾಗಿದೆ - ಅಷ್ಟೆ.

ಗಡಿಯಾರಕ್ಕಾಗಿ ನಿಮ್ಮ ಸ್ವಂತ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಲು, ID ಯೊಂದಿಗೆ ಬ್ಲಾಕ್‌ಗಾಗಿ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸಾಕು - # ಸಮಯ. CSS ನಲ್ಲಿ ನೀವು ಗಡಿಯಾರ, ಅದರ ಬಣ್ಣ ಮತ್ತು ಗಾತ್ರಕ್ಕಾಗಿ ನಿಮ್ಮ ಸ್ವಂತ ಫಾಂಟ್ ಅನ್ನು ಹೊಂದಿಸಬಹುದು. ನಿಮಗೆ ಸರಳ ಗಡಿಯಾರವಲ್ಲ, ಆದರೆ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಗಡಿಯಾರ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ, ಸೈಟ್ಗಾಗಿ ಫ್ಲ್ಯಾಶ್ ಗಡಿಯಾರಗಳನ್ನು ನೋಡಿ. ಸ್ಕ್ರಿಪ್ಟ್ ಸಮಯದ ಡೇಟಾವನ್ನು ಎಲ್ಲಿಂದ ಪಡೆಯುತ್ತದೆ? ತೋರಿಸಿರುವ ಸಮಯವು ಸಾಧನದಲ್ಲಿ ನಿಖರವಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆ.

ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ಗಡಿಯಾರವನ್ನು ನೋಡಲು ನೀವು ಬಯಸುವ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಅಂಟಿಸಿ. uCoz ನಲ್ಲಿ ಇದು, ಉದಾಹರಣೆಗೆ, "ಟಾಪ್" ಅಥವಾ "ಸೈಟ್‌ನ ಕೆಳಭಾಗ" ಆಗಿರಬಹುದು:

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

ಸೆಟ್ ಇಂಟರ್ವಲ್ (ಫಂಕ್ಷನ್ () (
ದಿನಾಂಕ = ಹೊಸ ದಿನಾಂಕ(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("ಸಮಯ").innerHTML = h + ":" + m + ":" + s;
}, 1000);

ನೀವು ಅದನ್ನು ಸ್ಥಾಪಿಸಿದ ಸ್ಥಳದಲ್ಲಿ ಗಡಿಯಾರದೊಂದಿಗೆ ಪಠ್ಯದ ಸಾಲನ್ನು ಸ್ಕ್ರಿಪ್ಟ್ ತಕ್ಷಣವೇ ತೋರಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, "00:00:00". ಸೆಕೆಂಡುಗಳು, ನಿಮಿಷಗಳು ಮತ್ತು ಗಂಟೆಗಳು, ಯಾವಾಗಲೂ ಎರಡು-ಅಂಕಿಯಾಗಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಸರಾಗವಾಗಿ ಸಂಭವಿಸುತ್ತದೆ.