参考自: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全部代码:
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时的路径。
- <pre code_snippet_id="340821" snippet_file_name="blog_20140512_3_3030840" name="code" class="javascript"></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
-
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。