👯 ✋ 🙏🏽 हम घड़ी डायल पर समय अंतराल सेट करते हैं। जावास्क्रिप्ट 🖐🏻 🐍 🍬

शुभ दिन, प्रिय पाठक।

यह क्या है

अपने विकास के दौरान, मुझे समय अंतराल के एक कार्यात्मक विकल्प बनाने के कार्य का सामना करना पड़ा। पहली बात जो ध्यान में आई, ज़ाहिर है, सबसे सरल और सबसे स्पष्ट - कई पाठ क्षेत्र जहां प्रारंभिक और अंतिम मूल्य संचालित होते हैं। लेकिन क्या यह वाकई दिलचस्प है? नहीं।

मैंने थोड़ा मूल बनाने का फैसला किया।

मुझे लगता है कि तस्वीर काफी स्पष्ट रूप से मेरे विचार को प्रदर्शित करती है: हमारे पास एक घड़ी डायल और 2 स्लाइडर्स हैं, जिसके साथ हम अंतराल का चयन करते हैं। मैं तुरंत कहना चाहता हूं कि अगर मैंने अचानक साइकिल का आविष्कार किया ... हम्म, ठीक है, घातक नहीं। वैसे भी, किसी और का उपयोग करने की तुलना में खुद को बनाना अधिक दिलचस्प है।

कंकाल

मैं तुरंत ध्यान देना चाहता हूं कि मैं एक वेब डिजाइनर नहीं हूं, और मेरे पास गुरु स्तर पर CSS के साथ काम करने का कौशल नहीं है, इसलिए मेरा दृष्टिकोण किसी के लिए अनाड़ी लग सकता है, सही नहीं।

HTML में रिंग कैसे बनाये?

पक्षों के साथ एक वर्ग क्षेत्र बनाएँ X।
एक्स मान के साथ सीमा-त्रिज्या के लिए क्षेत्र सेट करें नतीजतन, हमें एक सर्कल मिलता है।
सर्कल के केंद्र में हम एक समान क्षेत्र डालते हैं, केवल एक छोटे त्रिज्या और एक अलग रंग के साथ।

अंगूठी तैयार है, लेकिन हमें पूरी अंगूठी की आवश्यकता नहीं है, लेकिन इसका केवल आधा हिस्सा है, इसलिए एक और आइटम जोड़ें

क्लिप संपत्ति के साथ क्षेत्र का हिस्सा काट दें ताकि हमें एक अर्धवृत्त मिल जाए

अंतिम परिणाम के लिए, हमें दो "रंगीन" अर्धवृत्त (कोड नाम सैश ) चाहिए, और दो अर्धवृत्त पृष्ठभूमि रंग (कोड नाम विरोधी सैश ) है।

स्लाइडर की स्थिति को बदलते हुए, हम सैश को घुमाएंगे। फ्लैप को छिपाने के लिए एंटी-फ्लैप की आवश्यकता होती है जब चयन अंतराल 180 जीआर से कम होता है। छिपाएं - इसका मतलब है कि पंखों के ऊपर विरोधी गुना प्रदर्शित करना, जेड-इंडेक्स के मूल्य को बदलना।

अंतिम HTML कंकाल इस तरह दिखना चाहिए:

यह कैसे काम करना चाहिए?

और ऐसा है। हमारे पास दो स्लाइडर्स हैं (कोडनेम स्लाइडर 1 और स्लाइडर 2 है )। जब आप स्लाइडर पर क्लिक करते हैं, या बल्कि, ऑनमॉसडाउन की घटना पर, इसे स्थानांतरित करने के लिए सक्रिय किया जाता है। कर्सर को ले जाना, स्लाइडर की स्थिति को बदलना, फिर इसे निष्क्रिय करने के लिए कर्सर ( ऑनमॉउप इवेंट) को छोड़ दें।

यह ध्यान दिया जाना चाहिए कि कर्सर आंदोलन न केवल सभी संभावित दिशाओं में अराजक होना चाहिए, जैसे कि हम पोटीन के माध्यम से एसएसएच कुंजी बना रहे हैं, यह आवश्यक है कि आंदोलन, अधिक या कम, परिपत्र जैसा हो। ऐसा करने के लिए, जब स्लाइडर सक्रिय हो जाता है, तो जिस क्षेत्र में आंदोलन संभव है, वह निर्धारित किया जाता है। ज़ोन से बाहर निकलते समय, स्लाइडर को निष्क्रिय कर दिया जाता है। ज़ोन - सर्कल के त्रिज्या से अधिक और कम त्रिज्या के साथ दो सर्कल जिसके साथ स्लाइडर चलता है।

