此代码在前端指定的时间间隔内动态移动一些仪表板文件。现在,一旦我移动我的鼠标在任何特定的仪表板文件,它不会停止。所以建议我停止鼠标上的动态动作的代码。
var i=0;
var STP;
var dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];
function k()
{
self.setInterval("clock()",8000);
}
function clock()
{
document.getElementById('mainfrm').src =dd[i];
i++;
if(i==4)
{
i=0;
}
}
function StopFunction(){
clearInterval(stp);
}
布局页:
<div class="map">
<body onload="k()" onmouseover="StopFunction()">
<iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm">
</iframe>
</div>
</div>
.
--编辑
现在onmouseover函数正在工作,但是当我移除鼠标时,没有任何动作发生。我试过使用onmouseout函数。有没有人可以建议我js功能保留或继续现有的旧的移除鼠标。
var stp;
function k()
{
stp=setInterval(function(){clock()},8000);
}
function clock()
{
document.getElementById('mainfrm').src =dd[i];
i++;
if(i==4)
{
i=0;
}
}
function StopFunction()
{
clearInterval(stp);
}
<div class="map" onmouseover="StopFunction()">
试一下这段完整的代码-所有不引人注目的唯一要考虑的是全局var,这是令人讨厌的
演示
<html>
<head>
<script>
var tId, urlIndex=0, dd = ['/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2FDashboards&file=FPBI_Map.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonReg.wcdf',
'/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=AnalysisBasedonTime.wcdf'];
function clock() {
document.getElementById('mainfrm').src =dd[urlIndex];
urlIndex++;
if(urlIndex>=dd.length) {
urlIndex=0;
}
}
function k() {
tId = setInterval(clock,8000);
}
window.onload=function() {
k(); // start the script
var mapDiv = document.getElementById("mapDiv");
mapDiv.onmouseover=function() {
clearInterval(tId)
}
// the following MAY trigger when over the iframe - remove if necessary
mapDiv.onmouseout=function() {
k();
}
}
</script>
</head>
<body>
<div id="mapDiv" class="map">
<iframe src="/pentaho/content/pentaho-cdf-dd/Render?solution=FPBI&path=%2Fcss&file=FPBIImg.wcdf" style="width:675px;height:690px;overflow:hidden" frameborder='0' id="mainfrm"></iframe>
</div>
</body>
</html>