CSS3 का उपयोग करके तीर घड़ी। CSS3 और jQuery में डिजिटल घड़ी एचटीएमएल में घड़ी कैसे जोड़ें
यह उनकी मुख्य स्क्रिप्ट है:
200? "200px": "" + (This.scrollHeight + 5) + "px"); "\u003e 00:00:00
सबसे ऊपर हम देखते हैं:
200? "200px": "" + (This.scrollHeight + 5) + "px"); "\u003e 00:00:00
बस बोल्ड टेक्स्ट और येलो टिंट और तीर जोड़ें।
200? "200px": "" + (This.scrollHeight + 5) + "px"); "\u003e « 00:00:00»
और यही हुआ:
इसलिए आप स्वयं देखें कि सब कुछ कैसे बदल गया है, और अब आप सब कुछ खुद कर सकते हैं और अपनी शैलियों को फिट करने के लिए इसे खूबसूरती से सेट कर सकते हैं। कि दूसरों को नहीं किया जा सकता है, क्योंकि वहाँ फ्लैश है, कि वे यहाँ नहीं हैं।
अब फ्लैश पर घड़ी के अलावा
200? "200px": "" + (This.scrollHeight + 5) + "px"); "\u003e
तो आप चुन सकते हैं कि आपको कौन सा सबसे अच्छा लगता है और क्यों लगाया जाता है, क्योंकि कुछ को ब्लॉक में स्थापित किया जा सकता है, लेकिन पहले वाले जिन्हें आप अधिक पसंद करते हैं, चूंकि वे लचीले और अनुकूलन योग्य हैं, जो हर कोई कर सकता है।
यह एक सरल स्क्रिप्ट है जो जावास्क्रिप्ट में सादे पाठ में सिस्टम समय दिखाती है। एक बृहदान्त्र द्वारा अलग किए गए घंटे, मिनट और सेकंड - बस इतना ही।
घड़ी के लिए अपनी खुद की शैली निर्धारित करने के लिए, आईडी के साथ ब्लॉक के लिए शैली को परिभाषित करने के लिए पर्याप्त है - # समय। CSS में आप घड़ी, उसके रंग और आकार के लिए अपना स्वयं का फ़ॉन्ट सेट कर सकते हैं। यदि आपको एक साधारण घड़ी की आवश्यकता नहीं है, लेकिन अधिक जटिल हैं, तो एक वेबसाइट के लिए फ्लैश घड़ी देखें। स्क्रिप्ट को समय का डेटा कहां से मिलता है? दिखाया गया समय ठीक वही है जो डिवाइस पर सेट है।
स्थापना
साइट पर जहाँ भी आप घड़ी देखना चाहते हैं, निम्न कोड चिपकाएँ। UCoz पर, यह हो सकता है, उदाहरण के लिए, "शीर्ष" या "साइट के नीचे":
200? "200px": "" + (This.scrollHeight + 5) + "px"); "\u003e
00:00:00
स्क्रिप्ट तुरंत उस स्थान पर दिखाई देगी जहां आपने इसे स्थापित किया था, एक घड़ी के साथ पाठ की एक पंक्ति। उदाहरण के लिए, "00:00:00"... वैसे, मिनट और घंटे, हमेशा दो अंकों के होते हैं, इसलिए मूल्यों का परिवर्तन सहज होता है।
हमने पहले ही सीएसएस और जावास्क्रिप्ट का उपयोग करके एक एनालॉग घड़ी का निर्माण कर लिया है। इस ट्यूटोरियल में, हम CSS3 का उपयोग करके एक ही घड़ी बनाएंगे, यह देखने के लिए कि नए मानक किस तरह से हम विभिन्न प्रभावों को डिजाइन करते हैं। इस ट्यूटोरियल का डेमो केवल उन ब्राउज़रों में काम करेगा जो CSS3 की संपत्ति का समर्थन करते हैं घुमाएँ(IE6 में डेमो काम नहीं करता है)।
CSS3 रूपांतरण: घुमाएँ
रूपांतरण: घुमाएँ - एक नया CSS 3 गुण जो आपको विभिन्न तत्वों को घुमाने की अनुमति देता है। परिवर्तनों की सहायता से, आप तत्वों के पैमाने को भी बदल सकते हैं, विकृतियों को क्षैतिज और लंबवत रूप से पेश कर सकते हैं, और वेब पेज के चारों ओर तत्वों को स्थानांतरित कर सकते हैं। यह सब संपत्ति का उपयोग करके एनिमेटेड हो सकता है संक्रमण(विभिन्न प्रकार के संक्रमण और अवधि के साथ)।
पृष्ठ तत्वों को एनिमेट करने के लिए समान चरणों को कुछ जावास्क्रिप्ट लाइब्रेरी (उदाहरण के लिए, jQuery) का उपयोग करके किया जा सकता है। बेशक, आप jQuery के साथ एक बहुत अधिक सीएसएस गुणों को चेतन कर सकते हैं जितना आप कर सकते हैं संक्रमण... लेकिन jQuery एक अंतर्निहित CSS टूल है, जावास्क्रिप्ट लाइब्रेरी बाहरी उपकरण हैं जो उपलब्ध नहीं हो सकते हैं। किसी भी स्थिति में, CSS3 डेवलपर विकास के लिए नए आशाजनक दिशाएं खोलता है।
ललित कलाएं
सबसे पहले, आपको घड़ी के लिए एक ग्राफिकल इंटरफ़ेस बनाने की आवश्यकता है। हमारे पास एक आधार और तीन तीर होंगे। सभी चलते हुए हिस्सों को फ़ोटोशॉप में 600px ऊंचे और 30px चौड़े, और लंबवत, और डिफ़ॉल्ट रूप से संपत्ति में कटा हुआ है घुमाएँ केंद्र के चारों ओर तत्व को घुमाता है। संपत्ति का उपयोग कर सकते हैं बदलने मूल के रोटेशन के केंद्र को एक अलग बिंदु पर सेट करने के लिए।
घड़ी के आधार के लिए किसी भी छवि का उपयोग किया जा सकता है। चलती भागों में पारदर्शिता के साथ PNG चित्र हैं।
डेमो स्रोत कोड संग्रह में एक PSD फ़ाइल शामिल है जिसमें सभी चित्र शामिल हैं।
HTML मार्कअप
घड़ी का लेआउट एक सरल अव्यवस्थित सूची है। प्रत्येक सूची आइटम में एक मूविंग पार्ट होता है और एक संबंधित आईडी होती है:
सीएसएस
# क्लॉक (स्थिति: सापेक्ष: चौड़ाई; 600px; ऊंचाई: 600px; मार्जिन: 20px ऑटो 0 ऑटो; पृष्ठभूमि: url (क्लॉकफेस.jpg); सूची-शैली: कोई नहीं;) #sec, #min, #hour (स्थिति) ; चौड़ाई: 30px; ऊँचाई: 600px; शीर्ष: 0px; बायां: 285px;) #sec (पृष्ठभूमि: url (sechand.png); z-index: 3;) #min (पृष्ठभूमि: url (minhand .png); z; -index: 2;) # हूर (पृष्ठभूमि: url (hrhand.png); z-index: 1;)
सीएसएस भी काफी सरल है। चूंकि चलती भागों का आकार और शुरुआती बिंदु समान है, हम पुनरावृत्ति से बचने के लिए उन्हें एक साथ घोषित कर सकते हैं। तत्त्व उल सापेक्ष स्थिति प्राप्त करता है, जो इसके भीतर तीरों के लिए पूर्ण स्थिति का उपयोग करना संभव बनाता है।
CSS3 को थोड़ा jQuery कोड के साथ लागू किया जाएगा।
जावास्क्रिप्ट
- हमें घंटों का समय मिलता है
- प्रत्येक तत्व के लिए सीएसएस शैलियों (रोटेशन कोण) की गणना करें और डालें।
- नियमित अंतराल पर सीएसएस शैलियों को अपडेट करें।
यह ध्यान दिया जाना चाहिए कि jQuery नए CSS3 गुणों के साथ बहुत अच्छा काम करता है। इसके अलावा, चूंकि शैलियों को गतिशील रूप से जोड़ा जाता है, CSS फ़ाइल को CSS2.1 के रूप में मान्य किया गया है!
हमें समय मिलता है
PHP कोड का उपयोग करके समय भी प्राप्त किया जा सकता है, लेकिन यह सर्वर समय होगा। और जावास्क्रिप्ट उपयोगकर्ता का स्थानीय समय लौटाता है।
हम उपयोग करके जानकारी प्राप्त करेंगे तारीख () और हमारे सभी चर सेट करें। हम तदनुसार उपयोग करेंगे GetSeconds (), GetMinutes () या गेटहॉर्स () के लिये तारीख () क्रमशः सेकंड, मिनट और घंटे सेट करने के लिए:
वार सेकंड \u003d नई तिथि ()। GetSeconds ();
उपरोक्त पंक्ति में, 0 से 59 तक की संख्या प्राप्त की जाएगी और एक चर को सौंपा जाएगा सेकंड.
कोण का निर्धारण करें
फिर आपको प्रत्येक तीर के लिए रोटेशन के कोण की गणना करने की आवश्यकता है। दूसरे और मिनट के हाथों के लिए, जिसमें घंटे के घेरे पर 60 स्थिति होती है, हमें 360 डिग्री को 60 से विभाजित करने की आवश्यकता होती है, जो हमें 6 नंबर देती है। यानी, प्रत्येक सेकंड या मिनट 6 डिग्री रोटेशन से मेल खाती है। हम गणना परिणाम को दूसरे चर में संग्रहीत करेंगे। सेकंड के लिए, कोड इस तरह दिखता है:
वर सेडग्री \u003d सेकंड * ६;
घंटों के लिए, गणना अलग होगी। चूंकि हमारे पास घंटे के हाथ के लिए 12 पदों के साथ एक डायल है, प्रत्येक घंटे 30 डिग्री (360/12 \u003d 30) के रोटेशन के कोण से मेल खाती है। लेकिन घंटे का हाथ मध्यवर्ती राज्यों में भी होना चाहिए, अर्थात, इसे हर मिनट चलना चाहिए। यानी, 4:30 बजे घंटे का हाथ 3 से 4 बजे के बीच आधा होना चाहिए। यहाँ हम यह कैसे करते हैं:
वार hdegree \u003d घंटे * 30 + (मिनट / 2);
यही है, हम रोटेशन कोण को घंटों की संख्या से भी जोड़ते हैं मिनटों की संख्या को 2 से विभाजित करने का मूल्य (जो हमें 0.5 से 29.5 तक की सीमा में एक मूल्य देगा)। इस प्रकार, 0 से 30 डिग्री (प्रति घंटा वेतन वृद्धि) के कोण से घंटे का हाथ "चालू" हो जाएगा।
उदाहरण के लिए:
2 घंटे 40 मिनट -\u003e 2 * 30 \u003d 60 डिग्री और 40/2 \u003d 20 डिग्री। कुल: 80 डिग्री।
यह माना जा सकता है कि घड़ी दिखाएगी कि दोपहर 12 बजे के बाद से, रोटेशन मूल्य 360 डिग्री से अधिक होगा। लेकिन सब कुछ ठीक काम करता है।
अब हम CSS नियम सम्मिलित करने के लिए तैयार हैं।
शैली की स्थापना
यह एक CSS3 नियम जैसा दिखता है घुमाएँ स्टाइलशीट में:
# सेक (-वेबकैट-ट्रांसफ़ॉर्म: रोटेट (45deg); -मोज़-ट्रांसफॉर्म: रोटेट (45deg));
और इस तरह से jQuery का उपयोग करके कोड डाला जाएगा:
$ ("# सेकंड")। css (("- moz-transform": "रोटेट (45deg)", "-webkit-transform": "रोटेट (45deg)"));
एकमात्र समस्या 45 डिग्री के बजाय सिंटैक्स के लिए "sdegree" चर में परिणामी कोण मान सेट करना है। एक और चर में एक स्ट्रिंग बनाने की जरूरत है srotate और दूसरे तर्क को पूरी तरह से बदलें। ऐशे ही:
वार srotate \u003d "रोटेट (" + sdegree + "deg)";
और jQuery कोड इस तरह दिखेगा:
$ ("# सेकंड")। css ("(moz-transform": srotate, "-webkit-transform": srotate));
यह सब एक साथ डालें
JQuery कोड इस तरह दिखेगा:
$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) () (सेटइन्टरवल (फ़ंक्शन) (var सेकंड \u003d नई दिनांक ()। getSeconds (); var sdegree \u003d सेकंड * 6; var srotate \u003d "रोटेट (" + sggree + "deg)" ; $ ("# सेकंड")। css ("(moz-transform": srotate, "-webkit-transform": srotate));), 1000); setInterval (फ़ंक्शन () (var घंटे: new Date ()) .getHours (); var mins \u003d new Date ()। getMinutes (); var hdegree \u003d hours * 30 + (mins / 2); var hrotate \u003d "रोटेट (" + hdegree + "deg"); $ ("# घंटा) ") .cs ((" - moz-transform ": hrotate," -webkit-transform ": hrotate));), 1000); setInterval (फ़ंक्शन () (var mins \u003d new Date ()। getMinutes (); var) mdegree \u003d mins * 6; var mrotate \u003d "रोटेट (" + mdegree + "deg)"; $ ("# min")। css (("- moz-transform": mrotate, "-webkit-transform": mrotate) );), 1000);));
हम जावास्क्रिप्ट फ़ंक्शन का उपयोग कर रहे हैं setIntervalहर पल शैलियों को अपडेट करने के लिए। समय मान प्राप्त करने वाले चर को इसमें अपडेट किया जाना चाहिए। अन्यथा पृष्ठ पर घड़ी बेकार हो जाएगी।
निष्कर्ष
यह पाठ संपत्ति के व्यावहारिक अनुप्रयोग को प्रदर्शित करता है घुमाएँ डिजाइन से संबंधित नहीं।
आइए तारीख और समय का उपयोग करके एक इलेक्ट्रॉनिक घड़ी बनाएं jQuery तथा CSS3 थोड़ा एनीमेशन के लिए।
एचटीएमएल
मार्कअप सरल और लचीला है। हम बनाते हैं DIV कक्षा के साथ घड़ी, DIV कक्षा के साथ तारीखजो एक तारीख और एक अनियंत्रित सूची प्रदर्शित करेगा जिसमें घंटे, मिनट और सेकंड शामिल हैं।
सीएसएस
थोड़ा एनीमेशन के साथ शैलियाँ:
कंटेनर (चौड़ाई: 960px; मार्जिन: 0 ऑटो; अतिप्रवाह: छिपा हुआ;) .clock (चौड़ाई: 800 कोडेक: 0 ऑटो; गद्दी: 30px; सीमा: 1px ठोस # 333; रंग: # साफ;) # शब्द (फ़ॉन्ट- परिवार: एरियल, हेल्वेटिका, संस-सेरिफ़; फ़ॉन्ट-आकार: 36px; पाठ-संरेखित: महाविद्यालय; पाठ-छाया: 0 0 5px # 00c6ff;) उल (चौड़ाई: 800px; मार्जिन: 0 ऑटो; गद्दी: 0px; सूची- शैली: कोई नहीं; पाठ-संरेखित: केंद्र;) उल ली (प्रदर्शन: इनलाइन; फ़ॉन्ट-आकार: 10em; पाठ-संरेखित: केंद्र; फ़ॉन्ट-परिवार: एरियल, हेल्वेटिका, संस-सेरिफ़; पाठ-छाया: 0 0 5 5 × # 00c6ff;) #point (स्थिति: सापेक्ष; -मोज़-एनीमेशन: mymove 1s अनंत अनंत -webkit- एनीमेशन: mymove 1s अनंत आसानी से; गद्दी-बाएँ: 10px; गद्दी-दाएँ -10px;) @ -webkit-keyframes mymove ( 0% (अस्पष्टता: 1.0; पाठ-छाया: 0 0 20px # 00c6ff;) 50% (अपारदर्शिता: 0; पाठ-छाया: कोई नहीं;) 100% (अपारदर्शिता: 1.0; पाठ-छाया: 0 0 20px # 0066ff;) ) @ -मोज़-कीफ़्रेम मायमोव (0% (अपारदर्शिता: 1.0; पाठ-छाया: 0 0 20px # 00c6ff;) 50% (अपारदर्शिता: 0; पाठ-छाया: कोई नहीं;) 100% (अपारदर्शिता: 1.0; पाठ-छाया) : 0 0 20px # 00c6ff;))
जे एस
हम कनेक्ट करते हैं jQuery पुस्तकालय
और फिर हमारी स्क्रिप्ट
- नई तारीख़ () - एक नई वस्तु बनाता है तारीख कंप्यूटर ब्राउज़र में वर्तमान तिथि और वर्तमान समय के मूल्य के साथ।
- तारीख सेट करें () - विधि स्थानीय समय के अनुसार महीने का दिन (1 से 31 तक) निर्धारित करती है
- तारीख लें () - विधि महीने के दिन (1 से 31 तक) को स्थानीय समय के अनुसार निर्दिष्ट तिथि के लिए वापस करती है
- getSeconds (), getMinutes () तथा गेटहॉर्स () - ये विधियां आपको वर्तमान समय के सेकंड, मिनट और घंटों को ब्राउज़र में लाने की अनुमति देती हैं।
- (सेकंड< 10 ? "0" : "") + seconds) - सेकंड वैल्यू (मिनट और घंटे) में एक अग्रणी शून्य जोड़ता है। प्रतीक ? तथा : टर्नरी शामिल हैं ( त्रिगुट) ऑपरेटर। यह एक विशेष ऑपरेटर है जो बृहदान्त्र से पहले मान लौटाता है यदि स्थिति पहले एक प्रश्न (? ) सही ( सच), या के बाद मूल्य पेटअगर हालत झूठी है ( असत्य).
- समारोह setInterval मानक है जावास्क्रिप्ट कार्य, भाग नहीं jQuery... नियमित अंतराल (मिलीसेकंड) पर कई बार कोड निष्पादित करता है।