先看效果
Step 1: XHTML
這裡只介紹靜態的技術，隨後會給出系統的應用，你也是自己加程序來嘗試一下，還可以採用ajax來做出絢麗的效果
Step 2:圖片|Graphics為了節省您的空間和寬頻，我們採用gif圖，這個圖片就是打分數的按鈕。 
圖
Step 3:CSS
margin: 3px; /*I wan't some space around this thing*/
padding: 0px; pretty sure OL's have a default padding of 0px、 20px = 100px wide*/
height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the ight of the relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
background: url(star_rating.) top left repeat-x background: url(star_rating.) top left repeat-xally left , the list will appear to have five stars.*/
}
去掉了ulpad的margin和padding以及list-style ，定義了高20px寬100px的一個區塊
下來時按鈕元素的製作，下面是css
pad:0p ; * no padding at all*/ margin:0px; /* no margin at all*/
/**/ /*反斜線 hack，這會導致 IE5 Mac 看不到此規則*/
float: any*/
float: left; /* for anyhft; to float left, this makes a horizontal list*/
/* */ /* end the IE5 Backslash hack*/
}
.star-rating li a{ : display: we want a block item, so that we can mess with its height and width*/ 次に、異なる星評価を表示する方法を考えなければなりません。3 つ星ですか? 4 つ星ですか? 背景画像を水平方向に繰り返し、選択したものを区別するために a と a:hover の幅を定義します。スタースター。 以下は css .star-rated a.one-star{ この時点で制作は完了です 最初モデル 半分のスターの状況と初期のスター評価以外を無視して、次にこの問題を解決します。 ステップ 1. 実際に動作を確認します 実際に動作を確認してください ステップ 2: XHTML そして最初のものの構造モデルは似ていますが、唯一の違いは次のとおりです。 初期値を定義します ステップ 3: 星のイメージ 最初の星は null 値で、2 番目の星はヌル値です。 star は null 値で、最初の値は選択される値で、3 番目は実際の値です。 ステップ 4: CSS、マジック .star-rated li.current -評価{ コンテナ ul の相対位置の継承を避けるために、position:Absolute が各星の高さを使用します。 is height:30px; 他のものはテキストを非表示にし、配置を定義しています。 null value css .star-rated{ 値を選択 css .star-rated li a:hover{ もちろん、初期値は選択に応じて変わります。その変更を実現するにはどうすればよいでしょうか? このコードを読めば、幅が何なのかがわかると思います。計算は何ですか? 平均評価|平均: 3.5 この新しいモデルを見てみましょう 実装には php を使用します 最初は実装の原則です 前からの星評価を達成しますcss I、II ですが、onclick が識別でき、データがデータベースに記録および保存され、計算のためにデータベースからデータが呼び出される限り、 1. 以下はデータベースを作成する SQL です CREATE TABLE ratings( 2. パラメータファイル参照 require("connectDB.php"); 3. 投票プログラムの表示と投票データの更新プログラム
$rated_posted=$_GET['vote'];//変数を星の値によってパスしました if($voted){ ". 評価:
width:20px; /* easy stuff, we want the width to be the same as the starstar width*/
text-indent: -9000px; /* indent the texto the offing a [urlus the . =http://www.php.cn/]image-replacement technique[/url], we dont want to see the text anymore.*/
z-index: 20; /*we'll come back to this */
position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/
padding: 0px; padding*/
background-image:none; /* we will not show the star*/
}
13. ground.star-rating li a:hover{
13. ground.star-rating li a:hover{ url(star_rating.gif) left bottom; /*this is where the magic is*/
15. z-index: 1; /*move this star to the bottom of the z-index stack*/
16 . left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/
17. }
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
図 2
背景: url(star_rated.gif) 左下;
位置: 絶対;
高さ: 30px;
表示: ブロック;
テキストインデント: -9000px;
z-index: 1;
}
…
背景: url(star_rated.gif) 左上repeat-x;
}
バックグラウンド: url(star_rated.gif) left center;
…
}
各星の幅|各星の幅: 30px;
幅を設定|幅を設定: 3.5 * 30 = 105px
* 例 1: 150 x 30 の星評価システム
* 例 2: 125 x 25 の星評価システム
* 例 3: 25 x 125 の垂直星評価システム
現在の平均値を取得できることがわかります。スコア - 現在のスコア。
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
);
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>
$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 を返します
echo "
"< ;ul class="star-rated">".
"
"
"
"
"
"
"".
"
あなたは以前に投票しました。
}else{
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?
5.最新评分结果提示
echo " Rating: ".@number_format($sum/$count,2)." {".$count." ".$tense." cast}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
