Gunakan css untuk membuat rating bintang_Pertukaran pengalaman

Mari kita lihat kesannya dahulu

Langkah 1: XHTML

 
• 1
li> ;2

• 3
 
 
• 4

 
• 5

Hanya teknologi statik akan diperkenalkan di sini dan kemudian Aplikasi sistem akan diberikan Anda juga boleh menambah program itu sendiri untuk mencubanya Anda juga boleh menggunakan ajax untuk mencipta kesan cantik

Langkah 2: Grafik

Untuk menjimatkan ruang dan lebar jalur anda, kami menggunakan imej gif, yang merupakan butang pemarkahan.

Gambar

Langkah 3: CSS

.penarafan bintang{ gaya senarai: tiada; /* matikan peluru imej senarai lalai*/
margin: 3px; cukup pasti OL mempunyai padding lalai sebanyak 0px, tetapi kami akan menetapkannya kepada 0px hanya untuk selamat*/
lebar: 100px /*Senarai ini ialah 5 bintang, setiap bintang ialah 20px, oleh itu ia mestilah 5 x 20px = 100px lebar*/
tinggi: 20px; /* Ketinggian setiap bintang ialah 20px kerana ini ialah senarai mendatar, kami akan menetapkan ketinggian senarai kepada ketinggian bintang.*/
kedudukan: relatif; /*Sangat penting. Kami akan menggunakan kedudukan mutlak kemudiannya , senarai itu akan kelihatan mempunyai lima bintang.*/
}


Mengikut kod yang kami tahu:

mengalih keluar margin dan padding ul dan list -style , mentakrifkan penghasilan elemen butang apabila blok 20px tinggi dan 100px lebar
turun. Yang berikut ialah css

.star-rating li{

. padding:0px; / * no padding at all*/

margin:0px; /* no margin at all*/ /**/ /*Penggodam backlash, ini menyebabkan IE5 Mac TIDAK melihat peraturan ini*/
float: left; pelayar, kita akan terapung ke kiri, ini membuat senarai mendatar*/
/* */ /* tamatkan penggodaman IE5 Backslash*/
}


Kod ini membenarkan li untuk disusun secara mendatar, dan Selesaikan pepijat IE5 MAC

Warisi gaya elemen butang di atas, dan kemudian tentukan tindakan tetikus Berikut ialah css

