လုပ်နည်း - JavaScript တိုးတက်မှုဘား
JavaScript ကိုအသုံးပြုပြီး တိုးတက်မှုဘားတစ်ခုဖန်တီးနည်းကို လေ့လာပါ။
Progress Bar တစ်ခု ဖန်တီးခြင်း။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div id="myProgress">
<div id="myBar"></div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
#myProgress {
width: 100%;
background-color:
grey;
}
#myBar {
width: 1%;
height:
30px;
background-color: green;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
JavaScript ကို အသုံးပြု၍ Dynamic Progress Bar (ကာတွန်း) ဖန်တီးပါ။
ဥပမာ
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
အညွှန်းများထည့်ပါ။
အသုံးပြုသူသည် လုပ်ငန်းစဉ်တွင် မည်မျှအကွာအဝေးရှိသည်ကို ညွှန်ပြရန်အတွက် အညွှန်းများထည့်လိုပါက၊ တိုးတက်မှုဘားအတွင်း (သို့မဟုတ် အပြင်) တွင် ဒြပ်စင်အသစ်တစ်ခုကို ထည့်ပါ-
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div id="myProgress">
<div id="myBar">10%</div>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
#myBar {
width: 10%;
height:
30px;
background-color: #04AA6D;
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color:
white;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
အညွှန်းအတွင်းရှိ စာသားကို တိုးတက်မှုဘား၏ အကျယ်အဝန်း၏ တူညီသောတန်ဖိုးသို့ ဒိုင်းနမစ်ဖြင့် အပ်ဒိတ်လုပ်လိုပါက အောက်ပါတို့ကို ထည့်ပါ။
ဥပမာ
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}