interface Web
js tutoriel
Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript
Introduction à plusieurs méthodes d'implémentation des barres de progression en JavaScript
Dans notre article précédent, nous vous avons présenté des exemples d'implémentation JavaScript des barres de progression. Nous savons tous que dans les projets réels, les barres de progression sont toujours très utiles. Aujourd'hui, nous allons continuer à présenter les avantages de l'implémentation JavaScript des barres de progression. De quelles manières !
Jetons d'abord un coup d'œil à l'effet final :
La première étape, essentiellement
Construisez le code de base et voir la démonstration de l'effet :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>制作进度条的两种方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{
margin:0;
padding:0;
}
body{font-size:12px;}h1{font-size:15px;}
.wrap{
font-size: 12px;
margin:40px auto;
width:400px;
}
/*进度条样式*/
.progressbar_1{
background-color:#eee;
height:16px;
width:150px;
border:1px solid #bbb;
color:#222;
}
.progressbar_1 .bar {
background-color:#6CAF00;
height:16px;
width:0;
}
</style>
</head>
<body>
<div class="wrap">
<h1 id="构建基本的HTML结构和CSS样式">1，构建基本的HTML结构和CSS样式</h1>
0%的状态：
<div class="progressbar_1">
<div class="bar"></div>
</div>
50%的状态：
<div class="progressbar_1">
<div class="bar" style="width: 50%;"></div>
</div>
80%的状态：
<div class="progressbar_1">
<div class="bar" style="width: 80%;"></div>
</div>
100%的状态：
<div class="progressbar_1">
<div class="bar" style="width: 100%;"></div>
</div>
这步非常简单，相信大家都能看明白。
</div>
</body>
</html>La deuxième étape consiste à ajouter l'affichage du texte à la barre de progression
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>制作进度条的两种方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{
margin:0;
padding:0;
}
body{font-size:12px;}h1{font-size:15px;}
.wrap{
font-size: 12px;
margin:40px auto;
width:400px;
}
/*进度条样式*/
.progressbar_1{
background-color:#eee;
color:#222;
height:16px;
width:150px;
border:1px solid #bbb;
}
.progressbar_1 .bar {
background-color:#6CAF00;
height:16px;
width:0;
}
/*绝对定位*/
.progressbar_2{
background-color:#eee;
color:#222;
height:16px;
width:150px;
border:1px solid #bbb;
text-align:center;
position:relative;
}
.progressbar_2 .bar {
background-color:#6CAF00;
height:16px;
width:0;
position:absolute;
left:0;
top:0;
}
.progressbar_2 .text {
height:16px;
position:absolute;
left:0;
top:0;
width:100%;
line-height:16px;
}
/*绝对定位 + z-index */
.progressbar_3{
background-color:#eee;
color:#222;
height:16px;
width:150px;
border:1px solid #bbb;
text-align:center;
position:relative;
}
.progressbar_3 .bar {
background-color:#6CAF00;
height:16px;
width:0;
position:absolute;
left:0;
top:0;
z-index:10;
}
.progressbar_3 .text {
height:16px;
position:absolute;
left:0;
top:0;
width:100%;
line-height:16px;
z-index:100;
}
</style>
</head>
<body>
<div class="wrap">
<h1 id="给进度条增加文字显示">2，给进度条增加文字显示</h1>
一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。
接下来，我们在进度条元素内增加一个显示 文字的div。
很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子：
<div class="progressbar_1">
<div >50%</div>
<div class="bar" style="width: 50%;"></div>
</div>
那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢？
估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。
看下面的例子：
<div class="progressbar_2">
<div class="text">50%</div>
<div class="bar" style="width: 50%;"></div>
</div>
这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。
对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子：
<div class="progressbar_3">
<div class="text">50%</div>
<div class="bar" style="width: 50%;"></div>
</div>
<div class="progressbar_3">
<div class="text">80%</div>
<div class="bar" style="width: 80%;"></div>
</div>
<div class="progressbar_3">
<div class="text">100%</div>
<div class="bar" style="width: 100%;"></div>
</div>
这是第一种方式，也是目前最为流行的 制作进度条的方式。
他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。
接下来我们看第二种方式制作进度条。
</div>
</body>
</html> Son principe est d'utiliser le positionnement relatif et le positionnement absolu, puis de contrôler la progression à travers différents arrière-plans. Nous examinons ensuite la deuxième façon de créer une barre de progression.
La troisième étape, la deuxième façon de créer une barre de progression --- utiliser directement des images + des images d'arrière-plan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{
margin:0;
padding:0;
}
body{font-size:12px;}h1{font-size:15px;}
.wrap{
font-size: 12px;
margin:40px auto;
width:400px;
}
/*不带文字*/
.progress{
border:0;
width: 152px;
height: 18px;
background:url(img/progress.gif) no-repeat -100px 50%;
}
/*带文字显示*/
.progressbar_3{
width:152px;
position:relative;
height:18px;
text-align:center;
position:relative;
color:#222;
}
.progressbar_3 .text{
width:152px;
position:absolute;
left:0;
top:0;
height:18px;
line-height:18px;
z-index:100;
}
.progressbar_3 .progress{
width:152px;
position:absolute;
left:0;
top:0;
height:18px;
z-index:10;
}
</style>
</head>
<body>
<div class="wrap">
<h1 id="制作进度条的第二种方式-直接使用图片-背景图片">3，制作进度条的第二种方式---直接使用图片+背景图片</h1>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="0%" alt="0%" style="background-position:-152px 50%;"/>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="20%" alt="20%" style="background-position:-120px 50%;"/>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="50%" alt="50%" style="background-position:-76px 50%;"/>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="80%" alt="80%" style="background-position:-30px 50%;"/>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="100%" alt="100%" style="background-position: 0 50%;"/>
如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。
对，就是使用绝对定位+相对定位来控制。
<div class="progressbar_3">
<div class="text">0%</div>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="0%" alt="0%" style="background-position:-152px 50%;"/>
</div>
<div class="progressbar_3">
<div class="text">20%</div>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="20%" alt="20%" style="background-position:-120px 50%;"/>
</div>
<div class="progressbar_3">
<div class="text">50%</div>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="50%" alt="50%" style="background-position:-76px 50%;"/>
</div>
<div class="progressbar_3">
<div class="text">80%</div>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="80%" alt="80%" style="background-position:-30px 50%;"/>
</div>
<div class="progressbar_3">
<div class="text">100%</div>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="100%" alt="100%" style="background-position: 0 50%;"/>
</div>
这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。
当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。
<p style="float:right;">Dev By <a href="http://www.jb51.net" >jb51.net</a></p>
</div>
</body>
</html>La quatrième étape, appliquer
Enfin, regardons une application simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{
margin:0;
padding:0;
}
body{font-size:12px;}h1{font-size:15px;}
.wrap{
font-size: 12px;
margin:40px auto;
width:400px;
}
/*不带文字*/
.progress{
border:0;
width: 152px;
height: 18px;
background:url(img/progress.gif) no-repeat -100px 50%;
}
/*带文字显示*/
.progressbar_3{
width:152px;
position:relative;
height:18px;
text-align:center;
position:relative;
color:#222;
}
.progressbar_3 .text{
width:152px;
position:absolute;
left:0;
top:0;
height:18px;
line-height:18px;
z-index:100;
}
.progressbar_3 .progress{
width:152px;
position:absolute;
left:0;
top:0;
height:18px;
z-index:10;
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="gb2312"></script>
<script>
$(function(){
var $txt = $(".progressbar_3 .text");
var $progress = $(".progressbar_3 .progress");
$("#addTo").click(function(){
$progress.animate({"backgroundPosition":"-76px 50%"},500,function(){
$(this).attr({"alt":"50%","title":"50%"});
$txt.text("50%");
$("<p>进度条加载完毕!</p>").appendTo(".wrap");
});
});
$("#cutdown").click(function(){
$progress.animate({"backgroundPosition":"-120px 50%"},500,function(){
$(this).attr({"alt":"20%","title":"20%"});
$txt.text("20%");
$("<p>进度条加载完毕!</p>").appendTo(".wrap");
});
});
});
</script>
</head>
<body>
<div class="wrap">
<h1 id="应用">4，应用</h1>
<div class="progressbar_3">
<div class="text">0%</div>
<img class="progress lazy" src="/static/imghw/default1.png" data-src="img/bg.gif" style="max-width:90%" style="max-width:90%" title="0%" alt="0%" style="background-position:-152px 50%;"/>
</div>
<button id="addTo" >增加至50%</button>
<button id="cutdown" >减少至20%</button>
我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
<p style="float:right;">Dev By <a href="http://www.jb51.net" >jb51.net</a></p>
</div>
</body>
</html>Utilisez Animate pour contrôler la position d'arrière-plan de l'image afin d'obtenir l'effet de barre de progression. .
Bien sûr, vous pouvez également utiliser la première méthode. Ce qui doit être modifié dans la première méthode, c'est l'attribut width de la barre de progression.
Résumé :
Grâce à l'étude de cet article, je pense que les amis comprendront mieux la méthode de mise en œuvre des barres de progression dans JavaScript. Chaque méthode Elles sont toutes différentes, les amis peuvent choisir la méthode appropriée en fonction de leurs propres besoins !
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1205
24
Comment écrire un roman dans l'application Tomato Free Novel Partagez le tutoriel sur la façon d'écrire un roman dans l'application Tomato Novel
Mar 28, 2024 pm 12:50 PM
Tomato Novel est un logiciel de lecture de romans très populaire. Nous avons souvent de nouveaux romans et bandes dessinées à lire dans Tomato Novel. De nombreux amis souhaitent également gagner de l'argent de poche et éditer le contenu de leur roman. Je veux écrire dans du texte. Alors, comment pouvons-nous y écrire le roman ? Mes amis ne le savent pas, alors allons ensemble sur ce site. Prenons le temps de regarder une introduction à la façon d'écrire un roman. Partagez le didacticiel du roman Tomato sur la façon d'écrire un roman. 1. Ouvrez d'abord l'application de roman gratuite Tomato sur votre téléphone mobile et cliquez sur Personal Center - Writer Center 2. Accédez à la page Tomato Writer Assistant - cliquez sur Créer un nouveau livre. à la fin du roman.
Comment entrer dans le bios sur la carte mère Colorful ? Apprenez-vous deux méthodes
Mar 13, 2024 pm 06:01 PM
Les cartes mères colorées jouissent d'une grande popularité et d'une part de marché élevée sur le marché intérieur chinois, mais certains utilisateurs de cartes mères colorées ne savent toujours pas comment accéder au BIOS pour les paramètres ? En réponse à cette situation, l'éditeur vous a spécialement proposé deux méthodes pour accéder au bios coloré de la carte mère. Venez l'essayer ! Méthode 1 : utilisez la touche de raccourci de démarrage du disque U pour accéder directement au système d'installation du disque U. La touche de raccourci de la carte mère Colorful pour démarrer le disque U en un seul clic est ESC ou F11. Tout d'abord, utilisez Black Shark Installation Master pour créer un Black. Disque de démarrage Shark U, puis allumez l'ordinateur lorsque vous voyez l'écran de démarrage, appuyez continuellement sur la touche ESC ou F11 du clavier pour accéder à une fenêtre de sélection de la séquence d'éléments de démarrage. Déplacez le curseur à l'endroit où "USB. " s'affiche, puis
Comment récupérer des contacts supprimés sur WeChat (un tutoriel simple vous explique comment récupérer des contacts supprimés)
May 01, 2024 pm 12:01 PM
Malheureusement, les gens suppriment souvent certains contacts accidentellement pour certaines raisons. WeChat est un logiciel social largement utilisé. Pour aider les utilisateurs à résoudre ce problème, cet article explique comment récupérer les contacts supprimés de manière simple. 1. Comprendre le mécanisme de suppression des contacts WeChat. Cela nous offre la possibilité de récupérer les contacts supprimés. Le mécanisme de suppression des contacts dans WeChat les supprime du carnet d'adresses, mais ne les supprime pas complètement. 2. Utilisez la fonction intégrée « Récupération du carnet de contacts » de WeChat. WeChat fournit une « Récupération du carnet de contacts » pour économiser du temps et de l'énergie. Les utilisateurs peuvent récupérer rapidement les contacts précédemment supprimés grâce à cette fonction. 3. Accédez à la page des paramètres WeChat et cliquez sur le coin inférieur droit, ouvrez l'application WeChat « Moi » et cliquez sur l'icône des paramètres dans le coin supérieur droit pour accéder à la page des paramètres.
Comment définir la taille de la police sur le téléphone mobile (ajustez facilement la taille de la police sur le téléphone mobile)
May 07, 2024 pm 03:34 PM
La définition de la taille de la police est devenue une exigence de personnalisation importante à mesure que les téléphones mobiles deviennent un outil important dans la vie quotidienne des gens. Afin de répondre aux besoins des différents utilisateurs, cet article présentera comment améliorer l'expérience d'utilisation du téléphone mobile et ajuster la taille de la police du téléphone mobile grâce à des opérations simples. Pourquoi avez-vous besoin d'ajuster la taille de la police de votre téléphone mobile - L'ajustement de la taille de la police peut rendre le texte plus clair et plus facile à lire - Adapté aux besoins de lecture des utilisateurs d'âges différents - Pratique pour les utilisateurs malvoyants qui souhaitent utiliser la taille de la police fonction de configuration du système de téléphonie mobile - Comment accéder à l'interface des paramètres du système - Dans Rechercher et entrez l'option "Affichage" dans l'interface des paramètres - recherchez l'option "Taille de la police" et ajustez-la. application - téléchargez et installez une application prenant en charge l'ajustement de la taille de la police - ouvrez l'application et entrez dans l'interface des paramètres appropriée - en fonction de l'individu
Résumé des méthodes pour obtenir les droits d'administrateur dans Win11
Mar 09, 2024 am 08:45 AM
Un résumé de la façon d'obtenir les droits d'administrateur Win11 Dans le système d'exploitation Windows 11, les droits d'administrateur sont l'une des autorisations très importantes qui permettent aux utilisateurs d'effectuer diverses opérations sur le système. Parfois, nous pouvons avoir besoin d'obtenir des droits d'administrateur pour effectuer certaines opérations, telles que l'installation de logiciels, la modification des paramètres du système, etc. Ce qui suit résume quelques méthodes pour obtenir les droits d'administrateur Win11, j'espère que cela pourra vous aider. 1. Utilisez les touches de raccourci. Dans le système Windows 11, vous pouvez ouvrir rapidement l'invite de commande via les touches de raccourci.
Le secret de l'éclosion des œufs de dragon mobiles est révélé (étape par étape pour vous apprendre à réussir l'éclosion des œufs de dragon mobiles)
May 04, 2024 pm 06:01 PM
Les jeux mobiles font désormais partie intégrante de la vie des gens avec le développement de la technologie. Il a attiré l'attention de nombreux joueurs avec sa jolie image d'œuf de dragon et son processus d'éclosion intéressant, et l'un des jeux qui a beaucoup attiré l'attention est la version mobile de Dragon Egg. Pour aider les joueurs à mieux cultiver et faire grandir leurs propres dragons dans le jeu, cet article vous présentera comment faire éclore des œufs de dragon dans la version mobile. 1. Choisissez le type d'œuf de dragon approprié. Les joueurs doivent choisir soigneusement le type d'œuf de dragon qu'ils aiment et qui leur conviennent, en fonction des différents types d'attributs et de capacités d'œuf de dragon fournis dans le jeu. 2. Améliorez le niveau de la machine d'incubation. Les joueurs doivent améliorer le niveau de la machine d'incubation en accomplissant des tâches et en collectant des accessoires. Le niveau de la machine d'incubation détermine la vitesse d'éclosion et le taux de réussite de l'éclosion. 3. Collectez les ressources nécessaires à l'éclosion. Les joueurs doivent être dans le jeu.
Explication détaillée de la méthode de requête de version Oracle
Mar 07, 2024 pm 09:21 PM
Explication détaillée de la méthode de requête de version Oracle Oracle est l'un des systèmes de gestion de bases de données relationnelles les plus populaires au monde. Il offre des fonctions riches et des performances puissantes et est largement utilisé dans les entreprises. Dans le processus de gestion et de développement de bases de données, il est très important de comprendre la version de la base de données Oracle. Cet article présentera en détail comment interroger les informations de version de la base de données Oracle et donnera des exemples de code spécifiques. Interrogez la version de base de données de l'instruction SQL dans la base de données Oracle en exécutant une simple instruction SQL
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
