PHP MySQL圖像點擊計數器

Question

我是PHP的新手，並且一直致力於打擊計數器。 點擊計數器工作得很好但現在我想將數字轉換成圖像。

我創建了12個圖像0-9，一個間隔符和一個逗號圖像。

我已經搜索了高低，以尋找我需要做什么來將數字格式轉換為圖像並且沒有成功。 到目前為止，我所發現的是如何使用僅文件，PHP / MySQL以及如何使用PHP / MySQL顯示加密圖像來創建基本命中計數器。

所以問題是：如何告訴給定代碼顯示圖像代替每個數字？

當前PHP結果示例： 命中：2,435

我希望我的PHP獲得命中總數（示例） ，然后使用以下代碼獲取並替換2,435：

<img src="img/2.png"><img src="img/comma.png"><img src="img/4.png"><img src="img/3.png"><img src="img/5.png">

---

注意：我在此處顯示的代碼中使用了大量注釋。 這樣，任何新的編碼器都可以更容易地理解正在顯示的腳本。 我將在本文的底部添加我的最終/完成代碼，以便每當我找到解決方案時，每個人都可以看到最終產品。

---

這段代碼完全虛構為文本點擊計數器

 // Begin open SQL connection to database $concount = mysqli_connect("site","username","password","database"); // End connection to database // Begin update number of hits mysqli_query($concount,"UPDATE counter SET hits = hits + 1"); // End update number of hits // Begin get number of hits $hits = ("SELECT SUM(hits) FROM counter"); // End get number of hits // Begin show number of hits $result = mysqli_query($concount,$hits); while($row = mysqli_fetch_array($result)) { echo "Hits: " . number_format((float)$row['0']) . " "; } // End show number of hits // Begin close SQL connection mysqli_close($con); // End close SQL connection 

---

編輯：下面是我的代碼的最終結果。 請注意，此腳本中的數組將“放置在圖像數組的開頭和結尾”。 （見下面的例子）

 Array ( [0] => ' [1] => 2 [2] => 4 [3] => 3 [4] => 5 [5] => ' ) 

因此，除非我想在我的點擊計數器的以太端上打破圖像，否則我必須使用它們。 我將我已經計划使用的透明圖像重命名為'.png（參見下面的示例）

 <img src="img/'.png"><img src="img/2.png"><img src="img/4.png"><img src="img/3.png"><img src="img/5.png"><img src="img/'.png"> 

---

最終代碼 此代碼完全虛構為圖像點擊計數器

 // Begin open SQL connection to database $concount = mysqli_connect("site","username","password","database"); // End connection to database // Begin update number of hits mysqli_query($concount,"UPDATE counter SET hits = hits + 1"); // End update number of hits // Begin get number of hits $hits = ("SELECT SUM(hits) FROM counter"); // End get number of hits // Begin assign $hits an id $result = mysqli_query($concount,$hits); while($row = mysqli_fetch_array($result)) { $totalhits=("'" . $row[0] . "'"); } // End assign $hits an id // Begin get id for number of hits, split the string into array, and assign id to numbers $arr = str_split($totalhits); $numbers = $arr; foreach ($numbers as $value) { // End get id for number of hits, split the string into array, and assign id to numbers // Begin show number of hits as images echo "<img src=\\"img/".$value.".png\\">"; } // End show number of hits as images // Begin close SQL connection mysqli_close($con); // End close SQL connection 

---

最后的注釋：我還沒有嘗試過向較大的數字添加逗號或刪除數組上的撇號。 如果我這樣做，我會回來編輯這個。

Answer 1

您可以使用str_split($str)將字符串轉換為字符數組。 接下來，您可以使用簡單的for或foreach循環迭代它們。

編輯：

有關如何可視化圖像的選項有多種。 您可以使用html <img src=''>標簽或CSS。

如果使用CSS ，則可以創建包含所有單個圖像的1個圖像（即spritemap或tilemap）。 然后使用CSS在單個圖像中再次將其拆分。 您可以通過為背景圖像定義一般聲明來完成此操作，然后讓每個數值定義該圖像內的偏移量。

.nr1 .nr2 .nr3 {    
  background: url(sprites.png) no-repeat;
}
.nr1 { background-position: 0 0 ; }
.nr2 { background-position: 0 -21px ; }
.nr3 { background-position: -21px -42px ; }

找到精確偏移的任務可能看起來很耗時。 但有幾個免費的在線工具可以為您做到這一點。 我個人經常使用這個 。 您可以將單個圖像拖動到Web瀏覽器中，它將創建單個圖像和必要的CSS。

使用spritemap的一個優點是所有圖像都被加載在一起 。 如果使用單個圖像，則可以在加載圖像時看到某種閃爍。

Answer 2

您需要將命中計數器拆分為數組，每個值包含一位數，然后使用for循環來追加圖像。

<?php
$array = str_split($your_hit_variable_from_mysql);
if(!empty($array)){
  foreach($array as $single){
        echo '<img src="'.$single.'.jpg"'>;
  }
}else{
        echo '<img src="0.jpg"'>;
}
?>

確保以整數格式存儲數字，而不是使用逗號存儲52,200之類的字符串。

有關詳情，請點擊此處

編輯：當圖像的計數器0時添加了異常處理。