VML学习（二）

来源：互联网发布：vps解析域名编辑：程序博客网时间：2024/04/30 08:09

FF、IE下例子:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title>VML学习（二）</title> <script src="commontrend.js" type="text/javascript"></script><style>v\:* { behavior: url(#default#VML);} </style></head> <body> <div id="divID" style="display: block;"><canvas id="tutorial" width="1893" height="811" style="top: 370px; left: 19px; position: absolute;"></canvas></div> <table id="ttable"> <tr> <td id="ttblue0">123</td><td>sdf</td><td>123</td> </tr> <tr><td>4325</td><td id="ttblue1">345</td><td>432</td> </tr>  <tr><td id="ttblue2">4325</td><td>345</td><td>432</td> </tr> </table> <script type="text/javascript">trendVML("divID","ttblue","#000000",3,10);</script></body></html>

var trObject = "trYXid";function isIE() { // ie?if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1)return true;elsereturn false;}if (!isIE()) { // firefox innerText defineHTMLElement.prototype.__defineGetter__("innerText", function() {var anyString = "";var childS = this.childNodes;for (var i = 0; i < childS.length; i++) {if (childS[i].nodeType == 1)// anyString += childS[i].tagName=="BR" ? "\n" :// childS[i].innerText;anyString += childS[i].innerText;else if (childS[i].nodeType == 3)anyString += childS[i].nodeValue;}return anyString;});HTMLElement.prototype.__defineSetter__("innerText", function(sText) {this.textContent = sText;});}if (!isIE()) { // firefox innerText defineHTMLElement.prototype.__defineGetter__("value", function() {var anyString = "";var childS = this.childNodes;for (var i = 0; i < childS.length; i++) {if (childS[i].nodeType == 1)// anyString += childS[i].tagName=="BR" ? "\n" :// childS[i].innerText;anyString += childS[i].innerText;else if (childS[i].nodeType == 3)anyString += childS[i].nodeValue;}return anyString;});HTMLElement.prototype.__defineSetter__("value", function(sText) {this.textContent = sText;});}function getEvent() {var i = 0;if (document.all)return window.event;func = getEvent.caller;while (func != null) {var arg0 = func.arguments[0];if (arg0) {if (arg0.constructor == MouseEvent) {arg0.srcElement = arg0.target;return arg0;}}func = func.caller;}return null;}function getInternetExplorerVersion() {var rv = -1;if (navigator.appName == 'Microsoft Internet Explorer') {var ua = navigator.userAgent;var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");if (re.exec(ua) != null)rv = parseFloat(RegExp.$1);}return rv;}function checkVersion() {var msg = 0;var ver = getInternetExplorerVersion();if (ver > -1) {if (ver >= 8.0)msg = 1;elsemsg = 0;}return msg;}// -------------------------------------------------------------// add disable ie and firefoxvar result = "";var updateTR = "";var Idivname = "";var Icolor = "";var canvas = "";var ctx = "";function trendVML(divName, tdName, color, rows, width) {var versionIe = checkVersion();Idivname = divName;Icolor = color;// execute ie draw linevar x1 = 0;var y1 = 0;if (navigator.userAgent.indexOf("MSIE") > -1) {for (var i = 0; i < rows; i++) {var tb = document.getElementById(tdName + i);if (tb == null) {continue;}if (x1 != 0 && y1 != 0) {var x2 = tb.offsetLeft;var y2 = tb.offsetTop;x1 = x1;x2 = x2 + width;y1 = y1;y2 = y2 + 12;this.IELine(x1, y1, x2, y2);x1 = x2;y1 = y2;} else {x1 = tb.offsetLeft + width;y1 = tb.offsetTop + 12;} }document.getElementById(Idivname).innerHTML = result;} else {createCanvas(tdName, rows);for (var i = 0; i < rows; i++) {var tb = document.getElementById(tdName + i);if (tb == null) {continue;}  if (x1 != 0 && y1 != 0) {  var x2 = tb.offsetLeft;  var y2 = tb.offsetTop;  x1 = x1;  x2 = x2 + width;  y1 = y1;  y2 = y2 + 12;  this.FFLine(x1, y1, x2, y2);  x1 = x2;  y1 = y2;  } else {  x1 = tb.offsetLeft + width;  y1 = tb.offsetTop + 12;  }//this.FFLine(10, 11, 12, 13);}}}function IELine(x1, y1, x2, y2) {result += "<v:line strokecolor=" + Icolor + " from='" + x1 + "px," + y1+ "px' to='" + x2 + "px," + y2 + "px'/>";}function createCanvas(tdName, rows) {// --------height//debuggervar firstNum = document.getElementById(tdName + 0);var lastNum = document.getElementById(tdName + (rows - 1));var top3 = getTop(firstNum);// 48 ---> because of ,from 0 to 8 need to +48 ,change to 2 to 10var height3 = getTop(lastNum) - top3 + getHeight(firstNum) + 48;// --------// widthvar table = document.getElementById(tdName + 0).offsetParent;var firstTR = table.rows.item(0);var lastTR = table.rows.item(rows-1);var top = getTop(firstTR);var left = getLeft(firstTR);var width2 = getWidth(firstTR);// alert(getHeight(lastTR)+"+"+getTop(firstTR)+"+"+getTop(lastTR));var height2 = getTop(lastTR) - top + getHeight(lastTR);canvas = document.createElement("canvas");canvas.id = "tutorial";canvas.style.top = top + "px";canvas.style.left = left + "px";canvas.style.position = "absolute";canvas.style.visibility = true;canvas.width = parseInt(width2);canvas.height = parseInt(height3);// alert("top : "+top+" left : "+left+" width : "+width+" height :// "+height);ctx = canvas.getContext("2d");ctx.fillStyle = Icolor;ctx.strokeStyle = Icolor;ctx.lineWidth = 1;document.getElementById(Idivname).appendChild(canvas);}function FFLine(x1, y1, x2, y2) {ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.closePath();ctx.stroke();ctx.restore();}// -------------------------------------------------------------function closeVML() {result = "";}// 号码分析公共方法// tdName:td中id// status:号码位置标识// num:被分析的号码// countIssue:显示的行擿function divMouse2(tdName, status, num, countIssue) {var event = getEvent();var td = event.srcElement;if (td.className == '') {td.className = "ball_gray";showYXH(tdName, status, countIssue);} else if (td.innerHTML != num) {td.innerHTML = num;} else if (td.innerHTML == num) {td.className = "";closeFengxi();}}function divMouse3(tdName, status, num, countIssue, className) {var event = getEvent();var td = event.srcElement;if (td.className == '') {td.className = className;showYXH(tdName, status, countIssue);} else if (td.innerHTML != num) {td.innerHTML = num;} else if (td.innerHTML == num) {td.className = "";closeFengxi();}}function showYXH(tdName, status, countIssue) { // 显示div 对选定球进行分朿var event = getEvent();var td = event.srcElement;var num = td.innerText;if (td.className != undefined && td.className != "") {var divYXid = document.getElementById('tes');var TTscrollLeft = document.documentElement.scrollLeft;var TToffsetWidth = document.documentElement.offsetWidth;var TTclientX = event.clientX;if ((TToffsetWidth - TTclientX) > (TTclientX - 0)) {var TTtopid = document.getElementById('balltopid');var TTtop2id = document.getElementById('balltop2id');TTtopid.innerHTML = "<img src='/search/trend/img/balltop.gif' />";TTtop2id.innerHTML = "";divYXid.style.left = getLeft(td) + getWidth(td) / 2 - 40 + "px";} else {var TTtopid = document.getElementById('balltopid');var TTtop2id = document.getElementById('balltop2id');TTtopid.innerHTML = "";TTtop2id.innerHTML = "<img src='/search/trend/img/balltop.gif' />";divYXid.style.left = getLeft(td) + getWidth(td) / 2 - 40 - 400+ "px";}divYXid.style.top = getTop(td) + getHeight(td) + 12 + "px";divMouse(tdName, status, num, countIssue);divYXid.style.display = "block";}}function closeFengxi() { // 关闭分析var divYX = document.getElementById("tes");divYX.style.display = "none";}function showFengxi() { // 显示分析divvar divYX = document.getElementById("tes");divYX.style.display = "block";}function divMouse(tdName, status, num, countIssue) {var td = document.getElementById(tdName);var z = document.getElementById("na" + status + num).innerText;var big = document.getElementById("nb" + status + num).innerText;var avg = document.getElementById("nc" + status + num).innerText;var count = document.getElementById("nd" + status + num).innerText;var gailv = parseInt(count) / countIssue * 100;gailv = gailv.toFixed(2);gailv = gailv + "%";var jilv = z / avg;jilv = jilv.toFixed(1);document.getElementById("fengxiid").innerHTML = num;document.getElementById("countIssue").innerHTML = countIssue;document.getElementById("gailv").innerHTML = gailv;document.getElementById("jilv").innerHTML = jilv;document.getElementById("big").innerHTML = big;document.getElementById("avg").innerHTML = avg;document.getElementById("z").innerHTML = z;}function overClass(trName) {if (updateTR != '') {var tn1 = document.getElementById(updateTR);var tdlength1 = tn1.cells.length;for (var i = 0; i < tdlength1; i++) {var className = tn1.cells[i].className;tn1.cells[i].className = className.replace("backChange", "");}}var tn = document.getElementById(trName);var tdlength = tn.cells.length;for (var i = 0; i < tdlength; i++) {tn.cells[i].className = tn.cells[i].className + " backChange";}updateTR = trName;}function overClassDLC(trName) {if (updateTR != '') {var tn1 = document.getElementById(updateTR);var tdlength1 = tn1.cells.length;if(fenceng==1){for (var i = 0; i < tdlength1; i++) {var className = tn1.cells[i].className;if(className =="  b10 "){     tn1.cells[i].style.backgroundColor="";    tn1.cells[i].style.backgroundColor="#d6e1f6";   }else if(tn1.cells[i].className =="borbottom   b10 "){ tn1.cells[i].style.backgroundColor="";     tn1.cells[i].style.backgroundColor="#d6e1f6";      }else{ var className = tn1.cells[i].className;tn1.cells[i].className = className.replace("backChange", "");   }           }}else{  for (var i = 0; i < tdlength1; i++) { var className = tn1.cells[i].className; if(className =="  b10 "){     tn1.cells[i].style.backgroundColor="";     tn1.cells[i].style.backgroundColor="#FFF3E2";   }else if(tn1.cells[i].className =="borbottom   b10 "){ tn1.cells[i].style.backgroundColor="";     tn1.cells[i].style.backgroundColor="#FFF3E2";      }else{tn1.cells[i].className = className.replace("backChange", "");   }   }}}var tn = document.getElementById(trName);var tdlength = tn.cells.length;for (var i = 0; i < tdlength; i++) {   if(tn.cells[i].className=="  b10 "){   tn.cells[i].style.backgroundColor="";     tn.cells[i].style.backgroundColor="#DDDDDD";   }else if(tn.cells[i].className =="borbottom   b10 "){ tn.cells[i].style.backgroundColor="";     tn.cells[i].style.backgroundColor="#DDDDDD";      }else{ tn.cells[i].className = tn.cells[i].className + " backChange";   }}updateTR = trName;}function cancelFenceng(){  if (updateTR != '') {var tn1 = document.getElementById(updateTR);var tdlength1 = tn1.cells.length;if(fenceng==0){for (var i = 0; i < tdlength1; i++) {var className = tn1.cells[i].className;if(className =="  b10 "){     tn1.cells[i].style.backgroundColor="";    tn1.cells[i].style.backgroundColor="#d6e1f6";   }else if(tn1.cells[i].className =="borbottom   b10 "){ tn1.cells[i].style.backgroundColor="";     tn1.cells[i].style.backgroundColor="#d6e1f6";      }else{ var className = tn1.cells[i].className;tn1.cells[i].className = className.replace("backChange", "");   }           }}else{  for (var i = 0; i < tdlength1; i++) { var className = tn1.cells[i].className; if(className =="  b10 "){     tn1.cells[i].style.backgroundColor="";     tn1.cells[i].style.backgroundColor="#FFF3E2";   }else if(tn1.cells[i].className =="borbottom   b10 "){ tn1.cells[i].style.backgroundColor="";     tn1.cells[i].style.backgroundColor="#FFF3E2";      }else{tn1.cells[i].className = className.replace("backChange", "");   }   }}}}function trendYiLou(tdName,rows,cells,value){     //var arr=new Array();     //arr[i]=new Array();      //arr[i][j]=hang.innerText;      if(value==1){   for(var i=0;i<rows;i++){      for(var j=0;j<cells;j++){         var hang=document.getElementById(tdName+i+"_"+j);         if (hang == null) {continue;}     hang.innerText="";      }   }   }else{   for(var i=0;i<rows;i++){      for(var j=0;j<cells;j++){         var hang2=document.getElementById(tdName+i+"_"+j);         if (hang2 == null) {continue;}      hang2.innerText=hang2.title;        }   }   }}function outClass(trName) {var tn = document.getElementById(trName);var tdlength = tn.cells.length;for (var i = 0; i < tdlength; i++) {var className = tn.cells[i].className;var classArr = className.split(" ");if (classArr.length > 2) {tn.cells[i].className = classArr[0] + " " + classArr[1];} else {tn.cells[i].className = classArr[0];}}}// tdName: td中id的固定便// countCells:需要算遗漏值的总个擿// countRows:需要算遗漏值的总行擿function yilouAnalysis(tdName, countCells, countRows) {var countNum = new Array(countCells);for (var v = 0; v < countCells; v++) {countNum[v] = 0;}for (var row = 0; row < countRows; row++) {for (var cell = 0; cell < countCells; cell++) {var cetd = document.getElementById(tdName + row + tdName + cell);if (cetd.className == '') {countNum[cell] = countNum[cell] + 1;} else {countNum[cell] = 0;}if (countNum[cell] != 0) {cetd.innerText = countNum[cell];}}}}function getTop(e) {//debuggervar offset = e.offsetTop;if (e.offsetParent != null)offset += getTop(e.offsetParent);return offset;}function getLeft(e) {var offset = e.offsetLeft;if (e.offsetParent != null)offset += getLeft(e.offsetParent);return offset;}function getWidth(e) {var offset = e.offsetWidth;return offset;}function getHeight(e) {var offset = e.offsetHeight;return offset;}function getTrObjectID(obj) {trObject = obj.id;}  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-20172084-4']);  _gaq.push(['_addOrganic', 'soso', 'w']);  _gaq.push(['_addOrganic', 'sogou', 'query']);  _gaq.push(['_addOrganic', 'youdao', 'q']);  _gaq.push(['_addIgnoredOrganic', '彩票大赢嬿']);  _gaq.push(['_setDomainName', '.cpdyj.com']);  _gaq.push(['_setAllowHash', false]);     _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();