JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var i=10;
function show(){
var div=document.createElement('div');
div.style.cssText='position:absolute;top:0px;bottom:0px;left:0px;right:0px;filter:alpha(opacity=50);opacity:0.5;background-color:black;';
document.body.appendChild(div);
var span=document.createElement('span');
span.style.cssText='position:absolute;left:50%;top:50%;';
span.innerHTML=i--;
document.body.appendChild(span);
return span;
}
window.onload=function(){
document.getElementById('test').onclick=function(){
var span=show();
var p=window.setInterval(function(){
if(i>0){
span.innerHTML=i--;
}else{
window.clearInterval(p);
window.location.href='http://www.baidu.com';
}
},1000);

}
}
</script>
</head><body>
<input type="button" value="show" id="test">
</body>
</html>类似这样试试

解决方案 »

  1.   

    我来给大体解释一下吧
    //这个function主要是为了定义对应的元素，就不详细解释了，有问题继续留言哦
    function show()
    {
    var div=document.createElement('div');
    div.style.cssText='position:absolute;top:0px;bottom:0px;left:0px;right:0px;filter:alpha(opacity=50);opacity:0.5;background-color:black;';
    document.body.appendChild(div);
     var span=document.createElement('span');
     span.style.cssText='position:absolute;left:50%;top:50%;';
    span.innerHTML=i--;
    document.body.appendChild(span);
    return span;
    }
    //当整个页面加载完毕后，会自动执行function这个方法
    window.onload=function(){
    //为页面元素id为test的元素的onclick属性添加对应的方法
    document.getElementById('test').onclick=function(){
    //调用上面的show这个function
            var span=show();
    //下面这个是设置了一个定时器，这个定时器的作用是每隔1000毫秒都会调用一次下面的这个function
            var p=window.setInterval(function()
    {
                if(i>0)
    {
                    span.innerHTML=i--;
                }else
    {
                    //清除掉定时器
    window.clearInterval(p);
    //跳转到对应的页面
                    window.location.href='http://www.baidu.com';
                }
            },1000);
        }
    }
    </script>
    如果还是不明白的话，建议去学习一下js的基础知识，比如定时器啦，比如window这个对象，