VML学习(二)

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;
	else
		return false;
}

if (!isIE()) { // firefox innerText define
	HTMLElement.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 define
	HTMLElement.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;
		else
			msg = 0;
	}
	return msg;

}

// -------------------------------------------------------------
// add disable ie and firefox

var 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 line
	var 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
	//debugger
	var 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 10
	var height3 = getTop(lastNum) - top3 + getHeight(firstNum) + 48;

	// --------
	// width
	var 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() { // 显示分析div
	var 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) {
	//debugger
	var 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);

  })();


 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值