//取title
var title = document.getElementsByTagName('title')[0]
//需要修改的时候,直接给innerHTML复制
var title.innerHTML = '这里在闪'。
真的不行,换句话,没有办法的。<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function isMinStatus() {
var isMin = false
if (window.outerWidth != undefined) {
isMin = window.outerWidth <= 160 &&window.outerHeight <= 27
}
else {
isMin = window.screenTop <-30000 &&window.screenLeft <-30000
}
return isMin
alert(111)
}
function notifyTeacher(){
alert('document.body.offsetTop:'+document.body.offsetTop+',document.body.offsetWidth:'+document.body.offsetWidth+',screen.availWidth:'+screen.availWidth+',top.screenTop:'+top.screenTop)
alert('window.screen.width:'+window.screen.width+',window.screen.height:'+window.screen.height+',window.screen.availWidth:'+window.screen.availWidth+',window.screen.availHeight:'+window.screen.availHeight)
alert(top.name)
alert(top.screenTop+'|'+top.screenLeft)
if(isMinStatus()){
window.focus()
}else{
document.focus()
}
}
</script>
</head>
<body onLoad="notifyTeacher()">
</body>
</html>
javascript的setTimeout以及setInterval休眠问题。前端码农们在做项目中时候,必定不可少的需要做到轮播效果。但是有些特殊的需求,比如:
需要做到第一个容器内容轮播滚动之后,第二个容器内部再轮播滚动,再第三个容器内容轮播滚动。
这时候我的一开始的思路是:每个容器都看成一个单独的轮播效果,既然是依次的滚动就设定滚动开始时间差,三个setTimeout()分别延迟差。
HTML 代码:
<div id="warp">
<div class="items">
<ul class="island s1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div class="items">
<ul class="island s2">
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
<div class="items">
<ul class="island s3">
<li>777</li>
<li>888</li>
<li>999</li>
<li>000</li>
</ul>
</div>
</div>
CSS 代码:
.items{height: 18pxoverflow: hiddenmargin-bottom: 10pxborder-bottom: 1px dashed #999}
JAVASCRIPT 代码:(基于jquery的实现)
var uls = $("#warp").find(".island"),
lh = uls.find('li').height(),
size = uls.size(),
Global=[]//全局变量
uls.each(function(i,el){
$(el).find('li').first().clone(true).appendTo($(el))
})
/*动画效果*/
function animates(i){
Global[i]==undefined&&(Global[i]=0)
Global[i]++
_els =uls.eq(i)
var len = _els.find('li').length
_els.animate({"marginTop":-Global[i]*lh+"px"},600,function(){
if(Global[i] == len-1){
Global[i]=0
_els.css({"margin-top":"0px"})
}
})
}
function interval(i){
setInterval(function(){
animates(i)
},5000)
}
for(var x=0x<sizex++){
(function(x){
setTimeout(function(){
interval(x)
},650+x*650)
})(x)
}
一开始的时候我发现都是OK的,但是当我切换到别的页面,或者暂时最小化的时候,轮播就变得杂乱无章。这个问题困扰我很久,到公司请教
大牛同事,他说可能是 setInterval休眠问题导致。
经过仔细的查阅资料以及实践,发现当页面最小化时候或者切换网页浏览其他网页等情况时, setInterval是会暂时进入“休眠”状态,但是并不是不执行程序,它会把需要执行的操作放在队列中 ,等到下次窗口一打开的一瞬间把队列里面的全部执行,由于程序处理太快我们大部分时候并没有注意到这个问题。但是你去看所有网站的轮播效果,
假设现在你轮播的是第四张大图,下次打开时候播放的可能是任意的。
再分析上面的程序:
我们让程序分别过650ms, 1300ms,1950ms执行如果窗口一直是这个是本窗口,也就是没有进行休眠。程序可以照常执行。
如果窗口最小化,程序进入休眠,会把队列中的操作在很快时间内一起执行,所以程序一下子就乱啦。
那如何解决这个问题呢?还是想了啦jquery的animate,如果在动画animate的回调中进行递归,进入下次的轮播。那不就完美解决!!
让我们来看程序:
JAVASCRIPT代码:
var uls = $("#warp").find(".island"),
lh = uls.find('li').height(),
size = uls.size(),
i = 0
uls.each(function(i,el){
$(el).find('li').first().clone(true).appendTo($(el))
})
function animates(i){
var ul = $('.items').eq(i).find('ul')
if(!ul){returnfalse}
var count = parseInt(ul.attr("count-role")||0)
count++
var len = ul.find('li').length
ul.animate({"marginTop":-count*lh+"px"},600,function(){
if(count == len-1){
count=0
ul.css({"margin-top":"0px"})
}
ul.attr("count-role",count)
animates(++i)
})
}
function interval(){
setInterval(function(){
animates(i)
},5000)
}
interval()
这样就完美解决了这个问题。
我猜想可能由于浏览器的特殊性,它的资源有限。所以采用这个策略,也是可以理解的。