सूत्रों के दृष्टिकोण से, सब कुछ सरल है: हम उस दूरी पर विचार करते हैं जिस पर सर्कल के केंद्र से कर्सर को हटा दिया जाता है। यह मान लें कि यह मान अंतराल में है या नहीं।

onmousemove

onmousemove = function(e){ /*         .         ,          */ var rect = Area.getBoundingClientRect(); var Xpoint = (e.clientX - area_radius) - rect.left; var Ypoint = (e.clientY - area_radius) - rect.top; var R = Math.sqrt(Math.pow(Xpoint,2)+Math.pow(Ypoint,2)); var a = (180*Math.acos((Xpoint-0)/R))/Math.PI; a = (Ypoint>=0) ? a=360-a : a;//  ,      move(a,R); };

विभिन्न समन्वय प्रणाली

यदि सब कुछ मेल खाता है, तो सर्कल के केंद्र और कर्सर की स्थिति के बीच खंड के कोण की गणना करें। और यहां एक असुविधाजनक क्षण पॉप अप होता है - विभिन्न समन्वय प्रणाली (एसके): सामान्य, सबसे सही बिंदु पर प्रारंभिक मूल्य के साथ, वामावर्त घुमाते समय कोण में वृद्धि। और संतरी। 00:00 हम उच्चतम स्थिति में हैं, और आंदोलन, क्रमशः, दक्षिणावर्त।

तत्वों को एक सामान्य एससी में स्थानांतरित करने की आवश्यकता होती है, और घड़ी को घंटे में गणना की जानी चाहिए।

सीमाओं की अनुमति दी

प्रत्येक स्लाइडर की सीमाएं हैं: बाएं और दाएं, जिसके आगे इसे स्थानांतरित नहीं किया जा सकता है। यह ठीक इन सीमाओं का निर्माण है जो सबसे बड़ा रोड़ा था।

मैंने 3 दिन बिताए हैं सही के साथ आने की कोशिश कर रहा है ... नहीं, यह सही शब्द नहीं है ... एक कार्यशील सीमा प्रसंस्करण तंत्र। हर कोई जो मेरे पराक्रम को दोहराना चाहता है, वह अपने "सही" तंत्र के साथ आएगा, मेरी तुलना में अधिक या कम सफलता के साथ। मैंने 3 बार इसे पूरी तरह से "पुनर्विचार" किया, जब मैं एक निश्चित बिंदु पर पहुंच गया, मुझे एहसास हुआ कि वर्तमान तंत्र के साथ, एक निश्चित क्षण बनाना संभव नहीं होगा।

नतीजतन, तंत्र इस तरह दिखता है: प्रत्येक स्लाइडर में 4 राज्य होते हैं (कोड में, राज्यों के लिए जिम्मेदार चर को sone और sTWO के रूप में नामित किया जाता है)। उनके आसपास, सब कुछ बनाया जा रहा है।

-2 - स्लाइडर की चरम सही स्थिति। घंटे 00:00 हैं।
-1 - स्लाइडर डायल के पहले मोड़ पर है। घंटे 00:00 से 11:59 तक हैं।
1 - स्लाइडर डायल के दूसरे मोड़ पर है। घंटे 12:00 से 23:00 तक हैं।
2- स्लाइडर की बाईं स्थिति। घंटे का मूल्य 24:00

वास्तव में, 2 और -2 पदों पर, स्लाइडर्स एक ही बिंदु पर हैं, लेकिन अंतर यह है कि वे किस तरफ आए थे। तदनुसार, वे केवल आगे पीछे जा सकते हैं।

यह निर्धारित करने के लिए कि स्लाइडर किस तरफ बढ़ रहा है, पुराने के सापेक्ष स्लाइडर की स्थिति का नया मूल्य जांचा जाता है। उदाहरण के लिए, यह निर्धारित करने के लिए कि किस पल में स्लाइडर पहली क्रांति से दूसरे डायल तक जाता है, उस स्थिति का निरीक्षण करना आवश्यक है जिसके तहत पिछले कोण का मान अंतराल में था: 60 <एक्स, 0 <एक्स , और नया 0 == एक्स; 330 <एक्स । सभी समान जांच लगभग उसी तरह से की जाती हैं, अर्थात्। न केवल ए> बी की जाँच करके, अर्थात् अंतराल को इंगित करके जहां ए स्थित हो सकता है, लेकिन जहां बी है । आप बस स्लाइडर को तेजी से खींच सकते हैं और इसका मूल्य तुरंत 10 या 15 डिग्री बदल जाएगा।

सीमा प्रसंस्करण

 if(R>=low_limit_polzunok_ONE && R<=high_limit_polzunok_ONE){ angle_polzunok_ONE_last = angle_polzunok_ONE; angle_polzunok_ONE = toClk(a); if(barier_ONE==true){ if(angle_polzunok_ONE>300){ if(toClk(a)>angle_polzunok_TWO+1 && toClk(a)<angle_polzunok_TWO+60+1){ move_polzunok_ONE(toCoo(angle_polzunok_ONE)); barier_ONE=false; } }else{ if(toClk(a)>angle_polzunok_TWO+1){ move_polzunok_ONE(toCoo(angle_polzunok_ONE)); barier_ONE=false; } } }else if(sONE==-2){//0 .          if(angle_polzunok_ONE>300){ sONE=-1; move_polzunok_ONE(a); }else{ angle_polzunok_ONE=360; } }else if(sONE==-1){ if(angle_polzunok_ONE>300 && (angle_polzunok_ONE_last>=0 && angle_polzunok_ONE_last<60)){ sONE=1; move_polzunok_ONE(a); }else if((angle_polzunok_ONE>=0 && angle_polzunok_ONE<60) && angle_polzunok_ONE_last>300){ sONE=-2; angle_polzunok_ONE = 0; move_polzunok_ONE(90); }else{ move_polzunok_ONE(a); } }else if(sONE==0){//  12   if(angle_polzunok_ONE>300){ sONE=1; move_polzunok_ONE(a); }else{ sONE=-1; move_polzunok_ONE(a); } }else if(sONE==1){ if((angle_polzunok_ONE>=0 && angle_polzunok_ONE<60) && angle_polzunok_ONE_last>300){ sONE=-1; move_polzunok_ONE(a); }else if((angle_polzunok_ONE==0 || angle_polzunok_ONE>300) && (angle_polzunok_ONE_last>0 && angle_polzunok_ONE_last<90)){ sONE=2; angle_polzunok_ONE = 0; move_polzunok_ONE(90); }else{ move_polzunok_ONE(a); } }else if(sONE==2){//24 .          if(angle_polzunok_ONE>0 && angle_polzunok_ONE<60){ sONE=1; move_polzunok_ONE(a); }else{ angle_polzunok_ONE=0; } } //   i     if(sTWO==sONE && angle_polzunok_TWO+1>angle_polzunok_ONE){ barier_ONE = true; angle_polzunok_ONE = angle_polzunok_TWO+1; move_polzunok_ONE(toCoo(angle_polzunok_ONE)); } }else{ polzunok_switch_ONE(false); }

समय की परिभाषा

वास्तव में पिछले पैराग्राफ पर सभी सबसे कठिन और दिलचस्प समाप्त हो गए। समय की गणना की प्रक्रिया विशेष नहीं है। 360 ग्राम = 12 घंटे * 60 मिनट की एक सरल गणना से पता चलता है कि एक मिनट दो मिनट से मेल खाता है। घड़ी समन्वय प्रणाली में स्लाइडर की डिग्री जानने के बाद, समय की गणना करना मुश्किल नहीं है। यदि स्लाइडर दूसरे मोड़ पर है, तो आपको डिग्री मूल्य में एक और 360 जोड़ने की आवश्यकता है।

संपूर्ण सूची और साथ ही परिणाम को यहां देखा जा सकता है।

सड़क पर

मेरा लक्ष्य जावास्क्रिप्ट के लिए नहीं, बल्कि जीडब्ल्यूटी के लिए ऐसी चीज बनाना था। प्रारंभ में, JS पर विकसित करना आसान है, और फिर इसे GWT में स्थानांतरित कर दिया। इसलिए, मैंने एक सुविधाजनक निर्माणकर्ता को परेशान नहीं किया, और परिणाम की गणना करने की प्रक्रिया एक नियमित पाठ स्ट्रिंग लौटाती है।

यह एक मसौदा है। एक परीक्षण नमूना है, लेकिन शायद यह किसी के लिए उपयोगी होगा।

धन्यवाद, प्रिय पाठक।

PS ने पोस्ट लिखना समाप्त कर दिया, मुझे एहसास हुआ कि यह सब कुछ आसान करना संभव होगा। इसलिए यह आमतौर पर है - "एक अच्छा विचार बाद में आता है"।

हम घड़ी डायल पर समय अंतराल सेट करते हैं। जावास्क्रिप्ट