前端学习代码实例-JavaScript 页面跳转效果

运用JavaScript,实现了在10秒之后跳转到指定页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端开发学习q群:731771211   详细教程讲解</title>
<script type="text/javascript">
function countDown(secs,surl){
  var jumpTo = document.getElementById(‘jumpTo‘);
  jumpTo.innerHTML=secs;
  if((secs--)>0){
    setTimeout("countDown("+secs+",‘"+surl+"‘)",1000);
  }
  else{
    location.href=surl;
  }
}
window.onload=function(){
  countDown(10,‘http://www.softwhy.com/‘);
}
</script>
</head>
<body>
<span id="jumpTo">10</span>秒后自动跳转到http://www.softwhy.com/
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function countDown(secs,surl){},第一个参数规定倒计时时长,第二个参数规定要跳转的页面。

(2).var jumpTo = document.getElementById(‘jumpTo‘),获取id属性值为jumpTo的元素对象。

(3).jumpTo.innerHTML=secs,设置元素的初始内容,其实就是倒计时的最初值。

(4).if((secs--)>0){ setTimeout("countDown("+secs+",‘"+surl+"‘)",1000);

},如果secs当前大于0的时候,调用setTimeout()方法,这里是采用了递归的方式。

(5).else{

location.href=surl;

},否则就进行跳转动作。

原文地址:https://blog.51cto.com/14284898/2385387

时间: 2024-10-28 08:34:18

前端学习代码实例-JavaScript 页面跳转效果的相关文章

前端学习代码实例-JavaScript文本循环变色效果

介绍一下如何实现一行文本实现一段文本内容能够滚动循环变色效果. 此效果可以有效的提高美观度,使用户的印象更加深刻,当然也就能够使网站更加能够留住用户. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &

前端学习代码实例-JavaScript 阻止击超链接的跳转

点击链接具有跳转效果,但是有时我们不需要这种效果. 下面就通过代码实例介绍一下如何实现此效果. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习扣qun:731

前端学习代码实例-JavaScript动态创建div并写入文本

介绍一下如何利用JavaScript动态创建div元素,然后在其中写入文本. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习扣qun:731771211

前端学习代码实例-JavaScript点击按钮弹出层效果

强大的效果其实都是由一个个简单的功能组合而成的,下面介绍一下如何实现点击一个按钮弹出一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:73

前端学习代码实例-JavaScript阻止事件冒泡

任何现象都可能是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便. 下面通过带来实例介绍一下如何阻止事件冒泡. 代码实例如下: ] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

前端学习代码实例-JavaScript商城购物车价格自动计算功能

分享一段代码实例,它实现购物车价格自动计算功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:731771211 详细教程讲解</title&

前端学习代码实例-JavaScript 图片等比例缩放裁切详解

本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果. 图片有两种应用方式,一种作为子元素存在,一种是作为背景图片. 在每一种应用方式中,图片的等比例缩放又可以大致分为如下几种情况: (1).确保图片能够填充满元素,超出的部分被裁切或者隐藏. (2).确保图片的长或者宽填充满元素,超出的部分被裁切或者隐藏. 下面通过代码实例分别介绍一下上述列举的中可能,需要的朋友可以做一下参考. 一.作为背景图片: 通过CSS的background-image属性可以设置元素的背景图片效果. 下面就以如

前端学习代码实例-JavaScript 生成随机数

分享一段非常强大的随机数生成功能代码实例,有需要的朋友可以做一下参考. 代码实例如下: (function(){ var charCodeIndex = [[48,57],[65,90],[97,122]]; var charCodeArr = []; function getBetweenRound(min,max){ return Math.floor(min+Math.random()*(max-min)); }; function getCharCode(){ for(var index

前端学习实践笔记--JavaScript深入【1】

这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉,茫茫然而不得其要领,索性在一边写博文中,求得突破,乃至更上一层楼. 看过的书籍推荐: <javascript语言精粹> Douglas Crockford <javascript设计模式> Addy Osmani <javascript设计模式> Ross Harmes