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

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30292745

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量147

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiuber/p/6021999.html

版权

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

想了想很小的功能，但是自己也懒得去写，就去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>