先看演示:DEMO
闲来没事,用ofc搞了一个投票小程序,进一步巩固一下ofc和jquery,试验一下ofc里加入onclick时间的效果,果然很好用,而且调用js的功能函数相当方便,只需在json数据里加入“”on-click”,”myfunction(parm)””就可以,投票程序代码写的很简单,没有做什么优化。
废话少说,看代码:
本程序是需要投票统计网友来源,有四个选项分别是:百度、谷歌、雅虎、其他,数据以data.txt文本存放,格式为:2,5,12,6。
数据处理:setvote.php
session_start(); if($_REQUEST["vote"]!=0) { //处理统一IP投票的问题,这里这个方法很不好,各位大大自己去修正吧,我去打酱油了:-) if(isset($_SESSION['ip'])) { echo ' { "title":{ "text":"IP地址:'.$_SESSION['ip'].',您已经投票了 谢谢支持", "style":"{font-size: 20px;color:#FF0000;}" }}'; } else { $vote = $_REQUEST["vote"];//取得投票参数 $_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];//记录投票者IP $data=file_get_contents("data.txt");//读取投票数据 list($a, $b, $c,$d) = explode(",",$data);//分解数据 //处理传递过来的投票参数 switch($vote) { case '1': $a +=1; break; case '2': $b +=1; break; case '3': $c +=1; break; case '4': $d +=1; break; } //逗号连接数据并写入投票数据到文件 $newdata = $a.','.$b.','.$c.','.$d; file_put_contents("data.txt",$newdata,LOCK_EX); $totalvote = ($a+$b+$c+$d); echo ' { "title":{ "text":"投票:您是从哪里知道IM502的? 已经有'.$totalvote.'位网友投票", "style":"{font-size: 18px;}" }, "elements":[ { "type": "pie", "colours": ["#d01f3c","#356aa0","#C79810","#93C96B"], "alpha": 0.6, "border": 2, "animate": 0, "start-angle": 35, "values" : [ {"value":'.$a.',"font-size":14,"colours":"#d01f3c","label":"百度搜索:'. round(($a*100/$totalvote), 2).'%('.$a.' )", "tip":"点击投票:百度搜索","on-click":"vote(1)"}, {"value":'.$b.',"font-size":14,"colours":"#356aa0","label":"谷歌搜索:'. round(($b*100/$totalvote), 2).'%('.$b.')", "tip":"点击投票:谷歌搜索","on-click":"vote(2)"}, {"value":'.$c.',"font-size":14,"colours":"#C79810","label":"朋友推荐:'. round(($c*100/$totalvote), 2).'%('.$c.')", "tip":"点击投票:朋友推荐","on-click":"vote(3)"}, {"value":'.$d.',"font-size":14,"colours":"#93C96B","label":"其他:'. round(($d*100/$totalvote), 2).'%('.$d.')", "tip":"点击投票:其他","on-click":"vote(4)"} ] } ] }'; } } else { $data=file_get_contents("data.txt"); list($a, $b, $c,$d) = explode(",",$data); $totalvote=($a+$b+$c+$d); echo ' { "title":{ "text":"投票:您是从哪里知道IM502的? 已经有'.$totalvote.'位网友投票", "style":"{font-size: 20px;}" }, "elements":[ { "type": "pie", "colours": ["#d01f3c","#356aa0","#C79810","#93C96B"], "alpha": 0.6, "border": 2, "animate": 0, "start-angle": 35, "values" : [ {"value":'.$a.',"font-size":14,"colours":"#d01f3c","label":"百度搜索:'. round(($a*100/$totalvote), 2).'%('.$a.' )", "tip":"点击投票:百度搜索","on-click":"vote(1)"}, {"value":'.$b.',"font-size":14,"colours":"#356aa0","label":"谷歌搜索:'. round(($b*100/$totalvote), 2).'%('.$b.')", "tip":"点击投票:谷歌搜索","on-click":"vote(2)"}, {"value":'.$c.',"font-size":14,"colours":"#C79810","label":"朋友推荐:'. round(($c*100/$totalvote), 2).'%('.$c.')", "tip":"点击投票:朋友推荐","on-click":"vote(3)"}, {"value":'.$d.',"font-size":14,"colours":"#93C96B","label":"其他:'. round(($d*100/$totalvote), 2).'%('.$d.')", "tip":"点击投票:其他","on-click":"vote(4)"} ] } ] }'; } |
主要JS代码:
function open_flash_chart_data() { alert( 'reading data' ); return JSON.stringify(data); } function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } function vote(id) { //发送数据请求,返回OFC需要的json数据 jQuery.getJSON("setvote.php", {vote:id}, function(data) { if (data.title.text.substring(0,2)=="IP") { alert(data.title.text); } else { newvote = findSWF("votechart"); ss = newvote.load(JSON.stringify(data)); if (id>0) { alert("投票成功感谢您的支持"); } } }); return false; } |
投票页只需要加载ofc所需要的json2.js、swfobject.js以及jquery就可以,jquery实现无刷新投票。
body加上onload=”vote(0);”初始化图表。
欢迎喜欢ofc的朋友一起讨论。

