頁面上沒有加載技能欄
[英]Skill bar is not loading on page
問題描述
我的技能欄有問題，在本地html索引文件中一切正常，但是將技能欄上傳到服務器后，它停止加載，好像沒有腳本一樣，有人知道如何修復它，謝謝為您的時間和幫助。 我鏈接我的我們讓你看看有什么問題https://neqts.github.io/TomaszTopor/
$('.skill-per').each(function(){ var $this = $(this); var per = $this.attr('per'); $this.css("width",per+'%'); $({animatedValue: 0}).animate({animatedValue: per},{ duration: 1000, step: function(){ $this.attr('per', Math.floor(this.animatedValue) + '%'); }, complete: function(){ $this.attr('per', Math.floor(this.animatedValue) + '%'); } }); });
body{ margin: 0; padding: 0; font-family: 'Open Sans',sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f1f1f1; } .skills{ width: 100%; max-width: 600px; padding: 0 20px; } .skill-name{ font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 20px 0; } .skill-bar{ height: 20px; background: #cacaca; border-radius: 8px; } .skill-per{ height: 20px; background-color: #0fbcf9; border-radius: 8px; width: 0; transition: 1s linear; position: relative; } .skill-per::before{ content: attr(per); position: absolute; padding: 4px 6px; background-color: #000; color: #fff; font-size: 12px; border-radius: 4px; top: -35px; right: 0; transform: translateX(50%); } .skill-per::after{ content: ''; position: absolute; width: 10px; height: 10px; background-color: #000; top: -16px; right: 0; transform: translateX(50%) rotate(45deg); border-radius: 2px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="skills"> <div class="skill"> <div class="skill-name">HTML</div> <div class="skill-bar"> <div class="skill-per" per="90"></div> </div> </div> <div class="skill"> <div class="skill-name">CSS</div> <div class="skill-bar"> <div class="skill-per" per="70"></div> </div> </div> <div class="skill"> <div class="skill-name">Javascript</div> <div class="skill-bar"> <div class="skill-per" per="60"></div> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 2020-11-02 10:15:11
我認為這是因為您從非安全連接加載 jquery。
http://code.jquery.com/jquery-3.2.1.min.js
將其更改為https://code.jquery.com/jquery-3.2.1.min.js
請看截圖
頁面中的加載欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.