如果让下面的代码兼容谷歌和firefox浏览器,解决立即给分!

好记忆不如烂笔头abc 2014-12-16 02:41:22
以下代码在ie上可以正常运行记录和播放轨迹。在google浏览器和firefox没有任何反应。请教高手如何修改才能兼容其它浏览器,谢谢!
解决立即给分!

<HTML>
<HEAD>
<TITLE>录制鼠标轨迹</TITLE>
<script language="JavaScript">
<!--
//var mousefollow=document.getElementById("mousefollow");
//var maxnum=document.getElementById("maxnum");
//var arrow=document.getElementById("arrow");
//alert(arrow);
var mousex=new Array();
var mousey=new Array();
var i;
var j=0;
var k;
var recordcount=0;
var repeat;
var repeat2;
var repeat3;
var speed=50;
function startthis() {
recordcount=1;
i=0;
mousex=new Array();
mousey=new Array();
recordthis();
}

function recordthis() {
var e = e || window.event;
if (maxnum.value=='' || isNaN(maxnum.value) == true || maxnum.value<0) {
if (recordcount==1) {
mousex[i]=mousefollow.offsetLeft;
document.write(mousex[i]);
mousey[i]=mousefollow.offsetTop;
i++;
k=i;
//alert(k);
textfield.value='无时间限制';
}
}
else {
if (recordcount==1) {
if (i<maxnum.value) {
mousex[i]=mousefollow.offsetLeft;
mousey[i]=mousefollow.offsetTop;
i++;
k=i;
textfield.value='剩余'+(maxnum.value-i)+'/50秒';
}
else {
recordcount=0;
textfield.value='时间到';}
}
}
repeat=setTimeout("recordthis()",20);
}

function stopthis() {
clearTimeout("repeat");
recordcount=0;
}

function playthis() {
clearTimeout("repeat");
clearTimeout("repeat3");
recordcount=0;
if (j<i-1) {
arrow.style.pixelLeft=mousex[j];
arrow.style.pixelTop=mousey[j];
arrow.style.visibility='visible';
j++;
repeat2=setTimeout("playthis()",speed);
}
else {clearTimeout("repeat2");
arrow.style.visibility='hidden';
j=0;
}
}

function rewindthis() {
clearTimeout("repeat");
clearTimeout("repeat2");
recordcount=0;
if (k>0) {
arrow.style.pixelLeft=mousex[k-1];
arrow.style.pixelTop=mousey[k-1];
arrow.style.visibility='visible';
k--;
repeat3=setTimeout("rewindthis()",speed);
}
else {clearTimeout("repeat3");
arrow.style.visibility='hidden';
k=i;
}
}

