logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 小马过河717 2016-08-25

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

html全部代码：

  1. <html>  
  2. <head>  
  3. <!-- 不添加该句可能产生乱码 -->  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <!-- 引入布局文件 -->  
  6. <link rel="stylesheet" type="text/css" href="11.css">  
  7. </head>  
  8.   
  9. <body>  
  10.     <div class="background" id="background">  
  11.         <div class="mainContent" id="mainContent">  
  12.             <div class="gen3">  
  13.                 <div class="shop-rating">  
  14.                     <span class="title">感觉怎么样？</span>  
  15.                     <ul class="rating-level" id="stars2">  
  16.                         <li><a href="javascript:void(0);" class="one-star"  
  17.                             value="20">20</a></li>  
  18.                         <li><a href="javascript:void(0);" class="two-stars"  
  19.                             value="40">40</a></li>  
  20.                         <li><a href="javascript:void(0);" class="three-stars"  
  21.                             value="60">60</a></li>  
  22.                         <li><a href="javascript:void(0);" class="four-stars"  
  23.                             value="80">80</a></li>  
  24.                         <li><a href="javascript:void(0);" class="five-stars"  
  25.                             value="100">100</a></li>  
  26.                     </ul>  
  27.                     <span id="stars2-tips" class="result"></span> <input type="hidden"  
  28.                         id="stars2-input" name="b" value="" size="2">  
  29.                 </div>  
  30.                 <!-- 引入js文件 -->  
  31.                 <script language="javascript" type="text/javascript"  src="11.js"></script>  
  32.             </div>  
  33.         </div>  
  34. </body>  
  35. </html>  

css全部代码：

  1. ul,li {  
  2.     margin: 0;  
  3.     padding: 0;  
  4.     border: 0;  
  5. }  
  6. .shop-rating {  
  7.     height: 25px;  
  8.     overflow: hidden;  
  9.     zoom: 1;  
  10.     padding: 2px 0;  
  11.     position: relative;  
  12.     z-index: 999;  
  13.     font: 12px Arial;  
  14.     color: #000;  
  15.     line-height: 1.2em;  
  16. }  
  17. .shop-rating span {  
  18.     height: 23px;  
  19.     display: block;  
  20.     line-height: 23px;  
  21.     float: left;  
  22. }  
  23.   
  24. .shop-rating span.title {  
  25.     width: 125px;  
  26.     text-align: right;  
  27.     margin-right: 5px;  
  28. }  
  29.   
  30. .shop-rating ul {  
  31.     float: left;  
  32. }  
  33.   
  34. .shop-rating .result {  
  35.     margin-left: 20px;  
  36.     padding-top: 2px;  
  37. }  
  38.   
  39. .shop-rating .result span {  
  40.     color: #ff6d02;  
  41. }  
  42.   
  43. .rating-level,.rating-level a {  
  44.     background: url(/images/o_star.png) no-repeat scroll 1000px 1000px;  
  45. }  
  46.   
  47. .rating-level {  
  48.     background-position: 0px 0px;  
  49.     width: 120px;  
  50.     height: 23px;  
  51.     position: relative;  
  52.     z-index: 1000;  
  53. }  
  54.   
  55. .shop-rating .result em {  
  56.     color: #f60;  
  57.     font-family: arial;  
  58.     font-weight: bold;  
  59. }  
  60.   
  61. .rating-level li {  
  62.     display: inline;  
  63. }  
  64.   
  65. .rating-level a {  
  66.     line-height: 23px;  
  67.     height: 23px;  
  68.     position: absolute;  
  69.     top: 0px;  
  70.     left: 0px;  
  71.     text-indent: -999em;  
  72.     *zoom: 1;  
  73.     outline: none;  
  74. }  
  75.   
  76. .rating-level a.one-star {  
  77.     width: 20%;  
  78.     z-index: 6;  
  79. }  
  80.   
  81. .rating-level a.two-stars {  
  82.     width: 40%;  
  83.     z-index: 5;  
  84. }  
  85.   
  86. .rating-level a.three-stars {  
  87.     width: 60%;  
  88.     z-index: 4;  
  89. }  
  90.   
  91. .rating-level a.four-stars {  
  92.     width: 80%;  
  93.     z-index: 3;  
  94. }  
  95.   
  96. .rating-level a.five-stars {  
  97.     width: 100%;  
  98.     z-index: 2;  
  99. }  
  100.   
  101. .rating-level .current-rating,.rating-level a:hover {  
  102.     background-position: 0 -28px  
  103. }  
  104.   
  105. .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  
  106.     {  
  107.     background-position: 0 -116px;  
  108. }  
  109.   
  110. .rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating  
  111.     {  
  112.     background-position: 0 -28px;  
  113. }  

js全部代码：

[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. var TB = function() {  
  2.     var T$ = function(id) {  
  3.         return document.getElementById(id)  
  4.     }  
  5.     var T$$ = function(r, t) {  
  6.         return (r || document).getElementsByTagName(t)  
  7.     }  
  8.     var Stars = function(cid, rid, hid, config) {  
  9.         var lis = T$$(T$(cid), 'li'), curA;  
  10.         for ( var i = 0, len = lis.length; i < len; i++) {  
  11.             lis[i]._val = i;  
  12.             lis[i].onclick = function() {  
  13.                 //用户点击五角星时生成相应的分数  
  14.                 score = T$$(this, 'a')[0].getAttribute('value');  
  15.                 T$(rid).innerHTML = '<em>' + (T$(hid).value = score)  
  16.                         + '分</em> - ' + config.info[this._val];  
  17.                 curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1];  
  18.   
  19.                 // ajax传递变量至php 保存到mysql  
  20.                 var xmlhttp;  
  21.                 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
  22.                     xmlhttp = new XMLHttpRequest();  
  23.                 } else {// code for IE6, IE5  
  24.                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  25.                 }  
  26.                 xmlhttp.open("GET", "review.php?score=" + score, true);  
  27.                 xmlhttp.send();  
  28.   
  29.             };  
  30.             lis[i].onmouseout = function() {  
  31.                 curA && (curA.className += config.curcss);  
  32.             }  
  33.             lis[i].onmouseover = function() {  
  34.                 curA  
  35.                         && (curA.className = curA.className.replace(  
  36.                                 config.curcss, ''));  
  37.             }  
  38.         }  
  39.     };  
  40.     return {  
  41.         Stars : Stars  
  42.     }  
  43. }().Stars('stars2', 'stars2-tips', 'stars2-input', {  
  44.     'info' : [ '极差', '不怎么好', '一般吧', '不错', '非常好' ],  
  45.     'curcss' : ' current-rating',  
  46.     'step' : 20  
  47. });  

php 全部代码：

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

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

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



[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <pre code_snippet_id="340821" snippet_file_name="blog_20140512_3_3030840" name="code" class="javascript"></pre>  
  2. <pre></pre>  
  3. <pre></pre>  
  4. <pre></pre>  
  5. <pre></pre>  
  6.      

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 小马过河717 > 《编程》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多