html+js+css+php实现点击五星进行评分

最新推荐文章于 2022-08-12 23:10:39 发布

Rascal_Wei

最新推荐文章于 2022-08-12 23:10:39 发布

阅读量3.6k

点赞数 2

本文链接：https://blog.csdn.net/weishuxiao1/article/details/25629049

版权

参考自：http://www.nowamagic.net/javascript/js_FiveStarLevel.php

html全部代码：

<html>
<head>
<!-- 不添加该句可能产生乱码 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引入布局文件 -->
<link rel="stylesheet" type="text/css" href="11.css">
</head>

<body>
	<div class="background" id="background">
		<div class="mainContent" id="mainContent">
			<div class="gen3">
				<div class="shop-rating">
					<span class="title">感觉怎么样？</span>
					<ul class="rating-level" id="stars2">
						<li><a href="javascript:void(0);" class="one-star"
							value="20">20</a></li>
						<li><a href="javascript:void(0);" class="two-stars"
							value="40">40</a></li>
						<li><a href="javascript:void(0);" class="three-stars"
							value="60">60</a></li>
						<li><a href="javascript:void(0);" class="four-stars"
							value="80">80</a></li>
						<li><a href="javascript:void(0);" class="five-stars"
							value="100">100</a></li>
					</ul>
					<span id="stars2-tips" class="result"></span> <input type="hidden"
						id="stars2-input" name="b" value="" size="2">
				</div>
				<!-- 引入js文件 -->
				<script language="javascript" type="text/javascript"  src="11.js"></script>
			</div>
		</div>
</body>
</html>

css全部代码：

ul,li {
	margin: 0;
	padding: 0;
	border: 0;
}
.shop-rating {
	height: 25px;
	overflow: hidden;
	zoom: 1;
	padding: 2px 0;
	position: relative;
	z-index: 999;
	font: 12px Arial;
	color: #000;
	line-height: 1.2em;
}
.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;
}

.shop-rating .result {
	margin-left: 20px;
	padding-top: 2px;
}

.shop-rating .result span {
	color: #ff6d02;
}

.rating-level,.rating-level a {
	background: url(/images/o_star.png) no-repeat scroll 1000px 1000px;
}

.rating-level {
	background-position: 0px 0px;
	width: 120px;
	height: 23px;
	position: relative;
	z-index: 1000;
}

.shop-rating .result em {
	color: #f60;
	font-family: arial;
	font-weight: bold;
}

.rating-level li {
	display: inline;
}

.rating-level a {
	line-height: 23px;
	height: 23px;
	position: absolute;
	top: 0px;
	left: 0px;
	text-indent: -999em;
	*zoom: 1;
	outline: none;
}

.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;
}

js全部代码：

var TB = function() {
	var T$ = function(id) {
		return document.getElementById(id)
	}
	var T$$ = function(r, t) {
		return (r || document).getElementsByTagName(t)
	}
	var Stars = function(cid, rid, hid, config) {
		var lis = T$$(T$(cid), 'li'), curA;
		for ( var i = 0, len = lis.length; i < len; i++) {
			lis[i]._val = i;
			lis[i].onclick = function() {
				//用户点击五角星时生成相应的分数
				score = T$$(this, 'a')[0].getAttribute('value');
				T$(rid).innerHTML = '<em>' + (T$(hid).value = score)
						+ '分</em> - ' + config.info[this._val];
				curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1];

				// ajax传递变量至php 保存到mysql
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.open("GET", "review.php?score=" + score, true);
				xmlhttp.send();

			};
			lis[i].onmouseout = function() {
				curA && (curA.className += config.curcss);
			}
			lis[i].onmouseover = function() {
				curA
						&& (curA.className = curA.className.replace(
								config.curcss, ''));
			}
		}
	};
	return {
		Stars : Stars
	}
}().Stars('stars2', 'stars2-tips', 'stars2-input', {
	'info' : [ '极差', '不怎么好', '一般吧', '不错', '非常好' ],
	'curcss' : ' current-rating',
	'step' : 20
});

php 全部代码：

将点评分数插入到mysql数据库。

<?php
$score = $_GET ["score"];
// 连接mysql
$con = mysql_connect ( '192.168.1.249', 'root', '881234' );
// 判断是否连接成功
if (! $con) {
	die ( 'Could not connect: ' . mysql_error () );
}
mysql_select_db ( "univinfo", $con );
$qu = mysql_query ( "INSERT INTO univ_review_comment_interest_num 
		(univ_id,univ_average_review,univ_review_num,univ_interest_num)
		 VALUES (10001,5," . $score . ",2)" );
mysql_close ( $con );

注意引入外部css，js时的路径。