search

Home >Backend Development >PHP Tutorial >PHP评分系统

PHP评分系统

WBOY
WBOYOriginal
2016-06-23 14:31:124399browse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>Title</title><style type="text/css"><!--body {background:#fff;text-align:center;margin:0 auto;padding: 0;font:12px Arial;color:#000;line-height:1.2em}div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}table,td,tr,th{font-size:12px;}/* 星级评分 */.shop-rating {    height: 25px;    overflow: hidden;    zoom: 1;    padding: 2px 0px;    position: relative;    z-index: 999;}.shop-rating span {    height: 23px;    display: block;    line-height: 23px;    float: left;}.shop-rating span.title {    width: 125px;    text-align: right;    margin-right: 5px;}.shop-rating ul {    float: left;	margin:0;padding:0}.shop-rating .result {    margin-left: 20px;    padding-top: 2px;}.shop-rating .result span {	color: #ff6d02;}.shop-rating .result em {    color: #f60;    font-family: arial;    font-weight: bold;}.shop-rating .result strong {	color: #666666;	font-weight: normal;}.rating-level,.rating-level a {    background: url(startpic/star_v2.png) no-repeat scroll 1000px 1000px;}.rating-level {    background-position: 0px 0px;    width: 120px;    height: 23px;    position: relative;    z-index: 1000;}.rating-level li {    display: inline;}.rating-level a {    line-height: 23px;    height: 23px;    position: absolute;    top: 0px;    left: 0px;    text-indent: -999em;    *zoom: 1;}.rating-level a.one-star {    width: 20%;    z-index: 6;}.rating-level a.two-stars {width: 40%;z-index: 5;}.rating-level a.three-stars {    width: 60%;    z-index: 4;}.rating-level a.four-stars {    width: 80%;    z-index: 3;}.rating-level a.five-stars {    width: 100%;    z-index: 2;}.rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;}.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}--></style></head><body><div class="shop-rating">	<span class="title">卖家服务的态度：</span>	<ul class="rating-level" id="stars1">		<li><a class="one-star" star:value="1" href="#">1</a></li>		<li><a class="two-stars" star:value="2" href="#">2</a></li>		<li><a class="three-stars" star:value="3" href="#">3</a></li>		<li><a class="four-stars" star:value="4" href="#">4</a></li>		<li><a class="five-stars" star:value="5" href="#">5</a></li>	</ul>	<span class="result" id="stars1-tips"></span>    <input type="hidden" id="stars1-input" name="b" value="" size="2" /></div><div class="shop-rating">	<span class="title">宝贝与描述相符：</span>	<ul class="rating-level" id="stars2">		<li><a class="one-star" star:value="1" href="#">1</a></li>		<li><a class="two-stars" star:value="2" href="#">2</a></li>		<li><a class="three-stars" star:value="3" href="#">3</a></li>		<li><a class="four-stars" star:value="4" href="#">4</a></li>		<li><a class="five-stars" star:value="5" href="#">5</a></li>	</ul>	<span class="result" id="stars2-tips"></span>    <input type="hidden" id="stars2-input" name="b" value="" size="2" /></div><div class="shop-rating">	<span class="title">卖家发货的速度：</span>	<ul class="rating-level" id="stars3">		<li><a class="one-star" star:value="1" href="#">1</a></li>		<li><a class="two-stars" star:value="2" href="#">2</a></li>		<li><a class="three-stars" star:value="3" href="#">3</a></li>		<li><a class="four-stars" star:value="4" href="#">4</a></li>		<li><a class="five-stars" star:value="5" href="#">5</a></li>	</ul>	<span class="result" id="stars3-tips"></span>    <input type="hidden" id="stars3-input" name="b" value="" size="2" /></div><div class="shop-rating">	<span class="title">物流公司的速度：</span>	<ul class="rating-level" id="stars4">		<li><a class="one-star" star:value="1" href="#">1</a></li>		<li><a class="two-stars" star:value="2" href="#">2</a></li>		<li><a class="three-stars" star:value="3" href="#">3</a></li>		<li><a class="four-stars" star:value="4" href="#">4</a></li>		<li><a class="five-stars" star:value="5" href="#">5</a></li>	</ul>	<span class="result" id="stars4-tips"></span>    <input type="hidden" id="stars4-input" name="b" value="" size="2" /></div><div class="shop-rating">	<span class="title">物流公司的服务：</span>	<ul class="rating-level" id="stars5">		<li><a class="one-star" star:value="20" href="#">20</a></li>		<li><a class="two-stars" star:value="40" href="#">40</a></li>		<li><a class="three-stars" star:value="60" href="#">60</a></li>		<li><a class="four-stars" star:value="80" href="#">80</a></li>		<li><a class="five-stars" star:value="100" href="#">100</a></li>	</ul>	<span class="result" id="stars5-tips"></span>	<input type="hidden" id="stars5-input" name="b" value="" size="2" /></div><!-- END 星级评分 --><input type="button" value="test" onclick="teststars()" /><script type="text/javascript">var Class = {	create: function() {		return function() { this.initialize.apply(this, arguments); }	}}var Extend = function(destination, source) {	for (var property in source) {		destination[property] = source[property];	}}function stopDefault( e ) {	 if ( e && e.preventDefault ){		e.preventDefault();	}else{		window.event.returnValue = false;	}	return false;} /** * 星星打分组件 * * @author	Yunsd * @date	2010-7-5 */var Stars = Class.create();Stars.prototype = {	initialize: function(star,options) {		this.SetOptions(options); //默认属性		var flag = 999; //定义全局指针		var isIE = (document.all) ? true : false; //IE?		var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表		var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果		var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示		var nowClass = " " + this.options.nowClass; // 定义选中星星样式名		var tipsTxt = this.options.tipsTxt; // 定义提示文案		var len = starlist.length; //星星数量				for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过			starlist[i].value = i;			starlist[i].onclick = function(e){				stopDefault(e);				this.className = this.className + nowClass;				flag = this.value;				input.value = this.getAttribute("star:value");				tips.innerHTML = tipsTxt[this.value]			}			starlist[i].onmouseover = function(){				if (flag< 999){					var reg = RegExp(nowClass,"g");					starlist[flag].className = starlist[flag].className.replace(reg,"")				}			}			starlist[i].onmouseout = function(){				if (flag< 999){					starlist[flag].className = starlist[flag].className + nowClass;				}			}		};		if (isIE){ //FIX IE下样式错误			var li = document.getElementById(star).getElementsByTagName('li');			for (var i = 0, len = li.length; i < len; i++) {				var c = li[i];				if (c) {					c.className = c.getElementsByTagName('a')[0].className;				}			}		}	},	//设置默认属性	SetOptions: function(options) {		this.options = {//默认值			Input:			"",//设置触保存分数的INPUT			Tips:			"",//设置提示文案容器			nowClass:	"current-rating",//选中的样式名			tipsTxt:		["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案		};		Extend(this.options, options || {});	}}/* For TEST */function teststars(){	alert('卖家服务的态度：'+document.getElementById("stars1-input").value+'分.\n宝贝与描述相符：'+document.getElementById("stars2-input").value+'分.\n卖家发货速度：'+document.getElementById("stars3-input").value+'分.\n物流公司速度：'+document.getElementById("stars4-input").value+'分.\n物流公司态度：'+document.getElementById("stars5-input").value+'分.');}var Stars1 = new Stars("stars1")var Stars2 = new Stars("stars2");var Stars2 = new Stars("stars3");var Stars2 = new Stars("stars4",{nowClass:"current-rating",tipsTxt:["100分-严重不合格","200分-不合格","300分-合格","400分-优秀","500分-完美"]});var Stars2 = new Stars("stars5");</script> </body></html>

　　

PHP使用如下：

conn.php 链接数据库文件我就不写了。

<?php	$sell=mysql_query("select * from sjpj where sjid='$_GET[id]'");	$dian=mysql_fetch_array($sell);	$num=mysql_num_rows($sell);		if($num==0){			$fen=0;			$num=1;		}else{				$sq="select sum(fen) from sjpj  where sjid='$_GET[id]'";				$res=mysql_query($sq);				$row1=mysql_fetch_row($res);				$fen=$row1[0];		}	  $fen=$fen/$num;?>

如果是多个的话可以直接加 sum()　

显示html文件：

<img  src="images/space000.gif" title="<?php echo  round($fen,1);? alt="PHP评分系统" >分" class="star level<?php echo round($fen);?>" />

space000.gif（这个图片就是一个 1px的图片）：

　　

css样式：

.star{	width:124px;	height:27px;	background: url(../images/stat.png) 0 0;	cursor:pointer;	position:relative;}.level0{background-position:-0px -0px;}.level1{background-position:0px -29px;}.level2{background-position:0px -58px;}.level3{background-position:0px -87px;}.level4{background-position:0px -116px;}.level5{background-position:0px -145px;}

　　

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：PHP模块编写Next article：php排序算法

Related articles

See more