您的位置：首页 > 其它

【牛腩新闻发布系统】网页计时跳转Demo

2016-10-05 13:12 260 查看
       牛腩新闻发布系统里面，出错页有一个计时页面跳转的功能。就看着做了一个跳转的小例子。

页面图展示：



代码展示：

<pre name="code" class="html"><!--
* 创建人：琚建飞
* 创建时间：2016年10月5日13:06:47
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页计时</title>
<link href="TimerSheet.css" rel="stylesheet" />
<script type="text/javascript">
var i = 20;
var intervalid;
intervalid = setInterval("fun()", 1000);//计时函数,函数名和时间间隔
function fun() {
if (i == 1)  //判断到0的时候，自动跳转到百度页面
{
window.location.href = "https://www.baidu.com/"; //超链接也可以写跳转到另一个页面
clearInterval(intervalid);
}
document.getElementById("mes").innerHTML = i;
i--;
}
</script>
</head>
<body>
<div id="errorfrm" class="round1">
<h3>出错了！</h3>
<div>
<p>系统出错，请联系管理员。</p>
<p><span id="mes">20</span>秒钟后返回首页</p>
</div>
</div>
</body>
</html>






<span style="font-family:Microsoft YaHei;font-size:18px;">/*
* 创建人：琚建飞
* 创建时间：2016年10月5日13:06:30
*/

body {

}
#errorfrm p span {
color:#f00;
font-size:20px;
font-weight:bold;
}
#errorfrm {
text-align: center;
}</span>


效果动态图展示：


总结
           刚接触新东西，觉得都很有意思，这时候，还是多敲代码，多敲例子，实践出真知。希望对你有帮助。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航