6

我是一名新手设计师，可以只使用 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;
}

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

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

4

3 回答 3

6

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

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

然后，您可以使用 .each() 函数遍历该类。所以对于页面的初始化；即让所有页面内容正常工作；您需要遍历每个按钮并向 PHP 脚本发出 post 请求；需要发送到 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。我希望我已经对其进行了编辑以使其更有意义，并为您提供另一个选项的概述！:)

于 2012-06-25T19:39:17.537 回答
1

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

于 2012-06-25T19:12:32.233 回答
1

我建议查看以下链接：

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 加载内容。

于 2012-06-25T19:31:06.197 回答