يطبق HTML5 شريط التقدم وتأثيرات شريط التمرير الخاصة به

 <div id=d> <p id=pgv>التقدم: %</p> <progress id=pg max= value=></progress> </div>

استخدم علامة التقدم لتعيين القيم الدنيا والقصوى. يمكنك استخدام القيمة للحصول على قيمة التقدم

 وظيفة staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'التقدم:' + pg.value + '%' } else { pgv.innerHTML = 'اكتمل التحميل' ClearInterval(timer) } }, ) }

التأثير النهائي هو كما يلي:

تأثير العرض هذا مخصص لمتصفح Chrome، وIE وFireFox لهما أنماط مختلفة!

تغييرات النمط:

 progress{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* احصل على التقدم */ الخلفية اللون: برتقالي /* لون الخلفية غير المعبأ لشريط التقدم*/ } ::-webkit-progress -value { لون الخلفية: rgb(, , ); /* لون خلفية الجزء المملوء من شريط التقدم*/ } ::-webkit-progress-inner-element { border: px Solid black; الحد الداخلي لشريط التقدم، انتبه لتمييزه عن المخطط التفصيلي*/ }

الأنماط هنا كلها مخصصة لنواة webkit، والأنماط الأخرى غير مدعومة ~~~ التأثير كما يلي:

اضبط نوع الإدخال على النطاق. ومع ذلك، لا تدعم كافة المتصفحات هذه السمة، وإذا لم يكن الأمر كذلك، فسيتم إرجاع السمة الافتراضية، وهي <input type=text>

(لمزيد من التفاصيل، يرجى الرجوع إلى https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

النمط الافتراضي:

 <div id=d> <p>H شريط التمرير القابل للسحب:</p> <input type=range name=points min= max= id=hpro/> </div>

1. يأتي مع السمات:

 (1)، defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

القيمة الافتراضية = (تعيين القيمة القصوى <تعيين القيمة الدنيا)؟ تعيين القيمة الدنيا: تعيين القيمة الدنيا + (ضبط القيمة القصوى - تعيين القيمة الدنيا) / 2 ---- في الواقع، خذ القيمة الوسطى

يمكننا ضبط قيمة شريط التمرير بالقيمة = 7.

(2)، <input type=range min=-10 max=10>

الحد الأدنى: تعيين الحد الأدنى للقيمة؛ الحد الأقصى: تعيين الحد الأقصى للقيمة

(3)، <input type=range min=5 max=10 step=0.01>

الخطوة: قم بتعيين قيمة الخطوة، القيمة الافتراضية هي 1. إذا تم تعيين min أو max بنقطة عشرية، على سبيل المثال: max=3.14، فلا يمكن الحصول على العلامة العشرية، فيمكنك تعيين الخطوة على: step=any.

(4) علامات التجزئة والتسمية:

ملاحظة: في الوقت الحالي، لا يوجد متصفح يدعم بشكل كامل سمتي علامات التجزئة والتسمية. على سبيل المثال، لا يدعم Firefox كليهما، ويدعم Chrome علامات التجزئة ولكن ليس التسمية.

أ) علامات التجزئة:

 <نوع الإدخال=اسم النطاق=النقاط الأدنى=الحد الأقصى=الخطوة=أي معرف=قائمة hpro=علامات التجزئة/> <معرف قائمة البيانات=علامات التجزئة> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> < قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> </datalist>

ب) التسمية:

 <نوع الإدخال=اسم النطاق=النقاط الأدنى=الحد الأقصى=الخطوة=أي معرف=قائمة hpro=علامات التجزئة/> <معرف قائمة البيانات=علامات التجزئة> <قيمة الخيار= التسمية=%> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار => <قيمة الخيار=> <قيمة الخيار= التسمية=%> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار=> <قيمة الخيار= التسمية=%> </datalist>

(5) يمكن للتركيز التلقائي ضبط أو إرجاع ما إذا كان شريط التمرير سيكتسب التركيز تلقائيًا بعد تعيينه على "صحيح"، سيتم قفل شريط التمرير تلقائيًا عند الدخول إلى صفحة الويب. يمكنك التحكم فيه عن طريق الضغط على أعلى وأسفل ويسار ويمين على لوحة المفاتيح .

2. تجميل المظهر:

 input[type=range] { Outline: none; -webkit-appearance: none /* إزالة نمط المظهر الافتراضي للنظام، والذي يُستخدم غالبًا لإزالة الأنماط الأصلية ضمن IOS*/ border-radius: px;

- مظهر webkit: لا شيء؛ إزالة الأنماط الافتراضية

 input[type=range]::-webkit-slider-runnable-track { height: px; border-radius: px; box-shadow: px px #deff, inset .em .em #d }

::-webkit-slider-runnable-track هو عنصر من فئة CSS زائف، وهو غير مدعوم من قبل جميع المتصفحات. يمكنك الحصول على مسار <input type=range>

للحصول على التفاصيل، راجع: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none /* إزالة النمط الافتراضي لشريط التمرير*/ height: px; # BE؛ نصف قطر الحدود: %؛ الحدود: صلب .em rgba(, , , .);

::-webkit-slider-thumb يمكنه الحصول على مسار <input type=range>

ما ورد أعلاه هو تطبيق HTML5 الذي قدمه لك المحرر مع شريط التقدم وتأثير شريط التمرير الخاص به، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب . أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!