⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 test.html

📁 第一部分:VML入门 第一节:VML基本概念 第二节:Shape对象与VML坐标系 第三节:Line,Polyline(线)对象 第四节:Rect,RoundRect(矩形)对象
💻 HTML
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<title>公文留痕</title>
</head>
<STYLE>
 v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<link rel="stylesheet" href="pub_Document.css">
<script language="JScript">
var nowID=0;
var popID=0;
var padHeight=0;
function init()
{
 newID=parseInt(document.all("n").value);
}
function createDelLine(num)
{
 var newMark=document.createElement("<div id='mark"+num+"'></div>");
 memo.insertBefore(newMark);
 var oRcts = oTempRange.getClientRects();
 for(var i=0;i<oRcts.length;i++)
 {
  var t=oRcts[i].top;
  var l=oRcts[i].left;
  var r=oRcts[i].right;
  var b=oRcts[i].bottom;
  var newRect=document.createElement("<v:roundRect oncontextmenu='popID="+num+";popUp();' id='Rect"+num+"no"+i+"' style='position:absolute;visibility:hidden' filled=t fillcolor=red strokeColor=red strokeWeight=1pt></v:roundRect>");
  newMark.insertBefore(newRect);
  newRect.style.posTop=t+document.body.scrollTop-2+(b-t)/2;
  newRect.style.posLeft=l-2;
  newRect.style.width=r-l;
  newRect.style.height=2;
  newRect.style.visibility="";
 }
}
function createRect(num)
{
 var newMark=document.createElement("<div id='mark"+num+"'></div>");
 edit.insertBefore(newMark);
 var oRcts = oTempRange.getClientRects();
 for(var i=0;i<oRcts.length;i++)
 {
  var t=oRcts[i].top;
  var l=oRcts[i].left;
  var r=oRcts[i].right;
  var b=oRcts[i].bottom;
  var newRect=document.createElement("<v:roundRect oncontextmenu='popID="+num+";popUp();' id='Rect"+num+"no"+i+"' style='position:absolute;visibility:hidden' filled=f strokeColor=red strokeWeight=1.5pt></v:roundRect>");
  newMark.insertBefore(newRect);
  newRect.style.posTop=t+document.body.scrollTop-3;
  newRect.style.posLeft=l-2;
  newRect.style.width=r-l;
  newRect.style.height=b-t;
  newRect.style.visibility="";
 }
}
var PopSrcElement=null;
var SelectOk=false;
var oTempRange=null;
function createTempRange()
{
 hideMenu();
 doc_click();
 if(document.selection.type=="Text")
  {
   oTempRange=document.selection.createRange();  //把选择的文本创建成 TextRange 对象
   if(oTempRange.htmlText!=""){                    //检查选择的是否为空字符
	   RangePosLeft=oTempRange.boundingLeft;
	   RangePosTop =oTempRange.offsetTop+document.body.scrollTop+oTempRange.boundingHeight;
       oTempRange.execCommand("BackColor",true,"#99ccff");;
       oTempRange.execCommand("UnSelect");
	   SelectOk=true;
      }
	  else
	   SelectOK=false;
  }
}
function doc_click()
{
 dragapproved=false;
 if(self.event.srcElement.className=="item")
    return;
 if((self.event.button==1)&&(oTempRange!=null))  //取消临时标记
    {
	   oTempRange.execCommand("BackColor",true,"#EFEFEF");
	   oTempRange=null;
	   SelectOk=false;
	}
}
function popUp()
{
  PopSrcElement=event.srcElement;                  //获得 Popup 事件源
  self.event.returnValue=false;
  setButton();
  var newxx=event.x+document.body.scrollLeft-3;
  var newyy=event.y+document.body.scrollTop-3;
  if((event.clientY+135)>document.body.clientHeight) newyy=newyy-135;
  if((event.clientX+120)>document.body.clientWidth) newxx=newxx-120;
  popmenu.style.posLeft=newxx;
  popmenu.style.posTop=newyy; 
  popmenu.style.display="";
}
function setButton()
{
 document.all.item1.disabled=true;
 document.all.item2.disabled=true;
 document.all.item3.disabled=true;
 if(SelectOk==true)
     {
	 document.all.item1.disabled=false;          //显示标记 按钮
     document.all.item3.disabled=false;          //显示拷贝 按钮	 
	 }
 if(PopSrcElement.className=="wen")	 
     {
	 document.all.item2.disabled=false;          //显示取消标记 按钮
     document.all.item3.disabled=false;          //显示拷贝 按钮	 
     }
 if(popID!=0)
	 document.all.item2.disabled=false;          //显示取消标记 按钮
}
function hideMenu()    //隐藏弹出菜单
{
	popmenu.style.display="none";
}

