筚路蓝缕

不因成就而狂妄、不因失落而气馁、不因欲望而沉重、不因嫉妒而困扰

Javascript

收集了一些表现层应用的例子

Venlentine

页面加载效果一：

<script type="text/javascript">// <![CDATA[

/********************************************************
 * ProgressBar class
 * @author null
 * @param width - width of progress bar
 * @param height - height of progress bar
 * @param fgColor - fgColor of progress bar
 * @param bgColor - bgColor of progress bar
 * @param borderColor - borderColor of progress bar
          the rule is the same border-color of CSS
/********************************************************/
function ProgressBar(width,height,fgColor,bgColor,borderColor){

  if(borderColor==undefined){
    bgColor = "threedlightshadow";
    fgColor = "highlight";
    borderColor =  "buttonshadow window window buttonshadow";
  }
  else if(borderColor==undefined&&fgColor==undefined&&bgColor==undefined){
    bgColor = "threedlightshadow";
    fgColor = "highlight";
    borderColor =  "buttonshadow window window buttonshadow";
  }

  percent  = 0.0; //initialize to zero
  fontSize = Math.ceil(height/2)+1;

  font_bt = "<table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+bgColor+";text-align:center;vertical-align:center;'>
<tr>
<td>"+parseInt(percent*100)+" %</td>
</tr>
</table>";
  font_ft = "
<table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+fgColor+";text-align:center;vertical-align:center;'>
<tr>
<td>"+parseInt(percent*100)+" %</td>
</tr>
</table>";

  squares = "";
  for(var i=0;;i++){
    var left = width-2-i*(height/2+1);
    //alert(left);
    if(left>=height/2+1){
      squares += "<span style='background-color:"+fgColor+";width:"+height/2+"px;height:"+(height-2)+";margin-right:1px;'></span>";
    }
    else if(left>=1){
      squares += "<span style='background-color:"+fgColor+";width:"+left+"px;height:"+(height-2)+";margin:0px;'></span>";
    }
    else
      break;
  }

  //position:absolute;
  str  = "<span id=progress_bg style='width:"+width+"px;height:"+height+"px;background-color:"+bgColor+";border:1px solid;border-color:"+borderColor+"'>"; //"+fgColor+" #transparent
  str += "  <span id=progress_fg style='position:absolute;width:100%;height:100%;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);background-color:"+fgColor+";font-size:0px;line-height:0px;'>";
  str +=      squares;
  str += "  </span>";
  str += "  <span id=progress_bt style='position:absolute;z-index:8;width:100%;height:100%;background-color:#transparent;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);text-align:center;'>";
  str +=      font_bt;
  str += "  </span>";
  str += "  <span id=progress_ft style='position:absolute;z-index:9;width:100%;height:100%;background-color:#transparent;clip:rect(0,100%,100%,"+parseInt(percent*100)+"%);text-align:center;'>";
  str +=      font_ft;
  str += "  </span>";
  str += "</span>";

  document.write(str);

  function update(){
    font_bt = "
<table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+bgColor+";text-align:center;vertical-align:center;'>
<tr>
<td>"+parseInt(percent*100)+" %</td>
</tr>
</table>";

    font_ft = "
<table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+fgColor+";text-align:center;vertical-align:center;'>
<tr>
<td>"+parseInt(percent*100)+" %</td>
</tr>
</table>";

    document.getElementById("progress_fg").style.clip='rect(0,'+parseInt(percent*100)+'%,100%,0)';
    document.getElementById("progress_bt").style.clip='rect(0,'+parseInt(percent*100)+'%,100%,0)';
    document.getElementById("progress_ft").style.clip='rect(0,100%,100%,'+parseInt(percent*100)+'%)';

    document.getElementById("progress_bt").innerHTML=font_bt;
    document.getElementById("progress_ft").innerHTML=font_ft;
  }

  this.setModel=function(model){
    percent = model;
    update();
  }
}

/////////// Test for ProgressBar ////////////
pb = new ProgressBar(153,18);//,"navy","#FFE4C4","#ff9900");
//document.write("Hello,ProgressBar");
//pb.setModel(50/100);
function progress(v){
  if (v >= 100){
    pb.setModel(1.00);
    alert("Finished");
  }
  else{
    pb.setModel(v/100);
    window.setTimeout("progress("+(v+1)+")",Math.random()*Math.random()*500);
  }
}
progress(0);
///////////////// End Test ///////////////////
// ]]></script>

