ისრის წელი CSS3 ვიკიებით. ციფრული საიუბილეო წიგნი CSS3-სა და jQuery-ზე როგორ დავამატო წელიწდეული html-ში

მარტივი ციფრული წელიწდეული, რომელიც აჩვენებს თქვენი სისტემის საათს. აქ ყველაფერი კეთდება JavaScript-ში, რომელიც შეგიძლიათ შეცვალოთ თქვენს დიზაინში. მათი ინსტალაცია ისეთივე მარტივია, როგორც თავად სუნი, შეგიძლიათ განათავსოთ ისინი საიტზე, სადაც შეგიძლიათ კიდევ უფრო გააუმჯობესოთ ისინი. გარდა ამისა, როგორც ითქვა, შეგიძლიათ მიიღოთ ისინი, როგორც გჭირდებათ, ყველაფერი ინახება ID – #დრო HTML კოდების პანელი მუშაობს, მაგრამ ყველაფერი მოხსენებულია.

ეს არის მთავარი სცენარი:

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

ზევით არის mi bachimo:

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");"> type="application/x-shockwave-flash" data="http://сайт/Ajaxoskrip/Fekstura_tekst/AgsaRtunet/562_Clock.swf"
width="200" height="200">
.swf">

ასე რომ, თქვენ შეგიძლიათ აირჩიოთ ის, რაც ყველაზე მეტად მოგწონთ და მოათავსოთ იგი, თუნდაც ერთი დამონტაჟდეს ბლოკში, ხოლო პირველი ღერძი უფრო შესაფერისია, რადგან კურდღლების სუნი მორგებულია, ასე რომ თქვენ შეგიძლიათ შექმნათ ტყავი.

ეს არის მარტივი სკრიპტი, რომელიც აჩვენებს სისტემის საათს JavaScript-ს ეპატიებატექსტი. Godinniks, hvilini ეს წამი დუბლის გავლით - და ეს ყველაფერი.

წლის იუბილეზე საკუთარი სტილის დასაყენებლად, თქვენ უბრალოდ უნდა დააყენოთ ბლოკის სტილი ID-ით – #time. CSS-ში შეგიძლიათ დააყენოთ საიუბილეო შრიფტი, მისი ფერი და ზომა. თუ თქვენ გჭირდებათ არა მხოლოდ ძველი წიგნები, არამედ დასაკეცი წიგნები, მაშინ გაოცებული დარჩებით საიტისთვის Flash წლის. ვარსკვლავის სკრიპტს სჭირდება მონაცემები დაახლოებით ერთი საათის განმავლობაში? ნაჩვენებია საათი, რომელიც დაინსტალირებულია მოწყობილობაზე.

დაყენებულია

ჩადეთ შეურაცხმყოფელი კოდი იმ ადგილას, სადაც გსურთ მიიღოთ თქვენი იუბილე. uCoz-ზე შეგიძლიათ გამოიყენოთ, მაგალითად, „ზედა“ ან „საიტის ქვედა ნაწილი“:

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

სკრიპტი მაშინვე გამოჩნდება იქ, მათ დააინსტალირეს იგი ზედიზედ საიუბილეო ტექსტთან ერთად. Მაგალითად, "00:00:00". წამები, ყოველ წუთს, სანამ მეტყველება ყოველთვის ორმაგდება, ამიტომ მნიშვნელობის ცვლილება გლუვია.

ჩვენ უკვე გავაანალიზეთ ისრის წლის შექმნა CSS და JavaScript ვიკიებით. ამ გაკვეთილზე, იმავე წელს განხორციელდება CSS3 ვიკის გამოყენებით, რათა ნახოთ, რამდენად ცვლის ახალი სტანდარტი სხვადასხვა ეფექტების განვითარების მიდგომას. ამ გაკვეთილის დემო ვერსია იმუშავებს მხოლოდ ბრაუზერებში, რომლებიც მხარს უჭერენ CSS3-ს როტაცია(დემო არ მუშაობს IE6-ში).

CSS3 ტრანსფორმაცია: როტაცია