function setColor(n)   //改变菜单条颜色
{
	document.all("item"+n).style.color="white";
	document.all("item"+n).style.background="#316AC5";
}
function clearColor(n)
{
	document.all("item"+n).style.color="black";
	document.all("item"+n).style.background="white";
}
function maskText()
{
  hideMenu();
  var mask=showModalDialog("Mask.html",null,"status:no;center:yes;help:no;minimize:no;maximize:no;dialogWidth:400px;scroll:no;dialogHeight:250px");
  if(mask!=""){
  	  var del=mask.charAt(1);                       //获得是 删除 还是 修改
	  mask=mask.substring(3,mask.length);    //替换掉参数 ,剩下的就是 文本了
	  nowID++;
	  TempRange = false;
	  if(del=="1")
         {
		  createDelLine(nowID);
          oTempRange.execCommand("BackColor",true,"#EFEFEF");
	      oTempRange=null;
	      SelectOk=false;
		 }
	  else
	  {
        createRect(nowID);
        oTempRange.execCommand("BackColor",true,"#EFEFEF");
	    oTempRange=null;
	    SelectOk=false;
        mask=re(mask);
        var newMemo=document.createElement("<input id='more"+nowID+"' type=hidden>")  //标记的内容
	    newMemo.value=rere(mask);
  	    memo.insertBefore(newMemo);
				
        var newDIV=document.createElement("<DIV id='memo"+nowID+"' oncontextmenu='popID="+nowID+";popUp()' class='wen' style='position:absolute;left:"+RangePosLeft+";top:"+RangePosTop+";width:150px;z-index:9'></DIV>");
		newDIV.innerHTML="<img alt='展开' id='expand"+nowID+"' src='expand.gif' style='cursor:hand' onclick='expandMemo("+nowID+",1)'>"+document.all("more"+nowID).value.substring(0,10);
		memo.insertBefore(newDIV);
	  }
    }
  else
    return
}

var popID=0;

function expandMemo(n,b)
{
  if(b==1)
	 document.all("memo"+n).innerHTML="<img alt='收缩' id='expand"+n+"' src='collapse.gif' style='cursor:hand' onclick='expandMemo("+n+",0)'>"+document.all("more"+n).value;
  else
	 document.all("memo"+n).innerHTML="<img alt='展开' id='expand"+n+"' src='expand.gif' style='cursor:hand' onclick='expandMemo("+n+",1)'>"+document.all("more"+n).value.substring(0,10);	 
}
function copyTo()
{
 hideMenu();
 if(SelectOk==true) //拷贝选择的文字
	 {
	  oTempRange.execCommand("Copy");
	  alert("已经将\n\n"+oTempRange.text+"\n\n复制了!");
	  return
	 }
 if(PopSrcElement.className=="wen") //拷贝 标记的文字
     {
   	  var textR=document.body.createTextRange();
	  textR.moveToElementText(PopSrcElement);
	  textR.execCommand("Copy");
          alert("已经将\n\n"+textR.text+"\n\n复制了!");
	 }
 if(PopSrcElement.className=="editText") //拷贝 标记的文字
     {
   	  var textR=document.body.createTextRange();
	  textR.moveToElementText(PopSrcElement);
	  textR.execCommand("Copy");
          alert("已经将\n\n"+textR.text+"\n\n复制了!");
	 }
	 
}
function save()
{
 if (dialog("确定要保存所做的修改吗?\n你也可以在下次继续修改本公文。","保存修改",36+256)=="6"){
   saveForm.TextContentMemo.value=document.all("memo").innerHTML;
   saveForm.TextContent.value=document.all("edit").innerHTML;
   saveForm.TotalMarked.value=nowID;
   }
}
function unMask()
{
 hideMenu();
 if (dialog("确实要取消对这个标记吗?","取消标记",36+256)=="6")
  {
     document.all("mark"+popID).outerHTML="";
	 if(document.all("memo"+popID))
	    document.all("memo"+popID).outerHTML="";
  }
  popID=0;
}
function showhelp()        //显示帮助信息
{
   var msg="\n"
          +"\n  第一步:选择一段文字"
          +"\n  第二步:在选择的文字上面点右键"
		  +"\n  第三步:选择“标记选中”的,然后输入标记的内容\n\n"
          +"\n  ■注意事项:■■■■■■■\n"
		  +"\n      1.要取消标记,在标记上点右键,选择“取消标记”\n"
		  +"\n      2.要复制选中的文本,请选择“复制选中的”\n"
                  +"\n                                      美洲豹"
	      +"\n\n                                     2002年4月18日";
   dialog(msg,"在线帮助",64);
}
function DragStart() 
{
  if ("IMG"==event.srcElement.tagName)
   event.returnValue=false;
}
//有关移动的过程和函数
var dragapproved=false
var eventsource,x,y
var popeventsource=""
function move()
 {
  if(event.button==1 && dragapproved)
   {
    hideMenu();
    var newleft=temp1+event.clientX-x
	var newtop=temp2+event.clientY-y
	eventsource.style.pixelLeft=newleft
    eventsource.style.pixelTop=newtop
    return false
   }
 }
function drags()
 {
  if((!document.all)&&(event.srcElement.tagName=="INPUT"))
    return  
  if (event.srcElement.className=="wen")
   {
    dragapproved=true
    eventsource=event.srcElement
    temp1=eventsource.style.pixelLeft
    temp2=eventsource.style.pixelTop
    x=event.clientX
    y=event.clientY
    document.onmousemove=move
   }
 }
