Développement P...LOGIN

Développement PHP pour implémenter des statistiques de nombre de téléchargements et créer des pages HTML

Ajoutez la structure HTML suivante au corps de la page index.html. Il y a un titre <h2> 🎜>

. La partie gauche est Le nom du fichier téléchargé, le nombre de téléchargements, et le bouton "Cliquez pour télécharger" s'affichera lorsque la souris sera déplacée sur la partie droite.

Le ul class="filelist" est utilisé pour afficher la liste des fichiers,

Maintenant, il n'y a plus de contenu dedans, jQuery sera utilisé pour lire la liste des fichiers de manière asynchrone, alors n'oubliez pas que vous devez également charger le fichier de la bibliothèque jQuery en HTML.

<body>
<div id="header">
   <div id="logo" style="text-align: center"><h2>下载统计</h2></div>
</div>
<div id="main">
   <div id="demo">
       <ul class="filelist">
       </ul>
   </div>
</div>
<div id="footer">
</div>
</body>

Implémente une disposition de style simple dans le tableau suivant :

< tr>
Titre : Statistiques de téléchargement

                Contenu au milieu
                头部标题:  下载统计
                中间的内容
下载的内容1如:下载测试1.zip 下载次数   如:7 "点击下载"  按键
下载的内容2    ......    .......   .......
下载的内容3    ......    .......   .......
                 底部的内容(可自行添加内容和样式)
Contenu téléchargé 1Par exemple : Téléchargez le test 1.zip Temps de téléchargement tels que : 7 "Cliquez pour bouton de téléchargement"
Contenu téléchargé 2 ...... ....... .......< /td >
Contenu téléchargé 3 ...... ..... .....

Afin de permettre à la démo de mieux afficher l'effet de page, nous utilisons CSS pour modifier la page

Le. Le code suivant consiste principalement à définir l'effet d'affichage de la liste de fichiers. Bien sûr, dans le projet réel, vous pouvez définir le style correspondant selon vos besoins.

Entrez différents codes de style CSS dans la balise <style> à l'intérieur de l'en-tête html<head>section suivante
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PHP实现文件下载次数统计</title> <style type="text/css"> #demo{width:80%;margin:50px auto;padding:10px;border:1px solid #ddd;background-color:#eee;} ul.filelist li{background:url("https://img.php.cn/upload/course/000/000/008/582e53ad28601855.gif") repeat-x center bottom #F5F5F5; border:1px solid #ddd;border-top-color:#fff;list-style:none;position:relative;} ul.filelist li.load{background:url("https://img.php.cn/upload/course/000/000/008/582e5313d54a1210.gif") no-repeat; padding-left:20px; border:none; position:relative; left:150px; top:30px; width:200px} ul.filelist li a{display:block;padding:8px;} ul.filelist li a:hover .download{display:block;} span.download{background-color:#64b126;border:1px solid #4e9416;color:white; display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px; text-decoration:none;text-shadow:0 0 1px #315d0d;top:6px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} span.downcount{color:#999;font-size:10px;padding:3px 5px;position:absolute; margin-left:10px;text-decoration:none;} </style> </head> <body> <div id="header"> <div id="logo" style="text-align: center"><h2>下载统计</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel