三零网 www.q3060.com -- 技术、分享、进步
当前位置: > 网络编程 > CSS/HTML > html5实例:非常不错的评分特效的综合应用代码

html5实例:非常不错的评分特效的综合应用代码

投稿:mmqxmq2p  发布时间:2018-01-01  【手机版】  人气:

导读:三零(q3060.com)小编琪琪接下来为你介绍一下关于综合应用的技巧,希望对您有帮助。那么下面我们一起看看,具体内容所述如下:

<html>
<head>
<title>一款非常不错的评分效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="javascript">
/*
   Class that defines a standard ratings component.
*/
// Messages for display above the individual ratings units. The length of the
// array also defines how many units to include in the component.
yg_Ratings.Msgs = new Array
(
   "差",
   "及格",
   "一般",
   "比较好",
   "棒极了"
);
yg_Ratings.Labels = new Array
(
   "1 Star",
   "2 Stars",
   "3 Stars",
   "4 Stars",
   "5 Stars"
);
// Path for all images.
var path = "http://www.zzsky.cn/effect/images/yri_";
yg_Ratings.starbar = "star_";
// Image for set units.
yg_Ratings.UnitY = "yellow.gif";
// Image for set units <= the mouse over point.
yg_Ratings.UnitYMouseOver = "yellow.gif";
// Image for set units > the mouse over point.
yg_Ratings.UnitYMouseLess = "gray.gif";
// Image for unset units.
yg_Ratings.UnitN = "white.gif";
// Image for unset units <= the mouse over point.
yg_Ratings.UnitNMouseOver = "hover.gif";
yg_Ratings.DefaultMsg = " ";
function yg_Ratings(id, button, inputname, defaultval,type)
{
   // The id parameter is the name (a string) of the variable to which the
   // instance is assigned. (The variable is sent along to event handlers,
   // so it must be in the global scope.)
   var i, t;
   var attributes;
   var h1, h2;
   var d = document;
   var style;   
   this.starbar = type + "_";
   this.rating = 0;
   this.showbutton = button;
   if (defaultval < 1 || defaultval > 5) {
 defaultval = 0;
   }
   this.rating = defaultval;
   attributes = 'class="ygrtngs" id="' + id + '" style="' + style + '"';
   h1 = 'onMouseOut="return yg_Ratings_mouseOut(' + id + ');"';
   d.write('<span ' + attributes + ' ' + h1 + '>');
   if (defaultval > 0 && type == "star") {
       d.write('<div class="msg" id="'+id+'_msg">'+yg_Ratings.Msgs[defaultval-1]+'</div>');
   } else {
       d.write('<div class="msg" id="'+id+'_msg" style=\"display:none\">'+yg_Ratings.DefaultMsg+'</div>');
   }
   if (this.showbutton) { 
      d.write('<span><strong>Rate it:</strong></span>');
   }
   for (i = 1; i <= yg_Ratings.Msgs.length; i++)
   {
      h1 = 'onMouseOver="return yg_Ratings_mouseOver(' + id + ', ' + i + ');"';
      h2 = 'onClick="return yg_Ratings_click(' + id + ', ' + i + ');"';
      d.write('<span class="unit "' + h1 + ' ' + h2 + '>');
      if (i <= defaultval) {
         d.write('<img src="' + path + this.starbar + yg_Ratings.UnitY + '" />');
      } else {
         d.write('<img src="' + path + this.starbar + yg_Ratings.UnitN + '" />');
      }
      d.write('</span>');
   }
   if(defaultval){
 d.write('<input type="hidden" name="'+inputname+'" id="input_'+id+'" value="' + defaultval + '" />');
   } else {
 d.write('<input type="hidden" name="'+inputname+'" id="input_'+id+'" />');    
   }
   this.input = document.getElementById('input_'+id);
   d.write('</span>');
   this.parent = document.getElementById(id);
   this.images = this.parent.getElementsByTagName("img");
   this.msg = document.getElementById(id + '_msg');
   this.id = id;
   var children = this.msg.childNodes;
   var node;
   for (var i = 0; i <  children.length; i++)
   {
      node = children[i];
      if (node.nodeType == 3)
      {
            this.DefaultMsg = node.nodeValue;
      }
   } 
}
function yg_Ratings_set(n, oflag)
{
   if (arguments.length < 2)
      oflag = true;
   this.rating = n;
   this.DefaultMsg = yg_Ratings.Msgs[n-1];
//   if (this.showbutton) {
    this.showBtn("btnSave");
//   }
   this.update(n, oflag);
}
function yls_Ratings_showSubmit(sBtn) {
    var saveButton = document.getElementById(sBtn);
    if(saveButton != null) {
        saveButton.style.display="block";
    }
}
function yg_Ratings_setMsg(m)
{
   var children = this.msg.childNodes;
   var node;
   for (var i = 0; i < children.length; i++)
   {
      node = children[i];
      if (node.nodeType == 3)
      {
         // Using 0xA0 prevents the browser from collapsing empty messages.
            node.nodeValue = m;
      }
   }
}
function yg_Ratings_get()
{
   return this.rating;
}
function yg_Ratings_update(n, oflag)
{
   // The oflag parameter is true when the mouse is outside of the ratings
   // component. The n parameter is the 
   if (this.starbar == 'star_') {
    if (oflag) {
    this.setMsg(this.DefaultMsg);
    } else {
    this.setMsg(yg_Ratings.Msgs[n - 1]);
    }
   }
   if (n == this.rating) {
      this.input.setAttribute("value", n);
   }
   for (i = 1; i <= yg_Ratings.Msgs.length; i++)
   {
      if (oflag)
      {
         if (i <= this.rating)
            this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitY;
         else
            this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitN;
      }
      else
      {
         if (i <= n)
         {
            if (i <= this.rating)
               this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitYMouseOver;
            else
               this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitNMouseOver;
         }
         else
         {
            if (i <= this.rating)
               this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitYMouseLess;
            else
               this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitN;
         }
      }
   }
   return true;
}
function yg_Ratings_click(obj, n)
{
   obj.set(n, false);
   return true;
}
function yg_Ratings_mouseOver(obj, n)
{
   obj.update(n, false);
   return true;
}
function yg_Ratings_mouseOut(obj)
{
   obj.update(0, true);
   return true;
}
yg_Ratings.prototype.set = yg_Ratings_set;
yg_Ratings.prototype.setMsg = yg_Ratings_setMsg;
yg_Ratings.prototype.get = yg_Ratings_get;
yg_Ratings.prototype.update = yg_Ratings_update;
yg_Ratings.prototype.showBtn = yls_Ratings_showSubmit;
</script>
访问速度:
<script language="javascript">
   if (document.getElementById)
    {
    // Support for Class A.
    _ratings_proj1_ = new yg_Ratings("_ratings_proj1_", false, "proj1", 0, "star");
    }
   else
    {
    // Support for poor DOM (low grade).    
    document.write('<small><input type="radio" name="proj1" value="1">');
    document.write('<input type="radio" name="proj1" value="2">');
    document.write('<input type="radio" name="proj1" value="3">');
    document.write('<input type="radio" name="proj1" value="4">');
    document.write('<input type="radio" name="proj1" value="5"></small>');
    } 
