Use css to create star ratings_Experience exchange

先看效果

Step 1: XHTML

 

 
 
    
• 1
   
    
• 2
  
    
• 3
  
    
• 4
 

初期値を定義します

ステップ 3: 星のイメージ

最初の星は null 値で、2 番目の星はヌル値です。 star は null 値で、最初の値は選択される値で、3 番目は実際の値です。

図 2

ステップ 4: CSS、マジック

.star-rated li.current -評価{
背景: url(star_rated.gif) 左下;
位置: 絶対;
高さ: 30px;
表示: ブロック;
テキストインデント: -9000px;
z-index: 1;
}

コンテナ ul の相対位置の継承を避けるために、position:Absolute が各星の高さを使用します。 is height:30px; 他のものはテキストを非表示にし、配置を定義しています。

null value css

.star-rated{
…
背景: url(star_rated.gif) 左上repeat-x;
}

値を選択 css

.star-rated li a:hover{
バックグラウンド: url(star_rated.gif) left center;
…
}

もちろん、初期値は選択に応じて変わります。その変更を実現するにはどうすればよいでしょうか?

このコードを読めば、幅が何なのかがわかると思います。計算は何ですか?

平均評価|平均: 3.5
各星の幅|各星の幅: 30px;
幅を設定|幅を設定: 3.5 * 30 = 105px

この新しいモデルを見てみましょう
* 例 1: 150 x 30 の星評価システム
* 例 2: 125 x 25 の星評価システム
* 例 3: 25 x 125 の垂直星評価システム

実装には php を使用します

最初は実装の原則です

前からの星評価を達成しますcss I、II ですが、onclick が識別でき、データがデータベースに記録および保存され、計算のためにデータベースからデータが呼び出される限り、
現在の平均値を取得できることがわかります。スコア - 現在のスコア。

1. 以下はデータベースを作成する SQL です

CREATE TABLE ratings(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
total_votes INT NOT NULL,
total_value INT NOT NULL,
what_id INT NOT NULL,
what_table VARCHAR(255),
used_ips LONGTEXT NULL
);

2. パラメータファイル参照

require("connectDB.php");
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>

3. 投票プログラムの表示と投票データの更新プログラム

$rated_posted=$_GET['vote'];//変数を星の値によってパスしました
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" エラー: " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /合計投票数
$current_rated=$numbers['total_value'];//合計して保存された評価の合計数
$sum=$rated_posted+$current_rated;// 現在の投票値と合計投票値
$tense=($count==1) ? "vote" : "votes";//複数形 votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName) WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //パターン マッチ ip:Bramus が提案! http://www.php.cn/ -この変数は、投票した以前の IP アドレスを検索し、true または false を返します

if($voted){
echo "

".
"< ;ul class="star-rated">".
"

評価: {".$count." ".$tense."
あなたは以前に投票しました。

if(isset($_GET['vote'])) {

if($sum==0){
$added=0;//最初の投票が集計されたかどうかを確認します
}else{
$added=$count +1; //現在の投票数を増分します
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//ifこれは配列です。つまり、すでにエントリがあるため、別の値をプッシュします
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//最初のエントリの場合
}

$ insert=serialize($checkIP);
mysql_query("UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insert ."' WHERE id='".$_GET['id']."'");

echo "

評価: ".@number_format($sum/$added,2)." {".$added." "cast" ご投票いただきありがとうございます!

4. 訪問者評価プログラム

 
  
  
  
 

How clear was this tutorial?

• Current rating

    
• " title="Rate this 1 star out of 5" class="one-star">1

    
• " title="Rate this 2 stars out of 5" class="two-stars" >2

    
• " title="Rate this 3 stars out of 5" class="three-stars" >3

    
• " title="Rate this 4 stars out of 5" class="four-stars" >4

    
• " title="Rate this 5 stars out of 5" class="five-stars" >5

5.最新评分结果提示

echo "

Rating: ".@number_format($sum/$count,2)." {".$count." ".$tense." cast}