ტრანსფორმაცია: როტაცია- CSS 3-ის ახალი ძალა, რომელიც საშუალებას გაძლევთ მოატრიალოთ სხვადასხვა ელემენტები. დამატებითი ტრანსფორმაციის საშუალებით, თქვენ ასევე შეგიძლიათ შეცვალოთ ელემენტების მასშტაბი, შემოიტანოთ ჰორიზონტალური და ვერტიკალური ვარიაციები და გადაიტანოთ ელემენტები ვებ გვერდზე. ეს ყველაფერი შეიძლება გაკეთდეს დამატებითი სიმძლავრის გულისთვის გარდამავალი(თ განსხვავებული ტიპებიგადასვლები და ტრივალიზმი).

იგივე მოქმედებები გვერდის ელემენტების ანიმაციასთან ერთად შეიძლება გაერთიანდეს ნებისმიერი JavaScript ბიბლიოთეკის დახმარებით (მაგალითად, jQuery). ზვიჩაინო, ზ jQuery დაგეხმარებათთქვენ შეგიძლიათ გააუქმოთ ცვლილება ბევრად უფრო დიდი რაოდენობით ხელისუფლება CSS, გთხოვთ ითხოვოთ დახმარება გარდამავალი. jQuery-ის ჩაშენებული CSS-ის გარდა, JavaScript ბიბლიოთეკები არის გარე ხელსაწყოები, რომლებიც შეიძლება არ იყოს ხელმისაწვდომი. ნებისმიერ შემთხვევაში, CSS3 ხსნის ახალ პერსპექტიულ მიმართულებებს საცალო ვაჭრობის განვითარებისთვის.

გრაფიკა

ახლა თქვენ უნდა შექმნათ გრაფიკული ინტერფეისი საიუბილეო თარიღისთვის. გვექნება საფუძველი და სამი ისარი. ყველა ხელნაკეთი ნაწილი იჭრება Photoshop-ში 600 პიქსელი ხვეული და 30 პიქსელი ზომით, განლაგებულია ვერტიკალურად და შეფუთულია ძალაში. როტაციაახვევს ელემენტს ცენტრში. თქვენ შეგიძლიათ vikorist და ძალა გარდაქმნა-წარმოშობამოათავსეთ შეფუთვის ცენტრი სხვა წერტილში.

საიუბილეო თარიღის დასაფარად შეგიძლიათ გამოიყენოთ ნებისმიერი სახის სურათი. ნაწილები, რომლებიც იშლება, ნაჩვენებია PNG ფორმატში სიცხადით.

არქივში გამომავალი კოდიჩართვის დემონსტრირება PSD ფაილი, რომელიც ჩაანაცვლებს ყველა სურათს.


HTML განლაგება

საიუბილეო განლაგება მარტივი უწესრიგო სიაა. სიაში კანის ელემენტი შეიცავს ნაწილს, რომელიც იშლება და არის შესაბამისი ID:

CSS

#საათი (პოზიცია: ფარდობითი; სიგანე: 600 პიქსელი; სიმაღლე: 600 პიქსელი; ზღვარი: 20 პიქსელი ავტო 0 ავტომატურად; ფონი: url(clockface.jpg); სიის სტილი: არცერთი; ) #წმ, #წთ, #საათი (პოზიცია: აბსოლუტური ; სიგანე: 30 პიქსელი; სიმაღლე: 600 პიქსელი; ზედა: 0 პიქსელი; მარცხნივ: 285 პიქსელი; ) # წმ (ფონი: url(sechand.png); z-ინდექსი: 3; ) -ინდექსი: 2; ) #hour (ფონი: url(hourhand.png); z-index: 1; )

CSS ასევე ძალიან მარტივია. ხელის ნაწილების ფრაგმენტებს აქვთ სხვადასხვა ზომის და კუბის წერტილები, ასე რომ, ჩვენ შეგვიძლია გამოვთქვათ ისინი ერთდროულად, რათა თავიდან ავიცილოთ განმეორება. ელემენტი ulგამორიცხავს აბსოლუტურ პოზიციონირებას, რაც იძლევა ახალი ისრების განლაგების აბსოლუტურ პოზიციონირებას.

CSS3 იქნება ვიკორიზირებული ზოგიერთი დამატებითი jQuery კოდისთვის.