.star-rating li a. {

display:block; /* kami mahukan item blok, supaya kami boleh mengacaukan ketinggian dan lebarnya*/

width:20px /* mudah, kami mahu lebarnya sama dengan lebar bintang*/ tinggi: 20px ; /* sama dengan lebar*/
hiasan teks: /* keluarkan garis bawah daripada pautan*/
teks-indent: -9000px; inden teks dari skrin menggunakan [url =http://www.php.cn/]teknik penggantian imej[/url], kami tidak mahu melihat teks lagi.*/
z-index: 20 ; /*kita akan kembali ke kedudukan */
ini: mutlak; *sekali lagi, kami tidak memerlukan sebarang padding*/
background-image:none; /* kami tidak akan menunjukkan bintang*/
}

13. .star-rating li a :hover{
14. latar belakang: url(star_rating.gif) kiri bawah; /*ini adalah tempat ajaibnya*/
15. z-index: 1; tindanan z-index*/
16 kiri: 0px; /*gerakkan bintang ini ke kiri, sejajar dengan sisi item induk UL*/
17. }

Seterusnya kita perlu mempertimbangkan cara untuk memaparkan penarafan bintang yang berbeza, tiga bintang empat bintang Apakah prinsipnya. bintang bintang.

Berikut ialah css

.penarafan bintang a.satu bintang{
kiri: 0px;
}
. star -rating a.one-star:hover{
width:20px;
}
.star-rating a.dua bintang{
left:20px;
}
. bintang -penarafan a.dua-bintang:tuding{
lebar: 40px;
}
.penarafan bintang a.tiga-bintang{
kiri: 40px;
}
. bintang -penarafan a.tiga-bintang:tuding{
lebar: 60px;
}
.penarafan bintang a.empat-bintang{
kiri: 60px;
}
. bintang -penarafan a.empat-bintang:tuding{
lebar: 80px;
}
.penarafan bintang a.lima bintang{
kiri: 80px;
}
. star -rating a.five-stars:hover{
lebar: 100px;
}

Pada ketika ini, pengeluaran selesai

Yang pertama model Mengabaikan keadaan separuh bintang dan tiada penarafan bintang awal, kami akan menyelesaikan masalah ini seterusnya.

Langkah 1. Semak dalam tindakan

Gambar 1

Semak dalam tindakan

Langkah 2: XHTML

• Bintang.


• 1< ;/li>
  
• 2


• 3


• 4


• 5

Dan yang pertama Struktur model adalah serupa, satu-satunya perbezaan ialah:

Pada masa ini 3.5/5 Bintang.

Tentukan nilai awal

Langkah 3: Imej Bintang

Kami membuat imej dengan tiga bintang. Bintang pertama ialah nilai nol, dan yang kedua bintang ialah nilai nol Yang pertama ialah nilai yang akan dipilih, dan yang ketiga ialah nilai sebenar.

Rajah 2

Langkah 4: CSS, Keajaiban

.star-rating li.current -rating{
latar belakang: url(star_rating.gif) kiri bawah;
kedudukan: mutlak;
tinggi: 30px;
paparan: blok;
text-indent: -9000px;
z-index: 1;
}

Dia mentakrifkan nilai awal Untuk mengelakkan mewarisi kedudukan relatif bekas ul, kedudukan: mutlak digunakan ialah height:30px; Yang lain menyembunyikan teks dan menentukan penjajaran.

css nilai nol

.penarafan bintang{
…
latar belakang: url(star_rating.gif) atas kiri ulang-x;
}

Pilih nilai css

.star-rating li a:hover{
latar belakang: url(star_rating.gif) kiri tengah;
…
}

Sudah tentu nilai awal akan berubah dengan pemilihan, jadi bagaimana untuk mencapai perubahannya?

gaya = "width:105px;">Pada masa ini 3.5/5 Bintang.

Selepas membaca kod ini, saya percaya anda akan tahu sebabnya! ? Apakah pengiraan?

Penilaian Purata|Purata: 3.5
Lebar Setiap Bintang|Lebar setiap bintang: 30px;
Tetapkan lebar kepada|Tetapkan lebar kepada: 3.5 * 30 = 105px

Mari kita lihat model baharu ini
* Contoh 1: Sistem penarafan bintang 150 x 30
* Contoh 2: Sistem penarafan bintang 125 x 25
* Contoh 3: Penarafan bintang menegak 25 x 125 sistem

Kami menggunakan php untuk melaksanakannya

Yang pertama ialah prinsip pelaksanaan

Mencapai penarafan bintang dari sebelumnya css I, II, tetapi dapat dilihat bahawa selagi onclick boleh dikenal pasti dan data direkodkan dan disimpan dalam pangkalan data, dan kemudian data dipanggil dari pangkalan data untuk pengiraan,
anda boleh mendapatkan purata semasa skor - markah semasa.

1. Berikut ialah sql untuk mencipta pangkalan data

CREATE TABLE ratings(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
jumlah_undi INT BUKAN NULL,
jumlah_nilai INT BUKAN NULL,
yang_id INT BUKAN NULL,
yang_jadual VARCHAR(255),
digunakan_ips LONGTEXT NULL
);

>

2. Rujukan fail parameter

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

3

$rating_posted=$_GET['undi'];//dilalui pembolehubah oleh nilai bintang
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")atau die(" Ralat: " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /berapa jumlah undian
$current_rating=$numbers['total_value'];//total number of rating added together and stored
$sum=$rating_posted+$current_rating;// tambah nilai undian semasa dan jumlah nilai undian
$tense=($count==1) ? "undi" : "undi";//undi bentuk jamak/undi
$voted=@mysql_fetch_assoc(@mysql_query("PILIH tajuk DARI $tableName WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Padanan corak ip:cadangkan oleh Bramus! http://www.php.cn/ - pembolehubah ini mencari melalui alamat ip sebelumnya yang telah mengundi dan mengembalikan benar atau salah

jika($voted){
gema "

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

".
"

1

".
"

2

".
"

3

".
"

4< ;/li> ;".
"

5

".
"".
"

Rating: {".$count." ".$tense}
Anda telah mengundi sebelum ini. p>

";//tunjukkan nilai semasa undian dengan nombor semasa
}lain{

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

if($sum==0){
$added=0;//menyemak sama ada undian pertama telah dikira
}lain{
$added=$count +1; //menaikkan bilangan undian semasa
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if ia adalah tatasusunan iaitu sudah mempunyai entri tolak dalam nilai lain
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//untuk entri pertama
}

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

gema "

Penilaian: ".@ number_format($sum/$added,2)." {".$added." ".$tense." p>

";//tunjukkan nilai undian yang dikemas kini
}lain{
?>

4. Program Penilaian Pelawat

 
  
  
  
 

Bagaimana jelaskah tutorial ini?

• Penilaian semasa

    
• 1

    
• 2

    
• 3

    
• 4

    
• 5

> ;

5.最新评分结果提示

gema "

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

";//show nilai semasa undian yang dikemas kini
} // end isset dapatkan undian 
} //end voted true, false
?>