php - 如何将下载计数器附加到我的 HTML 下载按钮？

我是一名新手设计师，只能使用 HTML 来设计我自己的网站，并在其中上传了我的电子杂志文件。这是我网站上计划的下载页面:http://www.aamaodisha.org/secdownload.html

如您所见，在这个下载页面上，我放置了我的电子杂志的 6 个版本的图像，并为每个版本连接了下载按钮，这样每当用户单击下载按钮时，该特定文件 ( .RAR 文件)将开始下载。就像我说的，我用纯 HTML 和 CSS 设计了这些按钮。

我想要的是附加到特定下载按钮的每个杂志版本的下载计数器——这意味着您可以在我的 HTML 页面上看到，每个版本下面都写有下载次数。怎么会有这样的东西？我可以用html安排吗？

6 个下载按钮的 HTML 代码:

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>
<div class="button button2">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.8 MB .RAR</p>
</div>
<div class="button button3">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.05 MB .RAR</p>
</div>
<div class="button button4">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">3.8 MB .RAR</p>
</div>
<div class="button button5">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.5 MB .RAR</p>
</div>
<div class="button button6">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">8 MB .RAR</p>
</div>

这是按钮的 CSS:

.button {
  width: 115px;
}

.button1 {
    position:absolute;
    left:430px;
    top:410px;

}    
.button2 {
    position:absolute;
    left:632px;
    top:410px;

}  
.button3 {
    position:absolute;
    left:833px;
    top:410px;

}    
.button4 {
    position:absolute;
    left:430px;
    top:636px;

}    
.button5 {
    position:absolute;
    left:632px;
    top:636px;

}   
.button6 {
    position:absolute;
    left:833px;
    top:636px;

}   
.button a {
  display: block;
  height: 28px;
  width: 115px;

  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 

  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.button p {
  background: #222;
  display: block;
  height: 25px;
  width: 105px;
  margin: -27px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/28px Helvetica, Verdana, sans-serif;
  color: #ffffff;

  /*POSITION*/
  position: absolute;
  z-index: -1;

  /*TRANSITION*/  
  -webkit-transition: margin 0.4s ease;
     -moz-transition: margin 0.4s ease;
       -o-transition: margin 0.4s ease;
      -ms-transition: margin 0.4s ease;
          transition: margin 0.4s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -4px 0 0 5px;
}

.button:hover .top {
  margin: -50px 0 0 5px;
  line-height: 22px;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -14px 0 0 5px;
}

.button:active .top {
  margin: -30px 0 0 5px;
}

我还有一个疑问:我曾在 Google 上搜索过下载计数器，在某个地方我读到过，而不是直接在 href 中给出我的杂志文件的真实路径，应该通过另一个 php 文件给出替代路径即我目前有这个 HTML 代码，用于带有下载的下载按钮

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>

我应该有类似 <a href="/download.php file=my link">Download</a> 的东西吗？？

请帮我实现这些下载按钮的计数器。我将非常感激。谢谢。问候

最佳答案

我会在下载链接上寻找一个 jQuery 事件监听器，并通过 PHP 在服务器端完成这一切。它可能不是万无一失的，但不会对用户造成太大影响。

如果你想做这样的事情，那么你首先需要以一种可以通过 jQuery 访问的方式对你的按钮进行分组；在 jQuery 中还有其他选择多个元素的方法，但最简单的方法是让它们成为特定类的所有成员。

然后您可以使用 .each() 函数遍历该类。所以对于页面的初始化；即让所有页面内容正常工作；您需要遍历每个按钮并向 PHP 脚本发出发布请求；需要发送到 PHP 脚本的只是下载的 ID。这是在下面代码的第 1 部分中完成的。

第 2 部分是在下载发生时设置事件监听器。再一次，通过在整个类上放置一个事件监听器，我们可以检测到对它们中的任何一个的点击；然后通过访问它的 id 来识别它来自哪个按钮。 (注意:为简单起见；使标记中的 id 与数据库中的 id 相同)

这会向 php 脚本发出另一个 post 请求；但提供了一个附加参数 - “下载”。实际上，与下载对应的值并不重要；因为这种情况很简单，用户要么下载，要么不下载。所以在代码的 PHP 部分(下面)我们甚至不检查它的值； 我们只是检查它是否存在。

$(document).ready(function(){
  /* [[PART 1]]: loop through every element in the .button class*/
  $(".button").each(function (e) {

    /* get it's ID (which is equal to the download id stored in the db */
    var id = e.target.id;

    /* Post the download id to ranking.php; then echo the returned value to an 
    ** element with the id of 'count<num>'; where num is the download id. */
    $.post( 'ranking.php', { 'id' : id }, function(data){
        $('#count' + id).html(data);
    });
  });

  /* Part 2: When button is clicked, post the download data to "ranking.php" */
  $('.button').click(function(event){
      var id = e.target.id; //get the id of the button

      $.post( 'ranking.php', { 'id' : event.target.id, 'download' : 'YES' },  //set 'download'
          function(){ $('#count' + id).html(data) });   //echo new value to html
  });
});

我建议使用 jQuery，因为它提供了足够的语法糖来让事情变得非常简单。此外，通过使用 jQuery - 如果您愿意，您将在未来打开通往许多可能性的大门。

服务器端是 PHP 接管的地方。这实际上需要做的就是检查是否设置了“下载”，并回显下载次数。 (如果设置了“下载”参数，显然会增加数据库的数量)

这可以通过...来实现

<?php
    mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");   

    if(! isset($_POST['id']) {
         //die error!
    }

    /* if $_POST['download'] isn't set, then just get the current download number
       and echo it back to the browser */
    if(! isset($_POST['download'] ){
        $query = sprintf('SELECT * FROM dl_table WHERE id = %d', $_POST['id']);
        mysql_query($query);
    print mysql_result($query, 0, 'download');
        exit; // no need to carry on, our job is done..
    }

    /* if the script reaches here then $_POST['download'] is set, so you need to log a 
    ** new download */
    $query = //generate query to increment the database field
?>

上面的例子在简单的情况下是可行的(很明显，数据库函数已经修正)，但很明显——这可能不是有效的代码，因为我在晚餐时输入了它!当然，这只是为了让您了解可能的解决方案。 (如果您确实决定做类似的事情，我已经展示了不良做法 - mysql 操作现在最好使用 mysqli* 函数或 PDO 来完成)

查找 PHP My SQL 文档；希望这为您指明了正确的方向。

另外，据我所知，您不太热衷于 jQuery(一旦开始使用它就很棒!)您可以单独使用与 jQuery 解决方案一起使用的 PHP 脚本。只需将 $_POST[] 更改为 $_GET[] ，正如其他答案所说，使用像“ranking.php?id=”这样的 URL；但是，您需要考虑让 PHP 脚本在数据库查询完成后传递文件。

还有一个关于下载号显示的问题；由于没有 AJAX，您将不得不在 HTML 标记内联中嵌入一些 PHP。我希望我对此进行了编辑以使其更有意义，并为您提供了另一个选项的概述! :)

关于php - 如何将下载计数器附加到我的 HTML 下载按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11195712/

php - 如何将下载计数器附加到我的 HTML 下载按钮？

上一篇：html - CSS - 图像内的位置按钮

下一篇：jquery - 滚动到 #id + 100 像素