JavaScript

  1. დაბადების დღე ბიჭს ერთი საათი დავუთმოთ
  2. ჩვენ ვიანგარიშებთ და ჩავსვით CSS სტილები(Kut wrap) კანის ელემენტისთვის.
  3. CSS სტილები ყოველ საათში განახლდება.

გაითვალისწინეთ, რომ jQuery მუშაობს CSS3-ის ახალი შესაძლებლობებით. გარდა ამისა, რადგან სტილები ემატება დინამიურად, CSS ფაილი უნდა იყოს დამოწმებული, როგორც CSS2.1!

ავიღოთ ერთი საათი

საათის რეგულირება შესაძლებელია გთხოვთ დაეხმაროთ PHP-სკოდი, ale tse იქნება სერვერის საათი. და JavaScript აბრუნებს კორესპონდენტის ლოკალურ საათს.

ჩვენ ამოვიღებთ ინფორმაციას შემდგომი დახმარებისთვის. თარიღი ()და დააინსტალირეთ ჩვენი ყველა ცვლილება. ჩვენ ყველანაირად გამარჯვებული ვიქნებით GetSeconds(), GetMinutes ()ან კიდევ GetHours ()ამისთვის თარიღი ()სწორი წამების დასაყენებლად გთხოვთ:

Var seconds = New Date().getSeconds();

რიცხვი 0-დან 59-მდე დიაპაზონში წაიშლება არჩეული მწკრივიდან და მიენიჭება სხვა მნიშვნელობა წამი.

მნიშვნელობა კუტ

შემდეგ თქვენ უნდა გამოთვალოთ კანის ისრის ჭრილი. მეორე ხელისთვის და მოსახვევი ხელისთვის, რომლებიც საათის ბორბალზე 60-ზეა, 360 გრადუსი უნდა გავყოთ 60-ზე, რაც გვაძლევს რიცხვს 6. შემდეგ მეორე და მრუდი მხრივ შეესაბამება ბრუნვას 6 გრადუსით. . შევინახოთ შედეგი და დავამატოთ სხვა ცვლილებაში. წამის განმავლობაში კოდი ასე გამოიყურება:

Var ხარისხი = წამი * 6;

წლების განმავლობაში გამოთვლები განსხვავებული იქნება. იმის გამო, რომ ჩვენ გვაქვს აკრიფეთ 12 პოზიციით წლის ხელისთვის, ყოველ წელს შეესაბამება 30 გრადუსიანი ბრუნი (360/12 = 30). ალე გოდინიკოვის ისარი დამნაშავეა შუა ქვეყნებში, მერე დამნაშავეა ტყავთან ერთად მსხვრევაში. შემდეგ 4:30-ზე წლის ისარი 3-დან 4 წლამდე გზაჯვარედინზეა. Axis yak mi ce zrobimo:

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: rotate(45deg); -moz-transform: rotate(45deg); )

და აი, როგორ იმუშავებს კოდის ჩასმა jQuery-ის გამოყენებით:

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

პრობლემა მხოლოდ 45 გრადუსის ნაცვლად ცვლადის „sdegree“ მნიშვნელობის სინტაქსში შეყვანაშია. აუცილებელია რიგის შენარჩუნება სხვა ცვლილებაში ბრუნავსდა მთლიანად შეცვალოს სხვა არგუმენტი. ღერძი ასეთია:

Var srotate = "rotate(" + sdegree + "deg)";

და jQuery კოდი ასე გამოიყურება ღერძზე:

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

მოდით, ყველაფერი ერთდროულად მოვაგროვოთ

jQuery კოდი ასე გამოიყურება:

