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);
})();