Question

我是一名新手设计师，他可以使用HTML设计我自己的网站，我已经上传了我的emagazine文件。这是我在我网站上的计划下载页面：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;
}

我有另一个疑问：我曾在谷歌上搜索过下载计数器，而且我曾在某处读过，而不是直接在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>的内容吗？

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

Answer 1

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

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

然后，您可以使用.each（）函数遍历该类。所以对于页面的初始化;即使所有页面内容有效;你需要遍历每个按钮并向PHP脚本发出一个帖子请求;需要发送到PHP脚本的所有内容都是下载的ID。这可以在下面的代码的第1部分中完成。

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

然后向php脚本发出另一个帖子请求;但提供了一个额外的参数 - “下载”。实际上，与下载相对应的值实际上并不重要;因为这种情况很简单，用户要么下载要么没有。所以在代码的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接管的地方。实际上，所有这一切都需要检查是否设置了“下载”，并回显下载次数。（如果设置了'download'参数，显然会使用数据库增加数字）

这可以通过像...这样的东西来实现。

<?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 =”这样的网址;然而，在数据库查询完成后，您需要查看让PHP脚本传递文件。

还会显示下载编号的显示问题;如果没有AJAX，您将不得不在HTML标记内嵌中嵌入一些PHP。我希望我已经编辑了这个以使它更有意义，并给你一个其他选项的概述！：）

Answer 2

仅使用HTML和CSS，无法跟踪下载内容。您需要依靠（理想情况下）PHP和某种类型的数据库的组合来跟踪这一点。一种选择是通过PHP文件传递要下载的文件，但是如果您更愿意避免这种情况，您也可以使链接触发ajax请求，每次单击链接时将计数器增加1。

Answer 3

我建议您查看以下链接：

http://www.kavoir.com/2010/05/simplest-php-hit-counter-or-download-counter-count-the-number-of-times-of-access-visits-or-downloads.html

如@johnmadrak所述，您无法显示页面被查看的次数，或者在没有某种服务器端脚本语言强调某种数据库的情况下下载文件的情况。在某些情况下，您甚至可以通过文本文档放置文件下载的次数，然后通过PHP加载内容。

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

3 个答案: