看看这段代码！！！

colorrain 2003-04-23 03:15:45

我写了一个可以在网页上输入分数的htc程序。在点击按钮时会在光标所在出插入另外一个分数。但为什么插入的位置老是不对???麻烦看看.

win.htc
<html xmlns:plow xmlns:v="urn:schemas-microsoft-com:vml">
<style type="text/css">
plow\:win {behavior:url(win.htc);}
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<PUBLIC:COMPONENT NAME="win">
<METHOD NAME="adpp" />
<PUBLIC:PROPERTY NAME="height" />
<PUBLIC:PROPERTY NAME="mycolor" />
<PUBLIC:PROPERTY NAME="width" />
<ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
<ATTACH EVENT="onresize" HANDLER="ReSize" />
<ATTACH EVENT="onclick" HANDLER="DoClick" />
<SCRIPT LANGUAGE="JScript">
style.position="absolute";
style.height=height;
style.width=width;
style.posTop=top;
style.posLeft=left;
style.fontSize=fontsize;
var X=0,Y=0;
var ofx=0,ofy=0;
function ReSize()
{
var child=element.document.getElementsByTagName("div");
fsx=element.document.getElementsByTagName("line")[0];
wid=0;
for(i=0;i<child.length;i++)
{
rcts = child[i].getBoundingClientRect();
if(parseInt(rcts.right-rcts.left) > wid)
{
wid=parseInt(rcts.right-rcts.left);
}
}
wid+=4;
style.width=wid;
child[0].style.width=wid-4;
child[1].style.width=wid-4;
rcts = child[0].getBoundingClientRect();
child[1].style.top=parseInt(rcts.bottom-rcts.top+6);
fsx.from='"'+0+','+parseInt(rcts.bottom-rcts.top+4)+'"';
fsx.to='"'+wid+','+parseInt(rcts.bottom-rcts.top+4)+'"';
}
function createline(y,ex)
{
myline=document.createElement("v:line");
myline.from='" 0'+","+y+'"';
myline.to='"'+ex+','+y+'"';
appendChild(myline);
}
function creatediv(tp,lf)
{
cb=document.createElement("div");
cb.style.background=mycolor;
cb.style.position="absolute";
cb.style.height=height/2-4;
cb.style.width=width-4;
cb.style.posTop=tp;
cb.style.posLeft=lf;
cb.style.fontSize=fontsize;
cb.style.textAlign="center";
cb.contentEditable="true";
cb.onresize=ReSize;
appendChild(cb);
}
function DoInit()
{
creatediv(2,2);
createline(height/2,width);
creatediv(2+height/2,2);
}

function DoClick()
{
X=event.clientX;
Y=event.clientY;
ofx=event.offsetX;
ofy=event.offsetY;
}
function adpp()
{
if(hasChildNodes())
{
var tr = element.document.body.createTextRange();
tr.moveToPoint(X,Y);
str="<plow:win mycolor= 'red' width=20 height=20 fontsize=9pt";
str +=" top="+ofy+" left="+ofx +" /> ";
tr.pasteHTML(str);
}
}
</SCRIPT>
</PUBLIC:COMPONENT>
</html>

index.htm
<html xmlns:plow xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script language="javascript">
function aptest()
{
elam=document.getElementsByTagName("win");
elam[0].adpp();
}
</script>
<style type="text/css">
plow\:win {behavior:url(win.htc);}
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
</head>
<body >
<input type="button" unselectable="on" onclick="aptest()">
<plow:win mycolor="red" width=50 height=50 fontsize=9pt left=300 top=100 >
</plow:win>
</body>
</html>

...全文

43 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

colorrain 2003-04-23

打赏
举报

惭愧，惭愧
<html xmlns:plow xmlns:v="urn:schemas-microsoft-com:vml">
<style type="text/css">
plow\:win {behavior:url(win.htc);}
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
这一段是用来引入vml的标记。vml是一种矢量作图语言。在此处用来画分数线。
function createline(y,ex)此函数用来画分数线。ex表示画多长，此函数主要生成
这样一个vml标记<v:line from="0,y" to="ex,y">
creatediv(tp,lf)用来生成一个可以编辑的div. tp.lf表示此div相对于父元素的top left位置.

function DoInit()
{
creatediv(2,2);//生成填写分子数据所需的div
createline(height/2,width);
creatediv(2+height/2,2);//生成填写分母数据所需的div

}
生成了页面上的分数线和分子分母填写区域。
当输入数据是分数线要求动态边长，Resize()函数用来调整分数线长度和保持分子分母的div一样大.
function adpp()
用来在当前光标出插入一个<plow:win>元素。即插入一个分数形式的可编辑区域.

希望大家多多讨论。小弟刚学htc.请多指教.