zoukankan      html  css  js  c++  java
  • 背景定时切换,文字定时切换等。

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

    想了想很小的功能,但是自己也懒得去写,就去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进行定时替换。

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

  • 相关阅读:
    【3】jQuery学习——入门jQuery选择器之基本选择器
    对于转载引发的问题没见过这样强硬的论坛
    SQL2进制问题
    用SQL只获取日期的方法
    C#算法求2进制的问题
    ASP.NET Ajax In Action!读书笔记1
    Fckeditor配置
    MIME types list
    SQL case when then else end运用
    ASP.Net访问母版页(MasterPage)控件、属性、方法及母版页中调用内容页的方法
  • 原文地址:https://www.cnblogs.com/xiuber/p/6021999.html
Copyright © 2011-2022 走看看