您當前位置：首頁 > web前端 > jscript > 實例代碼：JavaScript打造簡單評分功能

實例代碼：JavaScript打造簡單評分功能

來源：程序員人生發布時間：2013-12-22 08:06:25 閱讀次數：3138次

　　教程今天在藍色理想轉的時候，看到一位仁兄技術非常不錯，就去其獨立博客轉了轉，沒想到收益頗多，尤其看到一款類似星級評分的實例代碼，更牛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.vxbq.cn" 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.vxbq.cn/templets/images/cmt-good0.gif';var vote_image='http://www.vxbq.cn/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關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

實例代碼：JavaScript打造簡單評分功能