</script>
<noscript><small>
<input type="radio" name="proj1" value="1">
<input type="radio" name="proj1" value="2">
<input type="radio" name="proj1" value="3">
<input type="radio" name="proj1" value="4">
<input type="radio" name="proj1" value="5">
</small></noscript><br>
性价比例:
<script language="javascript">  
   if (document.getElementById)
    {
    // Support for Class A.
    _ratings_proj2_ = new yg_Ratings("_ratings_proj2_", false, "proj2", 0, "star");
    }
   else
    {
    // Support for poor DOM (low grade).    
    document.write('<small><input type="radio" name="proj2" value="1">');
    document.write('<input type="radio" name="proj2" value="2">');
    document.write('<input type="radio" name="proj2" value="3">');
    document.write('<input type="radio" name="proj2" value="4">');
    document.write('<input type="radio" name="proj2" value="5"></small>');
    }
   
</script>
<noscript><small>
<input type="radio" name="proj2" value="1">
<input type="radio" name="proj2" value="2">
<input type="radio" name="proj2" value="3">
<input type="radio" name="proj2" value="4">
<input type="radio" name="proj2" value="5">
</small></noscript><br>
服务质量:
<script language="javascript">
   if (document.getElementById)
    {
    // Support for Class A.
    _ratings_proj3_ = new yg_Ratings("_ratings_proj3_", false, "proj3", 0, "star");
    }
   else
    {
    // Support for poor DOM (low grade).    
    document.write('<small><input type="radio" name="proj3" value="1">');
    document.write('<input type="radio" name="proj3" value="2">');
    document.write('<input type="radio" name="proj3" value="3">');
    document.write('<input type="radio" name="proj3" value="4">');
    document.write('<input type="radio" name="proj3" value="5"></small>');
    }
   