function follow() {
var e = e || window.event;
mousefollow.style.pixelLeft=e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mousefollow.style.pixelTop=e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
// -->
</script>
<link rel="stylesheet" href="test.css" type="text/css">
</HEAD>
<BODY onmousemove=follow()>
<div id="arrow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden"><img src="http://www.codefans.net/jscss/demoimg/201302/cursor.gif" ></div>
<div id="mousefollow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden">.</div>
<input type="text" value=100 id="maxnum" name="maxnum" size="4" maxlength="4"><input type=button onclick=startthis() value=录制><input type=button onclick=stopthis() value=停止><input type=button onclick="speed=50;playthis()" value=播放><input type=button onclick="speed=2;playthis()" value=快放><input type=button onclick="speed=150;playthis()" value=慢放><input type=button onclick="speed=50;rewindthis()" value=倒放><input type="button" name="textfield" style="width:100px" value="无时间限制">


</BODY>
</HTML>
...全文
295 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
自己解决啦: <HTML> <HEAD> <TITLE>录制鼠标轨迹</TITLE> <link rel="stylesheet" href="test.css" type="text/css"> </HEAD> <BODY onmousemove=follow()> <div id="arrow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden"> <img src="http://www.codefans.net/jscss/demoimg/201302/cursor.gif"> </div> <div id="mousefollow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden">.</div> <input type="text" value=100 id="maxnum" name="maxnum" size="4" maxlength="4"> <input type=button onclick=startthis() value=录制> <input type=button onclick=stopthis() value=停止> <input type=button onclick="speed=50;playthis()" value=播放> <input type=button onclick="speed=2;playthis()" value=快放> <input type=button onclick="speed=150;playthis()" value=慢放> <input type=button onclick="speed=50;rewindthis()" value=倒放> <input type="button" id="textfield" name="textfield" style="width:100px" value="无时间限制"> <div id=ttt style="width:1024px;height:1024px;background-color:#ffffff;"></div> <script language="JavaScript"> <!-- //var mousefollow=document.getElementById("mousefollow"); //var maxnum=document.getElementById("maxnum"); //var arrow=document.getElementById("arrow"); //alert(arrow); var mousex = new Array(); var mousey = new Array(); var i; var j = 0; var k; var recordcount = 0; var repeat; var repeat2; var repeat3; var speed = 50; var textfield=document.getElementById("textfield"); function startthis() { recordcount = 1; i = 0; mousex = new Array(); mousey = new Array(); recordthis(); } function recordthis() { var e = e || window.event; if (maxnum.value == '' || isNaN(maxnum.value) == true || maxnum.value < 0) { if (recordcount == 1) { mousex[i] = mousefollow.offsetLeft; mousey[i] = mousefollow.offsetTop; i++; k = i; //alert(k); textfield.value = '无时间限制'; } } else { if (recordcount == 1) { if (i < maxnum.value) { mousex[i] = mousefollow.offsetLeft; mousey[i] = mousefollow.offsetTop; i++; k = i; textfield.value = '剩余' + (maxnum.value - i) + '/50秒'; } else { recordcount = 0; textfield.value = '时间到'; } } } repeat = setTimeout("recordthis()", 20); } function stopthis() { clearTimeout("repeat"); recordcount = 0; } function playthis() { clearTimeout("repeat"); clearTimeout("repeat3"); recordcount = 0; if (j < i - 1) { arrow.style.left = mousex[j]; // alert(arrow.style.Left); arrow.style.top = mousey[j]; arrow.style.visibility = 'visible'; j++; repeat2 = setTimeout("playthis()", speed); } else { clearTimeout("repeat2"); arrow.style.visibility = 'hidden'; j = 0; } } function rewindthis() { clearTimeout("repeat"); clearTimeout("repeat2"); recordcount = 0; if (k > 0) { arrow.style.left = mousex[k - 1]; arrow.style.top = mousey[k - 1]; arrow.style.visibility = 'visible'; k--; repeat3 = setTimeout("rewindthis()", speed); } else { clearTimeout("repeat3"); arrow.style.visibility = 'hidden'; k = i; } } function follow() { var e = e || window.event; mousefollow.style.left = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; document.getElementById('ttt').innerHTML= mousefollow.style.left; mousefollow.style.top = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } // --> </script> </BODY> </HTML>
  • 打赏
  • 举报
回复
貌似兼容性还有style.pixelLeft,style.pixelTop 在chrome和firefox的问题,所以总不好使。
  • 打赏
  • 举报
回复
引用 4 楼 aiimi 的回复:
chrome和firfox是不能直接用标签的name做变量的,要用document.getElementByName获取 用jquery库就没那么麻烦了 我试着帮你改了改,但不知道你这个是做什么用的,还有几个地方还没改过来,你自己看看,用jquery了 http://www.htmljscss.com/editor/7F3Z9W.html
非常感谢。 不过您确定在chrome浏览器测试过吗?测了还是不好使啊。 另外能否不用jquery实现?
whqet 2014-12-16
  • 打赏
  • 举报
回复
回头再看看呀
竹贤侄 2014-12-16
  • 打赏
  • 举报
回复
chrome和firfox是不能直接用标签的name做变量的,要用document.getElementByName获取 用jquery库就没那么麻烦了 我试着帮你改了改,但不知道你这个是做什么用的,还有几个地方还没改过来,你自己看看,用jquery了 http://www.htmljscss.com/editor/7F3Z9W.html
  • 打赏
  • 举报
回复
播放的时候,在谷歌和firefox浏览器没反应。
  • 打赏
  • 举报
回复
测试过放到后端,对于谷歌和firefox浏览器也是不行的。
whqet 2014-12-16
  • 打赏
  • 举报
回复

<HTML>

	<HEAD>
		<TITLE>录制鼠标轨迹</TITLE>
		<meta charset="UTF-8" />
		
		<link rel="stylesheet" href="test.css" type="text/css">
	</HEAD>

	<BODY onmousemove=follow()>
		<div id="arrow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden">
			<img src="http://www.codefans.net/jscss/demoimg/201302/cursor.gif">
		</div>
		<div id="mousefollow" style="position:absolute; width:12px; height:21px; z-index:1;visibility:hidden">.</div>
		<input type="text" value=100 id="maxnum" name="maxnum" size="4" maxlength="4">
		<input type=button onclick=startthis() value=录制>
		<input type=button onclick=stopthis() value=停止>
		<input type=button onclick="speed=50;playthis()" value=播放>
		<input type=button onclick="speed=2;playthis()" value=快放>
		<input type=button onclick="speed=150;playthis()" value=慢放>
		<input type=button onclick="speed=50;rewindthis()" value=倒放>
		<input type="button" id="textfield" name="textfield" style="width:100px" value="无时间限制">

<script language="JavaScript">
			 <!--
			 //var mousefollow=document.getElementById("mousefollow");
			 //var maxnum=document.getElementById("maxnum");
			 //var arrow=document.getElementById("arrow");
			 //alert(arrow);
			var mousex = new Array();
			var mousey = new Array();
			var i;
			var j = 0;
			var k;
			var recordcount = 0;
			var repeat;
			var repeat2;
			var repeat3;
			var speed = 50;
			var textfield=document.getElementById("textfield");

			function startthis() {
				recordcount = 1;
				i = 0;
				mousex = new Array();
				mousey = new Array();
				recordthis();
			}

			function recordthis() {
				var e = e || window.event;
				if (maxnum.value == '' || isNaN(maxnum.value) == true || maxnum.value < 0) {
					if (recordcount == 1) {
						mousex[i] = mousefollow.offsetLeft;
						document.write(mousex[i]);
						mousey[i] = mousefollow.offsetTop;
						i++;
						k = i;
						//alert(k);
						textfield.value = '无时间限制';
					}
				} else {
					if (recordcount == 1) {
						if (i < maxnum.value) {
							mousex[i] = mousefollow.offsetLeft;
							mousey[i] = mousefollow.offsetTop;
							i++;
							k = i;
							textfield.value = '剩余' + (maxnum.value - i) + '/50秒';
						} else {
							recordcount = 0;
							textfield.value = '时间到';
						}
					}
				}
				repeat = setTimeout("recordthis()", 20);
			}

			function stopthis() {
				clearTimeout("repeat");
				recordcount = 0;
			}

			function playthis() {
				clearTimeout("repeat");
				clearTimeout("repeat3");
				recordcount = 0;
				if (j < i - 1) {
					arrow.style.pixelLeft = mousex[j];
					arrow.style.pixelTop = mousey[j];
					arrow.style.visibility = 'visible';
					j++;
					repeat2 = setTimeout("playthis()", speed);
				} else {
					clearTimeout("repeat2");
					arrow.style.visibility = 'hidden';
					j = 0;
				}
			}

			function rewindthis() {
				clearTimeout("repeat");
				clearTimeout("repeat2");
				recordcount = 0;
				if (k > 0) {
					arrow.style.pixelLeft = mousex[k - 1];
					arrow.style.pixelTop = mousey[k - 1];
					arrow.style.visibility = 'visible';
					k--;
					repeat3 = setTimeout("rewindthis()", speed);
				} else {
					clearTimeout("repeat3");
					arrow.style.visibility = 'hidden';
					k = i;
				}
			}

			function follow() {
					var e = e || window.event;
					mousefollow.style.pixelLeft = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
					mousefollow.style.pixelTop = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
				}
				// -->
		</script>
	</BODY>
</HTML>
js放到页面后端或是用window.onload,加载网页完毕再执行. 之前的textfield没有定义

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