鱼圈技术分享-秒数跳转

最新推荐文章于 2019-09-19 21:08:18 发布

希帆

最新推荐文章于 2019-09-19 21:08:18 发布

阅读量252

点赞数 1

分类专栏：前端文章标签：秒数跳转

本文链接：https://blog.csdn.net/qq_26397239/article/details/93773718

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

作者：刘旭濠

最近无聊不知道该做什么，然后就找事做，想自己开发出一个APP，这个APP名字如标题一样叫鱼圈，这个是一开始和小伙伴打算做可是由于技术问题就打算拖延了，所以这个软件离问世还有一段时间，还有学习很多。
废话不多说，我先来和大家分享几个功能吧，秒数跳转这个大家不陌生吧，这个是每个手机APP都有的一个秒数跳转，什么是秒数跳转呢，我自己理解为是，先点击APP然后，一开始不是有一个广告么，上面显示数字倒计时，到了一定的时间就会跳到页面。
首先跳转嘛，也可以说是定时器，到了一定时间就跳到另一个页面，为什么要APP要用上秒数跳转呢，大概有两个原因，第一，广告费嘛，广告肯定是要打得啦，用户一看到就感觉哇塞这个不错然后就点击进去（这个时候就要放一个图片跳转地址 <a href="http://www.php.cn"><img src="/test/img/2.png"></a>），第二会显得高大上一点，比如动态的加载图（这个暂时暂时还不会，以后有机会学习，会跟大家分享）
好了废话不多说直接看代码：
首先你要看一下，你要跳转的页面，定个位子给它:

window.location.href = 'index.html';

(我用的是这个HBuilderX写的可能方式有点不同但是写法都是差不多的)
然后接着就是设定毫秒（1000为一秒）

if(sec > 0){
       document.getElementById('remainSeconds').innerHTML = sec;
        setTimeout(this.jump,1000);
 }

（1000是毫秒的意思1000毫秒就是1秒）至于快慢看自己喜欢吧还是建议一下以一秒为标准好
最后计时多少秒数

var sec = 10;

计时多少秒数呢还是看自己吧，一般来说5秒的好不快也不慢刚刚好
接下来就是在页面显示秒数的了比较要是没有秒数就可能会有点尴尬

<span id="remainSeconds" >5</span>

这个是通过id来获取秒数计时在来变化
然后接下来放一下全部代码来看看吧
还有页面的效果图

<!DOCTYPE html">
<html>
<head>
	<style>
		span.remainSeconds{
			
		}
	</style>
<span id="remainSeconds" >5</span>
<script type="text/javascript">
    var sec = 10;
    function jump(){
        sec--;
        if(sec > 0){
            document.getElementById('remainSeconds').innerHTML = sec;
            setTimeout(this.jump,1000);
        }else{
            window.location.href = 'index.html';
        }
    }
    setTimeout(jump,1000);
</script>
</head>
</html>

希帆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鱼圈技术分享-秒数跳转

作者：刘旭濠最近无聊不知道该做什么，然后就找事做，想自己开发出一个APP，这个APP名字如标题一样叫鱼圈，这个是一开始和小伙伴打算做可是由于技术问题就打算拖延了，所以这个软件离问世还有一段时间，还有学习很多。废话不多说，我先来和大家分享几个功能吧，秒数跳转这个大家不陌生吧，这个是每个手机APP都有的一个秒数跳转，什么是秒数跳转呢，我自己理解为是，先点击APP然后，一开始不是有一个广告么，上面显...
复制链接

扫一扫