Pembangunan PHP untuk melaksanakan statistik kiraan muat turun dan mencipta halaman HTML

Tambahkan struktur HTML berikut pada badan halaman index.html Terdapat tajuk <h2> Di tengah teg <div> 🎜>

Bahagian kiri ialah Nama fail yang dimuat turun, bilangan muat turun dan butang "Klik untuk Muat Turun" akan dipaparkan apabila tetikus digerakkan di bahagian kanan.

Ul class="filelist" digunakan untuk memaparkan senarai fail,

Kini tiada kandungan di dalamnya, jQuery akan digunakan untuk membaca senarai fail secara tidak segerak, Jadi jangan lupa, anda juga perlu memuatkan fail perpustakaan jQuery dalam 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>

Melaksanakan reka letak gaya ringkas dalam jadual berikut:

< tr>

Tajuk utama: Muat Turun Statistik

Kandungan di tengah

头部标题: 下载统计
中间的内容
下载的内容1	如：下载测试1.zip	下载次数如：7	"点击下载" 按键
下载的内容2	......	.......	.......
下载的内容3	......	.......	.......
底部的内容(可自行添加内容和样式)

Kandungan dimuat turun 1

Contohnya: Muat turun ujian 1.zip

Muat turun masa seperti: 7

"Klik untuk butang muat turun"

Kandungan dimuat turun 2

......

.......

.......< /td >

Kandungan dimuat turun 3

......

.....

Kandungan di bahagian bawah (anda boleh menambah kandungan dan gaya sendiri )

Untuk menjadikan demo memaparkan kesan halaman dengan lebih baik, kami menggunakan CSS untuk mengubah suai halaman

kod berikut terutamanya Tetapkan kesan paparan senarai fail Sudah tentu, dalam projek sebenar, anda boleh menetapkan gaya yang sepadan seperti yang diperlukan.

Masukkan pelbagai kod gaya CSS dalam teg <style> dalam pengepala html<head>bahagian seterusnya

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh