<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script type="text/javascript">
var VMLel = ['line','stroke','polyline','fill','oval','group','rect','textbox','shape'];
var style = document.createStyleSheet();
for (var i=0,l=VMLel.length;i<l;i++) {
style.addRule('v\\:'+VMLel[i], "behavior: url(#default#VML);");
}
///用于画横或竖的平行线
lines=function(lineColor,lineStyle,lineNum,lineX0,lineY0,lineInterval,length,log,o){//log 为真横线,假竖线
var x0,x1,y0,y1,line,stroke,i;
if(log){
for(i=0;i<lineNum;i++){
y0=y1=lineY0+i*lineInterval;
x0=lineX0;
x1=lineX0+length;
line=document.createElement("v:line");
line.from=x0+','+y0;
line.to=x1+','+y1;
stroke=document.createElement("v:stroke");
stroke.dashstyle=lineStyle;
stroke.color=lineColor;
line.appendChild(stroke);
o.appendChild(line);
}
}
else{
for(i=0;i<lineNum;i++){
x0=x1=lineX0+i*lineInterval;
y0=lineY0;
y1=lineY0+length;
line=document.createElement("v:line");
line.from=x0+','+y0;
line.to=x1+','+y1;
stroke=document.createElement("v:stroke");
stroke.dashstyle=lineStyle;
stroke.color=lineColor;
line.appendChild(stroke);
o.appendChild(line);
}
}
}
///画个圆圈鼠标移上去先去显示信息,
cycle=function(x,y,dia,p,t,e,o){
var tit='p:'+p+'t:'+t+'e:'+e;
cyc=document.createElement("v:oval");
cyc.title=tit;
cyc.style.width=dia;
cyc.style.height=dia;
cyc.style.left=x-dia/2;
cyc.style.top=y-dia/2;
cyc.fillcolor="#008284";
o.appendChild(cyc);
}
////文字填写
text=function(x,y,w,h,fsize,content,o){
//随便创建个vml元素,把文本嵌套在这个元素里面,起到图形缩放时,文字位置相对网格固定
rect=document.createElement("v:shape");
rect.style.left=x;
rect.style.top=y;
//rect.style.width=w;
//rect.style.height=h;
rect.filled=false;
textbox=document.createElement("v:textbox");
textbox.style.fontSize=fsize;
textbox.inset='0,0,0,0';
textbox.innerHTML=content;
rect.appendChild(textbox);
o.appendChild(rect);
}
//初始化画布
var canvas=document.createElement("v:group");
canvas.style.width=1280+'px';
canvas.style.height=1024+'px';
canvas.coordsize="12800,10240";
canvas.id="canvas";
var days=35; //要显示的天数 即横多少格子
var times=9; //时间数 即竖直多少个格子
var gridWidth=350;//网格宽度
//--------------生成网格============
//主网格
var maingrid=document.createElement("v:group");
maingrid.id="mgrid";
maingrid.style.left=600;
maingrid.style.top=0;
maingrid.style.width=10000;
maingrid.style.height=3000;
maingrid.coordsize='10000,3000';
lines("red","Solid",times+1,0,0,gridWidth,days*gridWidth,true,maingrid);
lines("red","Solid",days+1,0,0,gridWidth,times*gridWidth,false,maingrid);
canvas.appendChild(maingrid);
//次网格
var subgrid=document.createElement("v:group");
subgrid.id="sgrid";
subgrid.style.left=600;
subgrid.style.top=0;
subgrid.style.width=10000;
subgrid.style.height=3000;
subgrid.coordsize='10000,3000';
lines("red","Dash",times,0,gridWidth/2,gridWidth,days*gridWidth,true,subgrid);
lines("red","Dash",days,gridWidth/2,0,gridWidth,times*gridWidth,false,subgrid);
canvas.appendChild(subgrid);
//--------生成网格结束----------------------
//填写资料
var data=document.createElement("v:group");
data.id="sgrid";
data.style.left=600;
data.style.top=0;
data.style.width=10000;
data.style.height=3000;
data.coordsize='10000,3000';
var x,y;
var x0=gridWidth/2;
var y0=gridWidth*1.5;
for(var i=0;i<days;i++){
for(var j=0;j<times-1;j++){
x=i*gridWidth+x0;
y=j*gridWidth+y0;
//主要下面这两句慢,一个画圆圈,一个填写数据,一共要填个数据,现在只填一个就慢死了
cycle(x,y,gridWidth/10,1016,28,28,data);
text(x-x0,y-x0,gridWidth/2,gridWidth/2,10,"d",data);
}
}
canvas.appendChild(data);
///上面是画图代码window.onload=function(){
var div=document.getElementById("abc");
div.appendChild(canvas);
}
function zoom(){
var sg=document.getElementById("sgrid");
sg.style.display="none";
}
</script><title>VML</title>
</head>
<body>
<div id="abc" >
</div>
<div>
<input id="s" type="button" onclick="zoom()" />
</div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货