</script>
<noscript><small>
<input type="radio" name="proj3" value="1">
<input type="radio" name="proj3" value="2">
<input type="radio" name="proj3" value="3">
<input type="radio" name="proj3" value="4">
<input type="radio" name="proj3" value="5">
</small></noscript><br>
安全性能:
<script language="javascript">  
   if (document.getElementById)
    {
    // Support for Class A.
    _ratings_proj4_ = new yg_Ratings("_ratings_proj4_", false, "proj4", 0, "star");
    }
   else
    {
    // Support for poor DOM (low grade).    
    document.write('<small><input type="radio" name="proj4" value="1">');
    document.write('<input type="radio" name="proj4" value="2">');
    document.write('<input type="radio" name="proj4" value="3">');
    document.write('<input type="radio" name="proj4" value="4">');
    document.write('<input type="radio" name="proj4" value="5"></small>');
    }
   
</script>
<noscript><small>
<input type="radio" name="proj4" value="1">
<input type="radio" name="proj4" value="2">
<input type="radio" name="proj4" value="3">
<input type="radio" name="proj4" value="4">
<input type="radio" name="proj4" value="5">
</small></noscript>
</body>
</html>

<p align="center">本特效由 <a href="http://www.q3060.com">三零网</a>丨 收集于互联网,只为兴趣与学习交流,不作商业用途。</p>

结语:以上就是分享给大家的综合应用内容了,希望大家多多支持三零网站。更多知识点,可以能过本站网页顶端的搜索或进入相关专题,如果有任何疑问都可以一起留言交流。

●【往下看,下一页更精彩】●
1  2  3  4  5  6  7  下一页 
延伸阅读:
·html5实例:JS配合CSS实现的个性漂亮滚动条的综合应用代码
·html5实例:用一款按钮把输入框中一段英文的首字母全部大写的综合应用代码
·html5实例:漂亮的加入收藏夹和收藏到网摘特效的综合应用代码
·html5实例:颜色选择程序脚本,鼠标指向即显示颜色代码的综合应用代码
·html5实例:用图片制作的选色器的综合应用代码
·html5实例:三种有趣的方块滑行移动特效的综合应用代码
·html5实例:45种JavaScript缓冲特效集合的综合应用代码
·html5实例:仿windows2003开机的loading特效的综合应用代码
·html5实例:CSS控制滚动条的位置及文本方向的综合应用代码
·html5实例:一款不错的跳转首页的网站404错误页面的综合应用代码
  
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,请收藏本网站!
大家感兴趣的内容
最新的内容
热门搜索
三零网 | 网站地图| 最近更新 | 关于我们 | 联系方式 | |

Copyright © 2012-2020,Q3060.COM All Rights Reserved.