“將” jQuery“轉換為普通JavaScript”

Question

我試圖在某種程度上使此頁面加載器與該代碼加載器中的頁面加載器類似。 讓我感到困擾並試圖自行解決的是使用某種我認為是jQuery命令的美元符號（$）。 我試圖用純JavaScript編寫代碼，但是代碼無法正常工作（因為我想弄亂了一些東西），下面是帶jQuery的JavaScript和純Javascript（我制作的）：

原始代碼，帶有JavaScript和jQuery片段

 $(document).ready(function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 9) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-fighter-jet"</i>', '<i class="fa fa-gamepad"></i>', '<i class="fa fa-headphones"></i>', '<i class="fa fa-cubes"></i>', '<i class="fa fa-paw"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-ticket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; $(".loader .image").html(""+ images[counter] +""); } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { $('.loader span').html(num+'%'); if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; animation: 3s rotate infinite; -webkit-animation: 3s rotate infinite; -moz-animation: 3s rotate infinite; -ms-animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span></span> </div> 

我的代碼使用純JavaScript（我想還不太完整）

 document.addEventListener("DOMContentLoaded", function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 4) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-cubes"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; document.getElementsByClassName("loader", "image").innerHTML = ("" + images[counter] + ""); } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { document.getElementsByClassName("spaner").innerHTML= (num + '%'); if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; animation: 3s rotate infinite; -webkit-animation: 3s rotate infinite; -moz-animation: 3s rotate infinite; -ms-animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span class="spaner"></span> </div> 

任何幫助將非常感激。

Answer 1

您的代碼中幾乎沒有問題。

要使用多個選擇器，可以嘗試使用querySelector() ：

document.querySelector(".loader .image").innerHTML = ("" + images[counter] + "");

getElementsByClassName()返回collection，您必須使用適當的索引：

document.getElementsByClassName("spaner")[0].innerHTML= (num + '%');

請嘗試以下操作：

 document.addEventListener("DOMContentLoaded", function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 4) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-fighter-jet"</i>', '<i class="fa fa-gamepad"></i>', '<i class="fa fa-headphones"></i>', '<i class="fa fa-cubes"></i>', '<i class="fa fa-paw"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-ticket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; document.querySelector(".loader .image").innerHTML = ("" + images[counter] + ""); } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { document.getElementsByClassName("spaner")[0].innerHTML= (num + '%'); if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span class="spaner"></span> </div> 

Answer 2

與jQuery不同，jQuery具有在單個元素和jQuery元素集合上使用的相同API，而DOM API則要求您顯式遍歷 NodeList / HTMLCollection對象。

除此之外，除了收集具有類loader所有元素並將所有具有類image元素添加到該列表之外，您還需要使用querySelectorAll 。

 document.addEventListener("DOMContentLoaded", function() { var counter = 0; // Start the changing images setInterval(function() { if(counter == 4) { counter = 0; } changeImage(counter); counter++; }, 3000); // Set the percentage off loading(); }); function changeImage(counter) { var images = [ '<i class="fa fa-cubes"></i>', '<i class="fa fa-rocket"></i>', '<i class="fa fa-pie-chart"></i>', '<i class="fa fa-codepen"></i>' ]; [...document.querySelectorAll(".loader .image")].forEach((loader) => { loader.innerHTML = images[counter]; }) } function loading(){ var num = 0; for(i=0; i<=100; i++) { setTimeout(function() { [...document.getElementsByClassName("spaner")].forEach((spaner) => { spaner.innerHTML = num + '%'; }) if(num == 100) { loading(); } num++; },i*120); }; } 

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); html,body { margin: 0; padding: 0; font-family:'Lato', sans-serif; } .loader { width: 100px; height: 80px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .loader .image { width: 100px; height: 160px; font-size: 40px; text-align: center; transform-origin: bottom center; animation: 3s rotate infinite; opacity: 0; } .loader span { display: block; width: 100%; text-align: center; position: absolute; bottom: 0; } @keyframes rotate{ 0% { transform: rotate(90deg); } 10% { opacity: 0; } 35% { transform: rotate(0deg); opacity: 1; } 65% { transform: rotate(0deg); opacity: 1; } 80% { opacity: 0; } 100% { transform: rotate(-90deg); } } 

 <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loader"> <div class="image"> <i class="fa fa-codepen"></i> </div> <span class="spaner"></span> </div>