कैसे करें - चेतन प्रतीक
एनिमेटेड प्रभाव बनाने के लिए आइकन का उपयोग करना सीखें।
बैटरी चार्ज हो रहा है
मैं
चरण 1) HTML जोड़ें:
उदाहरण
<div id="charging" class="fa"></div>
चरण 2) फ़ॉन्ट विस्मयकारी चिह्न लाइब्रेरी शामिल करें:
उदाहरण
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
हमारे Font Awesome ट्यूटोरियल में Font Awesome के बारे में और पढ़ें ।
चरण 3) एक जावास्क्रिप्ट जोड़ें:
उदाहरण
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
उदाहरण समझाया गया
उदाहरण बैटरी के चार्ज होने का आभास देता है, लेकिन इसके बजाय यह पांच अलग-अलग आइकन प्रदर्शित किए जा रहे हैं।
एक फ़ंक्शन कहा जाता chargebattery()
है जो सभी आइकनों को बदलने और प्रदर्शित करने का काम करता है।
फ़ंक्शन एक खाली बैटरी आइकन प्रदर्शित करके शुरू होता है:
मैंएक सेकंड के बाद, आइकन को एक नए आइकन से बदल दिया जाता है:
मैंजब तक "बैटरी पूरी तरह से चार्ज नहीं हो जाती" तब तक आइकन को हर सेकंड एक नए आइकन से बदल दिया जाता है:
मैंमैं
मैं
यह प्रक्रिया हर 5 सेकंड में दोहराई जाती है, जिससे ऐसा लगता है कि बैटरी चार्ज हो रही है।
अधिक एनिमेटेड प्रतीक
उदाहरण
उदाहरण
उदाहरण
उदाहरण
उदाहरण
उदाहरण