$(document).ready(function() ( setInterval(function() ( var seconds = new Date().getSeconds(); var sdegree = წამი * 6; var srotate = "rotate(" + sdegree + "deg)" $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); 1000);setInterval(function() (var hours = new Date( ) .getHours(); var mins = new Date().getMinutes(); var hdegree = საათი * 30 + (წთ / 2); ").css(("-moz-transform" : hrotate, "-webkit- transform" : hrotate)); ), 1000);setInterval(function() ( var mins = new Date(). mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $(" #min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) );)), 1000);

ჩვენ ვიკორისტის JavaScript ფუნქცია ვართ setIntervalგანაახლეთ თქვენი სტილი ყოველ წამში. ცვლილებები, რომლებიც ართმევს საათის მნიშვნელობას, დამნაშავეა მისი შეყვარებაში. შემდეგი წლისთავი გახდება მარნი სმიტი გვერდზე.

ვისნოვოკი

ამ გაკვეთილზე ნაჩვენებია იაკოსტის პრაქტიკული გამკვრივება როტაციაარ არის დაკავშირებული დიზაინთან.

Zrobimo ელექტრონული წელი დახმარებისთვის თარიღით და საათით jQueryі CSS3მცირე ანიმაციისთვის.

HTML

განლაგება მარტივი და სულელურია. შევქმნათ DIVკლასში საათი, DIVკლასში თარიღი, რომელიც არის ნაჩვენები თარიღი და უწესრიგო სია, რომელიც გოდინზე შურისძიებაა და წამი.

CSS

დიზაინის სტილები მცირე ანიმაციით:

კონტეინერი (სიგანე: 960 პიქსელი; ზღვარი: 0 ავტომატური; გადინება: დამალული;) .საათი (სიგანე: 800 პიქსელი; ზღვარი: 0 ავტომატური; შიგთავსი: 30 პიქსელი; საზღვარი: 1 პიქსელი მყარი #333; ფერი: #fff; ) #თარიღი (შრიფტი- ოჯახი: Arial, Helvetica, sans-serif; შრიფტის ზომა: 36 პიქსელი; ტექსტის გასწორება: ცენტრი; სტილი: არცერთი; ტექსტის გასწორება: ცენტრი; 00c6ff; ) #point (პოზიცია: შედარებითი; -moz-ანიმაცია:mymove 1s ease უსასრულო; -webkit-ანიმაცია:mymove 1s ease infinite; padding-left:10px; padding-right:10px; ) @-webkit-keyfra ჩემი 0% (გაუმჭვირვალობა:1.0; text-shadow:0 0 20px #00c6ff;) 50 % (გაუმჭვირვალობა:0; text-shadow:არცერთი; ) 100% (გაუმჭვირვალობა:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (გაუმჭვირვალობა:1.0; text-shadow: 0 0 20px #00c6ff;) 50% (გაუმჭვირვალობა:0; ტექსტი-ჩრდილი:არცერთი; ) 100% (გაუმჭვირვალობა:1.0; ტექსტი-ჩრდილი:0 0 20px #00c6ff; ) )

JS

დაკავშირებადი jQueryბიბლიოთეკა

მე მოგეცით ჩვენი სცენარი

  • ახალი თარიღი ()- ახალი ობიექტის შექმნა თარიღითქვენი კომპიუტერის ბრაუზერში მიმდინარე თარიღისა და მიმდინარე საათის მიხედვით.
  • setDate ()- მეთოდი ადგენს თვის დღეს (1-დან 31-მდე), ადგილობრივი საათის შემდეგ
  • getDate ()- მეთოდი ბრუნავს თვის დღეს (1-დან 31-მდე) მითითებული თარიღისთვის ადგილობრივი საათის შემდეგ
  • getSeconds(), getMiutes()і getHours ()- ეს მეთოდები საშუალებას გაძლევთ გაატაროთ წამები, საათები და საათები თქვენს ბრაუზერში.
  • (წამში< 10 ? "0" : "") + seconds) - ამატებს სიმინდის ნულს წამის მნიშვნელობას (ხვილინ თა გოდინ). სიმბოლოები ? і : მოიცავს სამეულს ( სამეული) ოპერატორი. ეს არის სპეციალური ოპერატორი, რომელიც აბრუნებს მნიშვნელობებს ორმაგი ყუთის წინ, ისევე როგორც ადრე კვება (? ) მართალია ( მართალია), ან მნიშვნელობა შემდეგ ორმაგი კრეტები, რადგან გონება არასწორია ( ყალბი).
  • ფუნქცია setInterval- ეს სტანდარტულია javascriptფუნქცია და არა ნაწილი jQuery. კოდი იწერება ბევრჯერ, საათის (მილიწამების) ტოლი ინტერვალით.
აპლიკაცია © 2022 მობილური და კომპიუტერული გაჯეტები