您当前位置：首页 > web前端 > jscript > 实例代码：JavaScript打造简单评分功能

实例代码：JavaScript打造简单评分功能

来源：程序员人生发布时间：2013-12-22 08:06:25 阅读次数：2940次

　　教程今天在蓝色理想转的时候，看到一位仁兄技术非常不错，就去其独立博客转了转，没想到收益颇多，尤其看到一款类似星级评分的实例代码，更牛x的是，实现了小数！我们来看下面的代码。

<!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><FCK:meta http-equiv="Content-Type" content="text/html; charset=GBK" /><FCK:meta name="author" content="Stri" /><link rel="start" href="http://www.wfuyu.com" title="Home" /><title>评分插件</title><script type="text/javascript">var userAgent = navigator.userAgent.toLowerCase();var is_opera = userAgent.indexOf('opera') != -1 && opera.version();var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);function $(id){ return document.getElementById(id); }//图片var vote_image0='http://www.wfuyu.com/templets/images/cmt-good0.gif';var vote_image='http://www.wfuyu.com/templets/images/cmt-good.gif';//加载图片window.onload=function onload_img(){var vote_div=document.getElementsByTagName("body")[0]; for(var i=1;i<=5;i++){ var vote_img=document.createElement('img'); vote_div.appendChild(vote_img); vote_img.setAttribute("src",vote_image0); vote_img.setAttribute("id","yes_"+i); vote_img.setAttribute("title",i+"分"); vote_img.style.cursor="pointer"; if(is_ie){ vote_img.setAttribute("onmouseover",function(){put_fs(this);}); vote_img.setAttribute("onmouseout",function(){out_fs(this);}); vote_img.setAttribute("onclick",function(){is_fs(this);}); } else{ vote_img.setAttribute("onmouseover",'put_fs(this)'); vote_img.setAttribute("onmouseout",'out_fs(this)'); vote_img.setAttribute("onclick",'is_fs(this)'); } } }function put_fs(id){ var str=id.id; var obj=str.split("_")[1]; for(var i=1;i<=obj;i++){ $("yes_"+i).src=vote_image; } } function out_fs(id){ var str=id.id; var obj=str.split("_")[1]; for(var i=1;i<=obj;i++){ $("yes_"+i).src=vote_image0; } }function is_fs(id){ var str=id.id; var obj=str.split("_")[1]; var vote_span=document.createElement("div"); out_fs=function(){return false;}; put_fs=function(){return false;};for(var i=1;i<=obj;i++){ $("yes_"+i).src=vote_image;}var vote_span_text="你评了"+obj+"分！";document.getElementsByTagName("body")[0].innerHTML+=vote_span_text;is_fs=function(){return false;};}</script></head><body></body></html>
提示：可修改后代码再运行!

　　怎么不错吧？想不想看看带小数的...请点击下一页阅读。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 中国的网页Web2.0：一场奢华的春梦！

下一篇 Perl操作mysql数据库的方法

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点