nav-left cat-right
cat-right

open flash chart应用-投票

先看演示: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代码:

?View Code JAVASCRIPT
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的朋友一起讨论。

10 条评论 »