CSSを使用して星評価を作成_体験交流

最初に効果を見てみましょう

ステップ 1: XHTML

• 1
li> ;2

• 3


• 4


• 5

ここでは静的テクノロジーのみを紹介します。次に、システムのアプリケーションが提供されます。自分でプログラムを追加して試してみることもできます。ajax を使用して豪華な効果を作成することもできます

ステップ 2: グラフィックス

スペースと帯域幅を節約するために、得点ボタンとして gif 画像を使用します。

画像

ステップ 3: CSS

.star-rated{ list-style: none; /* デフォルトのリスト画像の箇条書きをオフにします*/
margin: 3px; /* この周りにスペースは必要ありません*/
padding: /* 私は肛門です。 OL のデフォルトのパディングは 0px ですが、念のため 0px に設定します*/
width: 100px; /*このリストは 5 つ星で、各星は 20px であるため、5 倍にする必要があります。 20px = 100px width*/
height: 20px; /* 各星の高さは 20px であるため、リストの高さを星の高さに設定します。*/
location:相対; /*非常に重要です。後で絶対位置を使用します。*/
背景: url(star_rated.gif) /* この画像を水平方向に繰り返します。 */
}

既知のコードによると、
は ul と list のマージンとパディングを削除します。 -style 、高さ 20px、幅 100px のブロック

が降ってきたときのボタン要素の生成を定義します。 以下は css

です。 padding:0px; / * パディングはまったくありません*/ margin:0px; /* マージンはまったくありません*/
/**/ /*バックスラッシュ ハックにより、IE5 Mac ではこのルールが認識されなくなります*/
float: left;ブラウザー、左にフロートします。これで水平リストが作成されます*/
/* */ /* IE5 バックスラッシュ ハックを終了*/
}

このコードにより、li はIE5 の MAC バグを解決します

上記のボタン要素のスタイルを継承し、マウス アクションを定義します。 以下は css

です。 {

display:block; /* 高さと幅を変更できるようにブロック項目が必要です*/ width:20px; /* 簡単なことですが、幅を同じにします。 star width*/
height: 20px ; /* width と同じ*/
text-decoration: none; /* リンクから下線を削除します*/
text-indent: /* [url =http://www.php.cn/]画像置換技術[/url]を使用してテキストを画面からインデントします。テキストはもう表示されません。*/
z-index: 20 ; /*この */
位置に戻ります: 絶対; /* 親 UL を基準にして、各星の正確な x 座標と y 座標を制御できるようになります*/
パディング: / *もう一度言いますが、パディングは必要ありません*/
background-image:none; /* スターは表示されません*/
}

13. .star-rated li a :hover{
14. 背景: url(star_rated.gif) 左下; /*ここが魔法の場所*/
15. z-index: 1; /* この星を一番下に移動します。 z-index stack*/
16 . left: 0px; /*この星を UL 親アイテムの側面に合わせて左に移動します*/
17. }

次に、異なる星評価を表示する方法を考えなければなりません。3 つ星ですか? 4 つ星ですか? 背景画像を水平方向に繰り返し、選択したものを区別するために a と a:hover の幅を定義します。スタースター。

以下は css

.star-rated a.one-star{
left: 0px;
}
です。 star -評価 a.one-star:hover{
width:20px;
}
.star-評価 a.two-stars{
left:20px;
}
。 star -評価 a.two-stars:hover{
幅: 40px;
}
.star-評価 a.three-stars{
左: 40px;
}
。星評価 a.three-stars:hover{
幅: 60px;
}
.star-評価 a.four-stars{
左: 60px;
}
。星評価 a.four-stars:hover{
幅: 80px;
}
.star-評価 a.five-stars{
左: 80px;
}
。 star -評価 a.five-stars:hover{
width: 100px;
}

この時点で制作は完了です

最初モデル 星が半分である状況と初期星評価がないことを無視して、次にこの問題を解決します。

ステップ 1. 実際に動作を確認します

写真 1

実際に動作を確認してください

ステップ 2: XHTML

• 現在 3.5/5星。


• 1< ;/li>
  
• 2


• 3


• 4


• 5

そして最初のものの構造モデルは似ていますが、唯一の違いは次のとおりです。

現在 3.5/5 つ星です。

初期値を定義します

ステップ 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;
…
}

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

style = "width:105px;">現在 3.5/5 つ星。

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

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

下面欣賞這個新模型吧
* Example 1: 150 x 30 star rating system
* Example 2: 125 x 25 star rating system
* Example 3: 25 x 125 vertical

我們用php來實現

首先是實現的原理

從上一個css實現星級評分I 、 II，可是看出，只要能識別onclick和將數據記錄至數據庫中存儲，然後從數據庫中調用出數據進行計算就
可以得到當前的評分均值——當前的分值。

1.以下是建立資料庫的sql

CREATE TABLE ratings(
 id INT NOT NULL AUTO_INCREMENT PRIMAR NULL,
 total_value INT NOT NULL,
 which_id INT NOT NULL,
 which_table VARCHAR(255),
 used_ips LONGTEXT NULL 2.參數檔引用

require("connectDB.php");require("closeDB.php");require(" tableName.php");

require("openDB.php");

?>


3.顯示投票程式和更新投票資料程式

$rating_posted=$_GET['vote'];//pased variable by the the stars value

$id=$_GET ['id'];$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" Error: ".mysql_error()); $numbers=mysql_fetch_assoc($query);

$checkIP=unserialize($numbers['used_ips']);

$count=$numbers['total_votes'];//how many votes total 🎜>$current_rating=$numbers['total_value'];//total number of rating added together and stored
$sum=$rating_posted+$current_rating;// add together the current v value and the toote v. $tense=($count==1) ? "vote" : "votes";//plural form votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%" .$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Pattern match ip:suggested by Bramus! http://www.php.cn/ - this variable searches through the previous ip address that have voted and returns true or false

if($voted){
echo "

".
"

".
"
• Current rating.
" .
     "
• 1
".
     "
• 2
".
     "
• 3
".     "
• 4
".

     "

• 5
".
"

".
 "

Rating: ".@number_format($current_rating/$count,2)." {". $count." ".$tense." cast}
You have previously voted.

";//show the current value of the vote with the current numbers
}else{

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

if($sum==0){
$added=0;//checking to see if the first vote 有 been tallied
}else{
$added=$count+1;//increment the current number of votes
}

if(is_array($checkIP)){

array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if it is an array i.e. already has entries the push in another value

}else{
$checkIParray($ REMOTE_ADDR']);//for the first entry
}

$insert=serialize($checkIP);

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

echo  "

Rating: ".@number_format($sum/$added,2)." {".$added." ".$tense." cast} Thank you for your vote!

";//show the updated value of the vote
}else{
?>

4.訪客評分程序

方法このチュートリアルはわかりましたか?

• 現在の評価


• title="5 つ星のうち 1 つ星を評価します" class="one-star">1


• title="5 つ星のうち 2 つ星を評価してください" class="two-stars" >2


• title="5 つ星のうち 3 つ星を評価してください" class="three-stars" >3


• title="5 つ星のうち 4 つ星を評価してください" class="four-stars" >4


• title="5 つ星のうち 5 つ星を評価してください" class="five-stars" >5

5.最新评分結果提案

echo "

評価: ".@number_format($sum/$count,2)." {".$count." ".$tense." キャスト}

現在更新された投票値
} // end isset get vote
} //end 投票された true、false
?>