//document.ondragstart=DragStart;
document.onmouseup=createTempRange;
//document.onselectstart=selectStart;
document.onmousedown=drags;
self.onload=init;
</script>
<script language="VBScript">
Function dialog(msg,title,head)
 dialog=MsgBox(msg,head,title)
End Function
Function re(t)
  tt=t
  tt= Replace(tt,"'","''")
  tt= Trim(Replace(tt,Chr(10),"<br>",1))
  tt= Replace(tt," ","&nbsp;",1)
  re=tt
 End Function
Function reit(str,d,s)
 reit=Replace(str,d,s)
End Function
Function rere(t)
   t=Replace(t,"<","&lt;",1)
   t=Replace(t,">","&gt;",1)
   t=Replace(t,"&lt;br&gt;","<br>",1)
   rere=t
End Function
</script>
<body>
<table align="center">
<tr>
	<td align="center">
<table align="center">
<tr>
<td>公文头部</td>
</tr>
</table>
<div align="left" class="memo" style="position:absolute;top:0;left:0px;width:700;line-height:23px" id="edit" oncontextmenu="popID=0;popUp()">
 <h3>VML 和 TextRange 对象的结合,可以在知道文字位置的情况下给文字画筐,画圈...</h3>
<ul>
<li>第一步:选择一段文字
<li>在选择的文字上面点右键
<li>第三步:选择“标记选中”的,然后输入标记的内容
</ul>
<b>注意:使用的时候,因为标记都是绝对定位,所以文章也必须使用绝对定位!!</b>
&nbsp;&nbsp;&nbsp;&nbsp;各工程公司、项目部: <br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;根据在建工程施工进度的进展情况与业主对工期的要求,经过对工程量的认真盘点,结合集团公司今年的总体施工部署,现下达2002年二季度施工计划,请认真予以执行。今年赣龙线十九标段要完成产值2亿元,宁启线二标段和W10、W11标段的主体工程均要完成,施工任务艰巨,请你们要结合施工现场的实际情况,优化施工资源的配置,抓紧前期征迁工作的办理,见缝插针,把制约工期的桥涵基础、软基施工争取在本季度内超计划完成,为铺开工作面,在施工的黄金季节到来时加快施工进度创造条件。<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;<font style="font-size:12pt">2002年一季度施工计划安排9043万元</font>,由于宁启线启动难,施工受征迁影响太大,赣龙线计划实际上是为适应年度投资计划而安排,又加春节放假和雨季提前的影响,集团公司一季度实际完成建安产值为6495.1万元,完成计划的71.8%。<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;2002年二季度施工计划安排17270万元,其中,基建项目安排14441万元,外委工程安排1519万元,更新改造工程安排1256万元,自身建设及其他小型工程安排54.4万元。各公司2002年二季度施工计划安排如下:一公司3010万元,二公司4570万元,三公司5940万元,四公司1388万元,五公司168万元电务公司1400万元,厦门公司794万元。<br>
<ul>
<li>图形可以任意放</li>
<li>图形可以任意放</li>
<li>图形可以任意放</li>
<li>图形可以任意放</li>
</ul>
<p style="text-indent:20px;"> sadfasfa
<br>sdf</p>
<table border="1">
<tr>
	<td>fddfg</td>
	<td>fgdsfg</td>
</tr>
<tr>
	<td>sdfgsdfg</td>
	<td>sgdfgsfgf</td>
</tr>
</table>


</div>
	
	</td>
</tr>
</table>
<div id="memo"></div>
<div class="bbb" id="popmenu" style="background-color:white;HEIGHT: 135px; LEFT: 0px; POSITION: absolute; TOP: 0px; display:none; WIDTH: 120px; Z-INDEX: 9">
	<button class="item" name="item1" onmouseover="setColor(1)" onmouseout="clearColor(1)" onclick="maskText();">&nbsp;标记选中的</button><br>
	<button class="item" name="item2" onmouseover="setColor(2)" onmouseout="clearColor(2)"  onclick="unMask();">&nbsp;取消标记&nbsp;&nbsp;</button><br> 
	<hr align=center SIZE=2 width="95%">
	<button class="item" name="item3" onmouseover="setColor(3)" onmouseout="clearColor(3)" onclick="copyTo();" >&nbsp;复制&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button><br>
	<button class="item" name="item4" onmouseover="setColor(4)" onmouseout="clearColor(4)" onclick="save();">&nbsp;保存修改&nbsp;&nbsp;</button><br>
	<button class="item" name="item5" onmouseover="setColor(5)" onmouseout="clearColor(5)" onclick="hideMenu();showhelp();">&nbsp;在线帮助&nbsp;&nbsp;</button>
</div>
<form name="saveForm">
<input type="hidden" name="n" value="0">   <!-- 总共有多少留痕操作 -->
<input type="hidden" name="con">             <!-- 文本内容(包含修改过的内容) -->
<input type="hidden" name="memory">         <!-- 留痕的内容 由多个<DIV>组成 -->
</form>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -