แท็ก meter

แท็ก meter ใช้สำหรับแสดง ค่าบางค่าในรูปแบบที่ออกแบบมาอย่างสวยงาม

รูปลักษณ์ของแท็กเป็นแถบที่ถูกเติมสี บางส่วนหรือทั้งหมด แถบ สามารถเป็นสีเขียว, สีเหลือง หรือสีแดง (สี ของแถบขึ้นอยู่กับค่าของแอตทริบิวต์ จะกล่าวถึงด้านล่าง):

ควรใช้แท็ก meter ตัวอย่างเช่น ในสถานการณ์ต่อไปนี้: คุณต้องการ แสดงค่าอุณหภูมิปัจจุบันบนหน้าจอ, โดยที่อุณหภูมิสามารถเปลี่ยนแปลงได้ตั้งแต่ 0 ถึง 100 คุณควรระบุแอตทริบิวต์ ต่อไปนี้: แอตทริบิวต์ value ควรระบุ ค่าอุณหภูมิปัจจุบัน, แอตทริบิวต์ min - ค่าที่เป็นไปได้ต่ำสุด (ในกรณีของเรา คือ 0), แอตทริบิวต์ max - ค่าสูงสุด ที่เป็นไปได้ (ในกรณีของเราคือ 100)

ขึ้นอยู่กับค่าของแอตทริบิวต์ value แถบจะเล็กหรือใหญ่ ถ้า ระบุ value เป็นค่า 10, แถบจะเล็ก (เพราะ 10 ใกล้กับค่าต่ำสุดมาก - คือศูนย์) แต่ถ้า ระบุค่า 90, แถบจะ ใหญ่ (เพราะ 90 ใกล้กับค่าสูงสุด - คือ 100) ถ้าระบุค่า 100 - แถบ จะครอบคลุมองค์ประกอบทั้งหมด (เพราะค่า ถึงค่าสูงสุดแล้ว)

ถ้าระบุค่าที่มากกว่า 100, แถบก็จะยังคงครอบคลุมองค์ประกอบทั้งหมด แต่ถ้าระบุ 0 หรือน้อยกว่า - จะไม่มีแถบ เลย

ตัวอย่าง

ค่าแอตทริบิวต์ value เล็ก:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ใหญ่:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ปานกลาง:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value เท่ากับค่าสูงสุด:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value เท่ากับค่าต่ำสุด:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value มากกว่าค่าสูงสุด:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value น้อยกว่าค่าต่ำสุด:

:

เพิ่มแอตทริบิวต์ low และ high

ในแท็ก meter ยังมีแอตทริบิวต์อีก 2 ตัว: low และ high

มาดูการทำงานของพวกมันโดยใช้ตัวอย่างอุณหภูมิ จำได้ว่า อุณหภูมิต่ำสุดของเรา คือ 0 และสูงสุดคือ 100 ให้ตอนนี้เราต้องการสร้างช่วงต่อไปนี้ - "อุณหภูมิเย็น" ตั้งแต่ 0 ถึง 20, "ปกติ" ตั้งแต่ 20 ถึง 80 และ "ร้อน" ตั้งแต่ 80 ถึง 100

เพื่อกำหนดอุณหภูมิเย็น, ให้ระบุ ค่าของแอตทริบิวต์ low เป็นตัวเลข 20 จะได้ว่า จากศูนย์ (นี่คือค่าของแอตทริบิวต์ min) ถึง 20 (ค่าของแอตทริบิวต์ low) คือ พื้นที่ของค่าต่ำ

เพื่อกำหนดอุณหภูมิร้อน, ให้ระบุ ค่าของแอตทริบิวต์ high เป็นตัวเลข 80 จะได้ว่า จาก 80 (นี่คือค่า ของแอตทริบิวต์ high) ถึง 100 (ค่า ของแอตทริบิวต์ max) คือ พื้นที่ของค่าสูง

อุณหภูมิปกติจะอยู่ตั้งแต่ 20 (นี่คือค่าของแอตทริบิวต์ low) ถึง 80 (ค่าของแอตทริบิวต์ high) พื้นที่นี้ เรียกว่า พื้นที่ของค่าปกติ

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

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าต่ำ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าปกติ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าสูง:

:

เพิ่มแอตทริบิวต์ optimum

แอตทริบิวต์ optimum กำหนดค่า ที่เหมาะสมที่สุด สำหรับตัวอย่างของเรา ค่าที่เหมาะสมที่สุด อาจเป็นอุณหภูมิเย็น, ปกติ หรือร้อน - ขึ้นกับการเลือกของคุณ สมมติว่า, คุณระบุว่า อุณหภูมิที่เหมาะสมที่สุด คืออุณหภูมิเย็น ตอนนี้ ขึ้นอยู่กับค่า ของแอตทริบิวต์ value (นั่นคือ จากอุณหภูมิปัจจุบัน ) สีของแถบจะเป็นสีเขียว, สีเหลือง หรือสีแดง

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

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

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

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

ในตัวอย่างด้านล่าง ค่าแอตทริบิวต์ optimum ตกอยู่ใน พื้นที่ของค่าต่ำ (นั่นคืออุณหภูมิเย็น)

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าต่ำ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าปกติ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าสูง:

:

ในตัวอย่างด้านล่าง ค่าแอตทริบิวต์ optimum ตกอยู่ใน พื้นที่ของค่าสูง (นั่นคืออุณหภูมิร้อน)

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าต่ำ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าปกติ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าสูง:

:

---

ในตัวอย่างด้านล่าง ค่าแอตทริบิวต์ optimum ตกอยู่ใน พื้นที่ของค่าปกติ (นั่นคืออุณหภูมิปกติ)

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าต่ำ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าปกติ:

:

ตัวอย่าง

ค่าแอตทริบิวต์ value ตกอยู่ใน พื้นที่ของค่าสูง:

:

เบราว์เซอร์รุ่นเก่า

เบราว์เซอร์รุ่นเก่าจะไม่สามารถแสดงแท็ก meter ในรูปแบบที่สวยงามได้ และจะแสดงแทนที่สิ่งนี้ เป็นเนื้อหาภายในของแท็กเอง:

:

แอตทริบิวต์

ค่าของแอตทริบิวต์สามารถเป็นเลขทศนิยมหรือเลขลบ ได้

แอตทริบิวต์	คำอธิบาย
value	ตั้งค่าปัจจุบัน แอตทริบิวต์บังคับ
min	กำหนดค่าที่เป็นไปได้ต่ำสุด ค่าเริ่มต้น: 0
max	กำหนดค่าที่เป็นไปได้สูงสุด ค่าเริ่มต้น: 1
low	กำหนดขอบเขตของพื้นที่ค่าต่ำ ค่าต่ำจะอยู่จากตัวเลขในแอตทริบิวต์ min ถึงตัวเลขในแอตทริบิวต์ low
high	กำหนดขอบเขตของพื้นที่ค่าสูง ค่าสูงจะอยู่จากตัวเลขในแอตทริบิวต์ high ถึงตัวเลขในแอตทริบิวต์ max
optimum	กำหนดพื้นที่ของค่าที่เหมาะสมที่สุด

ดูเพิ่มเติม