台湾大选投票实时动态显示

资讯的台湾大选专题要求在开票当天能对票选结果实时动态显示，不过到最后，时间根本不够，功能需求已经被砍掉不少。效果看这里。代码写得比较乱，里面最主要的一个东西是SmoothSlide这个对象。

  1. function SmoothSlide(params){
  2.     this.element = null;
  3.     this.intervalId = 0;
  4.     this.params = params==null ? {}:params;
  5.     this.onComplete = null;
  6.     this.onProcess = null;
  7.     this.properties = {
  8.         holder:'vertical',
  9.         isVertical:true,
  10.         max:100,
  11.         step:1,
  12.         speed:30
  13.     };
  14. }

其中properties中是一些可配置的属性，onComplete和onProcess分别是结束执行和正在执行时的处理函数。
在SmoothSlide的prototype中，compute函数负责将投票数量百分比进行展示。

  1. SmoothSlide.prototype ={
  2.     isFunction:function( fn ) {
  3.         return !!fn && typeof fn != "string" && !fn.nodeName 
  4.         && fn.constructor != Array && /function/i.test( fn + "" );
  5.     },
  6.     clear:function(){ clearInterval(this.intervalId); },
  7.     complete:function(){
  8.         this.clear();
  9.         if(this.isFunction(this.onComplete)) 
  10.             this.onComplete(this);
  11.     },
  12.     process:function(){
  13.         if(this.isFunction(this.onProcess)) 
  14.             this.onProcess(this);
  15.     },
  16.     start:function(){
  17.         var _ = this;
  18.         _.intervalId = setInterval(function(){
  19.             _.compute.apply(_,[_.properties.max]);
  20.         },
  21.         _.properties.speed);
  22.     },
  23.     compute:function(max){
  24.         var o = this.element.style;
  25.         if(this.properties.isVertical){
  26.             if(parseInt(o.height) >= max){    this.complete(); }
  27.             else {
  28.                 o.height = parseInt(o.height)+this.properties.step+'%';
  29.                 this.process();
  30.             }
  31.         } else {
  32.             if(parseInt(o.width) >= max){ this.complete(); }
  33.             else {
  34.                 o.width = parseInt(o.width)+this.properties.step+'%';
  35.                 this.process();
  36.             }
  37.         }
  38.     },
  39.     init:function(){
  40.         for(var i in this.params)
  41.             this.properties[i] = this.params[i];
  42.         this.element=$(this.properties.holder);   
  43.         this.start();
  44.     }
  45. }

从后台获取数据的时候采取JSONP的方式，负责应用开发的同事会给我一个类似taiwanvote({…})的javascript脚本输出，得到JSON的数据以后就可以执行处理函数了.
因为页面需要定时刷新，所以还得增加一个函数定时将该脚本append到head标签中。代码如下：

  1. var headScript = null, isAppended = false;
  2. function appendRequestScript(url){
  3.     var head = document.getElementsByTagName('HEAD')[0];
  4.     if(isAppended)
  5.         head.removeChild(headScript);
  6.     headScript = document.createElement('SCRIPT');
  7.     headScript.src = url+'?'+new Date().getTime();
  8.     head.appendChild(headScript);
  9.     isAppended = true;
  10. }
  11. window.onload = function(){
  12.     var scriptUrl = 'tw2008vote.js';
  13.     var refreshTime = 15000;
  14.     appendRequestScript(scriptUrl);
  15.     setInterval(function(){appendRequestScript(scriptUrl);},refreshTime);
  16. }
[ 分类: JavaScript ] 由 Pan 发表于 2008年04月06日  固定链接 

《台湾大选投票实时动态显示》 这篇文章一共有0 条评论   我也想说两句

还没有人对这篇文章发表评论，赶紧留一个吧。

RSS feed for comments on this post. TrackBack URI

相关文章：
  • 暂时没有相关的文章

发表评论