背景定时切换，文字定时切换等。

好久没写博文了，这段时间忙于自己的项目。一直没来得及整理。昨天突然做到一个对背景定时切换的小玩意。

想了想很小的功能，但是自己也懒得去写，就去copy了一个，现在想想还挺实用，还是保存下来把。

下面直接贴上代码。

很简单，就是对随机数跟setInterval的简单使用。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>定时更换背景</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //图片数组
            var sArr =["img/banner.png","img/fenx.png","img/gony.png"];
            var text=["哼哼哈嘿","哼哼电话好多好多好多好","哈哈哈哈啊哈哈"];
            //定时更换背景
            setInterval(function(){
                $("body").css("backgroundImage","url("+sArr[fRandomBy(0,2)]+")");
                $("p").html(text[fRandomBy(0,2)]);
            },3000); //单位毫秒
            //设定随机数的范围
            function fRandomBy(under, over){
                switch(arguments.length){
                    case 1: return parseInt(Math.random()*under+1);
                    case 2: return parseInt(Math.random()*(over-under+1) + under);
                    default: return 0;
                }
            }
        })
    </script>
</head>
<body style="background-image:url(img/logo.png)">
    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
</body>
</html>

实现原理：就是把所需要定时切换的内容放到一个数组当中，利用随机数产生随机下标，匹配数组中的内容，再利用setInterval进行定时替换。

好了，今天，就是一个小功能。

posted @ 2016-11-02 10:31  xiuber  阅读(701)  评论(0)  编辑  收藏  举报