页面加载效果二

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;
<table width="&quot;50%&quot;" border="&quot;0&quot;" cellspacing="&quot;0&quot;" cellpadding="&quot;0&quot;" align="center">
<tbody>
<tr>
<td nowrap="nowrap" width="&quot;51%&quot;">
<p align="&quot;right&quot;">size=2>正在加载：</p>
</td>
<td width="&quot;4%&quot;">behavior="slide">███████████████████████████████████████████████████████████████████████████████</td>
<td align="left" width="&quot;45%&quot;"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[

var myTime=0
function counter(){
myTime++
per.innerHTML="<font size=2 color=darkblue> "+myTime+"%</font>"
if(myTime<100)
setTimeout("counter()",40);
else{
location.href="<a href="http://download.pchome.net" target="_blank">http://download.pchome.net</a>"
}}

counter()

// ]]></script>

页面加载效果三

&nbsp;
<div id="&quot;abc&quot;">Loading.............</div>
<script type="text/javascript">// <![CDATA[

s=new Array();
s[0]="#050626";
s[1]="#0a0b44";
s[2]="#0f1165";
s[3]="#1a1d95";
s[4]="#1c1fa7";
s[5]="#1c20c8";
s[6]="#060cff";
s[7]="#2963f8";
function ls(){
		pimg.innerHTML="";
		for(i=0;i<9;i++){
		pimg.innerHTML+="
<input style="width:15;height:10;border:0;background:"+s<i>+";margin:1">";
		}
	}

function rs(){
		pimg.innerHTML="";
		for(i=9;i>-1;i--){
		pimg.innerHTML+="
<input style="width:15;height:10;border:0;background:"+s<i>+";margin:1">";
		}
	}

ls();
var g=0;sped=0;
function str(){
	if(pimg.style.pixelLeft<350&&g==0){
	if(sped==0){
		ls();
		sped=1;
		}
	pimg.style.pixelLeft+=4;
	setTimeout("str()",1);
	return;
	}
	g=1;
	if(pimg.style.pixelLeft>-200&&g==1){
	if(sped==1){
		rs();
		sped=0;
		}
	pimg.style.pixelLeft-=4;
	setTimeout("str()",1);
	return;
	}
	g=0;
	str();
}

function flashs(){
if(abc.style.color=="#ffffff"){
	abc.style.color="#707888";
	setTimeout('flashs()',500);
	}
else{
	abc.style.color="#ffffff";
	setTimeout('flashs()',500);
	}
}
flashs();
str();
// ]]></script>

网页屏保：

<script type="text/javascript" language="&quot;JavaScript&quot;">// <![CDATA[

function  screensave(){
test.value++;
if(test.value==5){
test.style.display='none';
document.all[4].bgColor='black';
}
}
function  screenopen(){
test.value=0;
test.style.display='';
document.all[4].bgColor='';
}
// ]]></script>
? 秒屏保
<input id="&quot;test&quot;" type="text" />

用vml做的画图类，可以完整绘制图表

<script type="text/javascript">// <![CDATA[

//---dashstyle:solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot
//---arrow:block|classic|diamond|oval|open|chevron|doublechevron
//---arrowwidth:narrow|medium|wide
//---arrowlength:short|medium|long
//---extrusion_property:skewangle|foredepth|backdepth|rotationangle|lightface|brightness
//---extrusion_render:solid|wireFrame|boundingcube
//---extrusion_type:perspective|parallel
//---extrusion_plan:xy|zx|yz
var vt1=new vt()
document.write("<html xmlns:v>
<style>v:*{behavior:url(#default#VML)}</style>

")
function vt(){
    this.getEffect=function(css){
        var l="",s
        var fill=getVal(css,"fill"),sdw=getVal(css,"shadow"),ext=getVal(css,"ext")
        if(fill=="none")
            l+="<v:fill opacity=0 />"
        if(fill=="ball")
            l+="<v:fill method='any' opacity='"+getVal(css,"opacity",1)+"' focusposition='"+getVal(css,"fpos","25%,25%")+"' type='gradientradial' color2='"+getVal(css,"colors","white")+"' />"
        if(fill=="flat")
            l+="<v:fill method='sigma' opacity='"+getVal(css,"opacity",1)+"' angle='"+getVal(css,"angle",0)+"' type='gradient' colors='"+getVal(css,"colors","white")+"' />"
        if(sdw=="t")
            l+="<v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' />"
        if(ext!="")
            l+="<v:extrusion on='True' render='"+getVal(css,"render")+"' color='"+getVal(css,"extcolor","gray")+"' />"
        if(getVal(css,"bdcolor")=="none")
            l+="<v:extrusion on=t backdepth=0 />"
        return l
    }
    this.line=function(x1,y1,x2,y2,css){
        var l
        l="<v:line from="+x1+","+y1+" to="+x2+","+y2+" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' style=position:absolute;top:0;left:0>"
        l+="<v:stroke dashstyle='"+getVal(css,"dashstyle")+"' startarrow=none endarrow='"+getVal(css,"arrow")+"' />"
        l+="</v:line>"
        return l
    }
    this.curve=function(x1,y1,x2,y2,x3,y3,css){
        var l
        l="<v:curve opacity='0' from="+x1+","+y1+" control1="+x2+","+y2+" to="+x3+","+y3+" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' style=position:absolute;top:0;left:0>"
        l+=this.getEffect(css)+"</v:curve>"
        return l
    }
    this.rect=function(x,y,w,h,css){
        var l,type=getVal(css,"type")=="round" ? "roundrect" : "rect"
        l="<v:"+type+" title='"+getVal(css,"title")+"' style="position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"
        l+=this.getEffect(css)+"</v:"+type+">"
        return l
    }
    this.oval=function(x,y,w,h,css){
        var l
        l="<v:oval title='"+getVal(css,"title")+"' style="position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"
        l+=this.getEffect(css)+"</v:oval>"
        return l
    }
    this.polyline=function(pList,css){
        var l
        l="<v:polyline points='"+pList+"' title='"+getVal(css,"title")+"' style='position:absolute' strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"
        l+=this.getEffect(css)+"</v:polyline>"
        return l
    }
    this.pie=function(r,sa,ea,css){
        var sf,ef,sx,sy,ex,ey
        var title=getVal(css,"title"),x=parseInt(getVal(css,"x",0)),y=parseInt(getVal(css,"y",0))
        sf=Math.PI*(sa/180)
        ef=Math.PI*(ea/180)
        sy=parseInt(r*Math.sin(sf))
        sx=parseInt(r*Math.cos(sf))
        ey=parseInt(r*Math.sin(ef))
        ex=parseInt(r*Math.cos(ef))
        l=this.shape("m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe",css)
        if(title!=""){
            if(ef==0)
                ef=270
            var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)
            l+=this.drawStr(title,cx+x-10,cy+y-5)
        }
        return l
    }
    this.shape=function(pList,css){
        var l
        l="<v:shape path='"+pList+"' title='"+getVal(css,"title")+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+getVal(css,"x","0")+";top:"+getVal(css,"y","0")+"' strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"
        l+=this.getEffect(css)+"</v:shape>"
        return l
    }
    this.drawStr=function(k,x,y,css){
        var l,vl
        if(k=="")
            return
        vl=getVal(css,"valign")!="" ? "width:5;word-break:break-all" : ""
        l="<span style='position:absolute;z-index:"+getVal(css,"z-index")+";font:12;left:"+x+"px;top:"+y+"px;"+vl+"'>"+k+"</span>"
        if(vl=="")
            l="<nobr>"+l+"</nobr>"
        return l
    }
    this.draw3DStr=function(k,x1,y1,x2,y2,css){
        var l,gd
        gd=getVal(css,"color2")
        if(gd!="")
            gd=" type=gradient color2="+gd
        l="<v:line from="+x1+","+y1+" to="+x2+","+y2+"><v:path textpathok='t' /><v:textpath string='"+k+"' on=t fitpath=t /><v:fill on=t color='"+getVal(css,"bgcolor")+"' "+gd+" /><v:extrusion on=t foredepth="+getVal(css,"depth",20)+" /></v:line>"
        return l
    }
    this.drawPic=function(type,x,y,css){
        var n,l=""
        if(type=="glassbt1"){
            n=getVal(css,"width",100)
            l+=this.oval(x,y,n,n,"shadow:"+parseInt(n/20)+"px,"+parseInt(n/14)+"px;fill:ball;fpos:50%,80%;bgcolor:"+getVal(css,"bgcolor","#003300")+";colors:"+getVal(css,"colors","#22ff22"))
            l+=this.oval(x+.125*n,y-.07*n,.75*n,parseInt(n/2),"fill:ball;fpos:50%,50%;bgcolor:white;bdcolor:none:f;colors:white;opacity:0")
        }
        return l
    }
}
function addChart(vt,vList,css){
    var a,cx=20,w,h0,h1,hsize,n,s,amt=0,max=0,sa,ea
    var ph=parseInt(getVal(css,"height",300)),pw=parseInt(getVal(css,"width",500))
    var type=getVal(css,"type","rect"),showVal=getVal(css,"showVal")
    var ac="green,yellow,red,blue,gray".split(",")
    var l=""
    if(ph<150||pw<150){
        alert("图表区域太小，中断输出！")
        return
    }
    a=vList.split(";")
    for(var i in a){
        a<i>=a<i>.split(",")
        for(var j in a<i>){
            if(i>0&&j>0)
                if(parseInt(a<i>[j])>max)
                    max=parseInt(a<i>[j])
            if(j>0)
                amt+=parseInt(a<i>[j])
        }
    }
    if(max==0)
        return
    hsize=(ph-100)/max
    if(type=="pie"){
        l+=vt.rect(0,0,pw,ph,"bgcolor:"+getVal(css,"bgcolor")+";shadow:t")
        l+=vt.drawStr("统计饼图",pw/2-40,10)
        sa=0
        for(i=0;i<a.length;i++){
            ea=a<i>[1]*360/amt+sa
            if(i==a.length-1)
                ea=0
            l+=vt.rect(pw-130,i*30+60,20,20,"bgcolor:"+ac<i>)
            l+=vt.drawStr(a<i>[0],pw-100,i*30+65)
            l+=vt1.pie((ph-60)/2,sa,ea,"title:"+(parseInt((10000*a<i>[1]/amt))/100)+"%;x:"+(pw/2-(ph-60)/4)+";y:"+(ph/2+10)+";bgcolor:"+ac<i>)
            sa=ea
        }
        return l
    }
    n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20
    if(pw<n)
        pw=n
    l+=vt.rect(0,0,pw,ph,"bgcolor:"+getVal(css,"bgcolor")+";shadow:t")
    l+=vt.line(30,ph-30,30,10,"arrow:classic")
    l+=vt.line(30,ph-30,pw-10,ph-30,"arrow:classic")
    l+=vt.drawStr(getVal(css,"xname"),pw-50,ph-20)
    l+=vt.drawStr(getVal(css,"yname"),10,10,"valign:true")
    l+=vt.drawStr(getVal(css,"title"),220,10)

    for(i=0;i<5;i++){
        l+=vt.line(30,70+i*(ph-100)/5,pw-10,70+i*(ph-100)/5,"dashstyle:dash;bdcolor:#c0c0c0")
        l+=vt.drawStr(parseInt(max)*(5-i)/5,10,65+i*(ph-100)/5)
    }
    for(i in a){
        for(j in a<i>){
            if(i==0){
                l+=vt.rect(60+j*80,30,20,20,"bgColor:"+ac[j])
                l+=vt.drawStr(a<i>[j],85+j*80,35)
            }
            else{
                if(j==0){
                    l+=vt.drawStr(a<i>[j],cx,ph-25)
                }
                else{
                    h1=parseInt(a<i>[j]*hsize)
                    if(type=="rect"){
                        l+=vt.rect(cx,ph-30-h1,20,h1,"bgColor:"+ac[j-1]+";title:"+a<i>[j])
                        if(showVal=="true")
                            l+=vt.drawStr(a<i>[j],cx+3,ph-42-h1,"z-index:1")
                    }
                    w=20*a<i>.length
                    if(type=="line"){
                        if(i>1){
                            h0=parseInt(a[i-1][j]*hsize)
                            l+=vt.line((i-1)*w-w+40,ph-h0-30,i*w-w+40,ph-h1-30,"bdcolor:"+ac[j-1])
                        }
                        l+=vt.rect(i*w-1-w+40,ph-31-h1,3,3,"bgcolor:"+ac[j-1]+";title:"+a<i>[j])
                        if(showVal=="true"){
                            l+=vt.drawStr(a<i>[j],i*w-w+40,ph-42-h1,"z-index:1")
                        }
                    }
                    cx+=20
                }
            }
        }
        cx+=20
    }
    return l
}

function getVal(vList,k,def){
    if(vList==null)
        vList=""
    vList=vList.replace(/ /g,"").replace(/=/g,":").toLowerCase()
    k=k.toLowerCase()
    var a=vList.split(";")
    for(var i in a){
        a<i>=a<i>.split(":")
        if(a<i>[0]==k&&a<i>[1]!=""&&a<i>[1]!=null)
            def=a<i>[1]
    }
    if(def==null)
        def=""
    return def
}
// ]]></script>
&nbsp;

&nbsp;

<script type="text/javascript">// <![CDATA[

//---加入图表，最后一参数还可改为line和pie
l=addChart(vt1,"华北,华东;1,30,40;2,50,70;3,20,40","type:rect")
//---加入3D文字
l+=vt1.draw3DStr("幻宇",50,50,150,120,"bgcolor:green;color2:green")
//---加入玻璃按钮
l+=vt1.drawPic("glassbt1",300,150)
div1.innerHTML=l
// ]]></script>
<script type="text/javascript">// <![CDATA[

document.write("<html xmlns:v>
<style>v:*{behavior:url(#default#VML)}</style>

")
var ct1=new ct()
function ct(){
    this.ac="green,yellow,red,blue,gray".split(",")
    this.getCss=function(css,k,df){
        if(css==null)
            return def==null ? "" : df
        var r=new RegExp("(^|)"+k+":([^;]*)(;|$)","gi")
        var a=r.exec(css.replace(/=/g,":").replace(/ /g,"").toLowerCase())
        return a==null ? (df==null ? "" : df) : (isNaN(a[2])||a[2]=="" ? a[2] : parseInt(a[2]))
    }
    this.bar=function(vList,css){
        var l="",a,n,s,hsz,max=0,cx=20,ch
        var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
        if(ph<150||pw<150){
            alert("图表区域太小，中断输出！")
            return
        }
        a=vList.split(";")
        for(var i in a){
            a<i>=a<i>.split(",")
            for(var j in a<i>){
                if(i>0&&j>0)
                    if(parseInt(a<i>[j])>max)
                        max=parseInt(a<i>[j])
            }
        }
        if(max==0)
            return
        hsz=(ph-100)/max
        n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20
        if(pw<n)
            pw=n
        l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"
        l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"
        l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"
        l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"
        l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+a[0][0]+"</span>"
        l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+this.getCss(css,"vname")+"</span>"

        for(i=0;i<5;i++){
            l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
            l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"
        }

        for(i in a){
            for(j in a<i>){
                if(i==0){
                    if(j>0){
                        l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
                        l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a<i>[j]+"</span>"
                    }
                }
                else{
                    if(j==0)
                        l+="<span style='position:absolute;z-index:3;font:12;left:"+cx+";top:"+(ph-25)+"'>"+a<i>[j]+"</span>"
                    else{
                        ch=a<i>[j]*hsz
                        l+="<v:rect title='"+a<i>[j]+"' fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+cx+";top:"+(ph-30-ch)+";width:20;height:"+ch+"' />"
                        if(this.getCss(css,"showVal")=="t")
                            l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+3)+";top:"+(ph-42-ch)+"'>"+a<i>[j]+"</span>"
                        cx+=20
                    }
                }
            }
            cx+=20
        }
        return l
    }
    this.lines=function(vList,css){
        var l="",a,n,s,hsz,max=0,ch
        var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
        if(ph<150||pw<150){
            alert("图表区域太小，中断输出！")
            return
        }
        a=vList.split(";")
        for(var i in a){
            a<i>=a<i>.split(",")
            for(var j in a<i>){
                if(i>0&&j>0)
                    if(parseInt(a<i>[j])>max)
                        max=parseInt(a<i>[j])
            }
        }
        if(max==0)
            return
        hsz=(ph-100)/max
        n=a.length*40+40
        if(pw<n)
            pw=n
        l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"
        l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"
        l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"
        l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+this.getCss(css,"xname")+"</span>"
        l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+a[0][0]+"</span>"
        l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"

        for(i=0;i<5;i++){
            l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
            l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"
        }

        for(i in a){
            for(j in a<i>){
if(i==0){
                    if(j>0){
                        l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
                        l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a<i>[j]+"</span>"
                    }
                }
                else{
                    if(j==0)
                        l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'>"+a<i>[j]+"</span>"
                    else{
                        ch=a<i>[j]*hsz
                        if(i>1){
                            oh=parseInt(a[i-1][j]*hsz)
                            l+="<v:line from="+((i-1)*40)+","+(ph-oh-30)+" to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+this.ac[j-1]+"' />"
                        }
                        l+="<v:rect title='"+a<i>[j]+"' fillcolor='"+this.ac[j-1]+"' style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"' />"
                        if(this.getCss(css,"showVal")=="t")
                            l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'>"+a<i>[j]+"</span>"
                    }
                }
            }
        }
        return l

    }
    this.pie=function(vList,css){
        var l="",a,i,j,n,s,amt,dx=0
        var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
        if(ph<150||pw<150){
            alert("图表区域太小，中断输出！")
            return
        }
        a=vList.split(";")
        n=a.length*170-130
        if(pw<n)
            pw=n
        l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"
        l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"
        if(a.length==2)
            dx=pw/2-100
        if(a.length==3)
            dx=pw/2-180
        for(i in a){
            a<i>=a<i>.split(",")
            amt=0
            for(j=1;j<a<i>.length;j++){
                amt+=parseFloat(a<i>[j])
            }
            sa=0
            for(j in a<i>){
                if(i==0){
                    if(j>0){
                        l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
                        l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a<i>[j]+"</span>"
                    }
                }
                else{
                    if(j==0){
                        l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'>"+a<i>[j]+"("+amt+")</span>"
                    }
                    else{
                        ea=a<i>[j]*360/amt+sa
                        if(j==a<i>.length-1)
                            ea=0
                        if(a<i>[j]>0)
                            l+=this.getPie(60,sa,ea,"title:"+a<i>[j]+";val:"+(parseInt((10000*a<i>[j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+this.ac[j-1])
                        sa=ea
                    }
                }
            }
        }
        return l
    }
    this.getPie=function(r,sa,ea,css){
        var sf,ef,sx,sy,ex,ey
        var title=this.getCss(css,"title"),val=this.getCss(css,"val")
        var x=parseInt(this.getCss(css,"x",0)),y=parseInt(this.getCss(css,"y",0))
        sf=Math.PI*(sa/180)
        ef=Math.PI*(ea/180)
        sy=parseInt(r*Math.sin(sf))
        sx=parseInt(r*Math.cos(sf))
        ey=parseInt(r*Math.sin(ef))
        ex=parseInt(r*Math.cos(ef))

        s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe"
        l="<v:shape path='"+s+"' title='"+title+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+this.getCss(css,"x","0")+";top:"+this.getCss(css,"y","0")+"' fillcolor='"+this.getCss(css,"background","white")+"' />"
        if(ef==0)
            ef=270
        var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)
        l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'>"+val+"</span>"
        return l
    }
    this.draw=function(vList,css){
        var l,type=this.getCss(css,"type")
        if(type=="pie")
            l=this.pie(vList,css)
        else if(type=="lines")
            l=this.lines(vList,css)
        else
            l=this.bar(vList,css)
        return l
    }
}
// ]]></script>
&nbsp;

&nbsp;
<script type="text/javascript">// <![CDATA[

//---柱形图
div1.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:bar;showVal:t;vname:销售额;title:月统计图")
//---线形图
div2.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:lines;showVal:t;vname:销售额;title:月统计图")
//---饼形图
div3.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:pie;showVal:t;vname:销售额;title:月统计图")

// ]]></script>

JavaScript编写的一个基于VML的chart 类:

<script type="text/javascript" language="&quot;javascript&quot;">// <![CDATA[

function Add(){
    var shape=document.createElement("v:shape");
    shape.type="#tooltipshape";
    shape.style.width="150px";
    shape.style.height="150px";
    shape.coordsize="21600,21600";
    shape.fillcolor="infobackground";

    var textbox=document.createElement("v:textbox");
    textbox.style.border="1px solid red";
    textbox.style.innerHTML="测试";
    shape.appendChild(textbox);    

    document.body.appendChild(shape);
}

function VMLPie(pContainer,pWidth,pHeight,pCaption){
    this.Container=pContainer;
    this.Width= pWidth || "400px";
    this.Height=pHeight || "250px";
    this.Caption = pCaption || "VML Chart";
    this.backgroundColor="";
    this.Shadow=false;
    this.BorderWidth=0;
    this.BorderColor=null;
    this.all=new Array();
    this.RandColor=function(){

        return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
    }
    this.VMLObject=null;
}

VMLPie.prototype.Draw=function(){
    //画外框
        var o=document.createElement("v:group");
        o.style.width=this.Width;
        o.style.height=this.Height;
        o.coordsize="21600,21600";
    //添加一个背景层
        var vRect=document.createElement("v:rect");
        vRect.style.width="21600px"
        vRect.style.height="21600px"
        o.appendChild(vRect);

        var vCaption=document.createElement("v:textbox");
        vCaption.style.fontSize="24px";
        vCaption.style.height="24px"
        vCaption.style.fontWeight="bold";
        vCaption.innerHTML=this.Caption;
        vCaption.style.textAlign="center";

        vRect.appendChild(vCaption);
    //设置边框大小
        if(this.BorderWidth){
            vRect.strokeweight=this.BorderWidth;
        }
    //设置边框颜色
        if(this.BorderColor){
            vRect.strokecolor=this.BorderColor;
        }
    //设置背景颜色
        if(this.backgroundColor){
            vRect.fillcolor=this.backgroundColor;
        }
    //设置是否出现阴影
        if(this.Shadow){
            var vShadow=document.createElement("v:shadow");
            vShadow.on="t";
            vShadow.type="single";
            vShadow.color="graytext";
            vShadow.offset="4px,4px";
            vRect.appendChild(vShadow);
        }
        this.Container.appendChild(o);

    //开始画内部园
        var oOval=document.createElement("v:oval");
        oOval.style.width="15000px";
        oOval.style.height="14000px";
        oOval.style.top="4000px";
        oOval.style.left="1000px";
        oOval.fillcolor="#d5dbfb";

        //本来计划加入3D的效果，后来感觉确实不好控制，就懒得动手了
        //var o3D=document.createElement("o:extrusion");
        var formatStyle=' <v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/>';
        //formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';
        //formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';
        //formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';
        formatStyle+='<o:extrusion v:ext="view" backdepth="1in" on="t" viewpoint="0,34.72222mm"   viewpointorigin="0,.5" skewangle="90" lightposition="-50000"   lightposition2="50000" type="perspective"/>';
        oOval.innerHTML=formatStyle;        

        o.appendChild(oOval);
        this.CreatePie(o);        

}
VMLPie.prototype.CreatePie=function(vGroup){
        var mX=Math.pow(2,16) * 360;
        //这个参数是划图形的关键
        //AE x y width height startangle endangle
        //x y表示圆心位置
        //width height形状的大小
        //startangle endangle的计算方法如下
        // 2^16 * 度数    

        var vTotal=0;
        var startAngle=0;
        var endAngle=0;
        var pieAngle=0;
        var prePieAngle=0;

        var objRow=null;
        var objCell=null;

        for(i=0;i<this.all.length;i++){
            vTotal+=this.all<i>.Value;
        }

        var objLegendRect=document.createElement("v:rect");

        var objLegendTable=document.createElement("table");
        objLegendTable.cellPadding=0;
        objLegendTable.cellSpacing=5;
        objLegendTable.width="100%";
        with(objLegendRect){
            style.left="17000px";
            style.top="4000px";
            style.width="4000px";
            style.height="12000px";
            fillcolor="#e6e6e6";
            strokeweight="1px";
        }
        objRow=objLegendTable.insertRow();
        objCell=objRow.insertCell();
        objCell.colSpan="2";
        //objCell.style.border="1px outset";
        objCell.style.backgroundColor="black";
        objCell.style.padding="5px";
        objCell.style.color="window";
        objCell.style.font="caption";
        objCell.innerText="总数:"+vTotal;

        var vTextbox=document.createElement("v:textbox");
        vTextbox.appendChild(objLegendTable);
        objLegendRect.appendChild(vTextbox);

        var vShadow=document.createElement("v:shadow");
        vShadow.on="t";
        vShadow.type="single";
        vShadow.color="graytext";
        vShadow.offset="2px,2px";
        objLegendRect.appendChild(vShadow);

        vGroup.appendChild(objLegendRect);        

        var strAngle="";
        for(i=0;i<this.all.length;i++){ //顺序的划出各个饼图
            var vPieEl=document.createElement("v:shape");
            var vPieId=document.uniqueID;
            vPieEl.style.width="15000px";
            vPieEl.style.height="14000px";
            vPieEl.style.top="4000px";
            vPieEl.style.left="1000px";
            vPieEl.coordsize="1500,1400";
            vPieEl.strokecolor="white";
            vPieEl.id=vPieId;

            pieAngle= this.all<i>.Value / vTotal;
            startAngle+=prePieAngle;
            prePieAngle=pieAngle;
            endAngle=pieAngle;    

            //strAngle+=this.all<i>.Name +":" +this.all<i>.Value+ " Start:"+startAngle +"  End:"+ endAngle +"";

            vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";
            vPieEl.title=this.all<i>.Name +"所占比例:"+ endAngle * 100 +"%详细描述:" +this.all<i>.TooltipText;

            //vPieEl.innerHTML='<v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/>';
            var objFill=document.createElement("v:fill");
            objFill.rotate="t";
            objFill.focus="100%";
            objFill.type="gradient";
            objFill.angle=parseInt( 360 * (startAngle + endAngle /2));
            vPieEl.appendChild(objFill);

            var objTextbox=document.createElement("v:textbox");
            objTextbox.border="1px solid black";
            objTextbox.innerHTML=this.all<i>.Name +":" + this.all<i>.Value;
            //vPieEl.appendChild(objTextbox);

            var vColor=this.RandColor();
            vPieEl.fillcolor=vColor; //设置颜色
            //开始画图例
            objRow=objLegendTable.insertRow();

            objCell=objRow.insertCell();//颜色标记
            objCell.style.backgroundColor=vColor;
            objCell.style.width="16px";

            objCell=objRow.insertCell();
            objCell.style.font="icon";
            objCell.style.padding="3px";
            objCell.innerText=this.all<i>.Name +":"+this.all<i>.Value ;

            vGroup.appendChild(vPieEl);
        }

}
VMLPie.prototype.Refresh=function(){

}

VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){

    var oData=new Object();
    oData.Name=sName;
    oData.Value=sValue;
    oData.TooltipText=sTooltipText;
    var iCount=this.all.length;
    this.all[iCount]=oData;

}
VMLPie.prototype.Clear=function(){
    this.all.length=0;
}

//以下是函数调用
function DrawPie(){
    var objPie=new VMLPie(document.body,"600px","450px","人口统计图");
    //objPie.BorderWidth=3;
    //objPie.BorderColor="blue";
    //objPie.Width="800px";
    //objPie.Height="600px";
    objPie.backgroundColor="#ffffff";
    objPie.Shadow=true;

    objPie.AddData("北京",10,"北京的人口");
    objPie.AddData("上海",52,"上海的固定人口");
    objPie.AddData("天津",30,"天津的外地人口");
    objPie.AddData("西安",58,"西安城市人口");
    objPie.AddData("武汉",30,"武汉的外地人口");
    objPie.AddData("重庆",58,"重庆城市人口");
    objPie.Draw();
}

// ]]></script>

自制下拉框:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

<script type="text/javascript" language="&quot;javascript&quot;">// <![CDATA[

function mySelect(openid,id,select_styles,option_styles,options,update)
{
	s=document.getElementById(id);
	s.className='myselect';
	s.onmouseout=function(){this.style.display='';};
	s.onmouseover=function(){this.style.display='inline';};
	if(select_styles) for(i=0;i<select_styles.length;i++)
	{
		eval('s.style.'+select_styles<i>.s+'="'+select_styles<i>.v+'"');
	}

	itemstyle='';
	if(option_styles) for(i=0;i
<option_styles.length;i++)
	{
		itemstyle+=option_styles<i>.s+':'+option_styles<i>.v+';';
	}
	items='';
	if(options) for(i=0;i
<options.length;i++)
	{
		items+='
	<li><a style="'+itemstyle+options<i>.s+'" href="'+(options<i>.h ? options<i>.h:'#')+'">'+(options<i>.v!=null ? '<span class="v">'+options<i>.v+'</span>' : '')+options<i>.t+'</a></li>

';
	}
	s.innerHTML='
<ul>'+items+'</ul>

';
	o=document.getElementById(openid);
	o.style.cursor='pointer';
	o.onclick=function(){document.getElementById(id).style.display=document.getElementById(id).style.display==''?'inline':'';};

	s.onclick=function(evt)
	{
		s.style.display='none';
		if(!update) return false;
		evt = evt || window.event;
		srcEl = evt.target || evt.srcElement;
		if(srcEl.tagName!='A') return false;
		switch(document.getElementById(update.e).tagName)
		{
			case 'TD':
			case 'DIV':
			case 'SPAN':
				document.getElementById(update.e).innerHTML = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;
				break;
			case 'INPUT':
			case 'TEXTAREA':
				document.getElementById(update.e).value = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;
				break;
		}
		return false;
	}
}
function init()
{
	mySelect(
		'mybtn',
		'mysel',
		[{s:"marginTop",v:"14px"},{s:"marginLeft",v:"-14px"}],
		[{s:"width",v:"100px"}],
		[{v:1,t:"12px",s:"font-size:12px"},{v:2,t:"14px",s:"font-size:14px"},{v:3,t:"16px",s:"font-size:16px"},{v:4,t:"24px",s:"font-size:24px"}],
		{t:'text',e:'myupdate'});
}
// ]]></script>

<span id="&quot;mybtn&quot;">↓</span>

&nbsp;

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部