效果：每个字逐个显示出来，并且每个字都有随机颜色

$(function(){

        var str="早起的鸟儿有虫吃，早起的虫儿被鸟吃！由此天赋+勤奋=成功;先天不足+同等勤奋=还是失败！天赋的重要性可见一斑！";

        //产生一个0-255的随机整数

        function s(){

            return parseInt((Math.random()*255)+1);

        };

        var j=1,i=0;

        var p="";

        //打开一个每个100毫秒执行一次的定时器

        var k=setInterval(function(){

            if(j<=str.length){

                //从第一个字开始截取，通过定时器循环遍历字符串的每一个字

                var n=str.substring(i,j);

                j++;

                i++;

                //为单个字添加样式

                var html='<span style="color:rgb('+s()+','+s()+','+s()+');font-size: 35px;">'+n+'</span>';

                //字符串累加

                p=p+html;

                //html()设置元素中的HTML内容

                $(".mybox").html(p);

            }else{//遍历完成关闭定时器

                clearInterval(k);

            }

        },100);

    });
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>颜色打字机</title>

<link rel="stylesheet" type="text/css" href="css1.css"/>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

    $(function(){

        var str="早起的鸟儿有虫吃，早起的虫儿被鸟吃！由此天赋+勤奋=成功;先天不足+同等勤奋=还是失败！天赋的重要性可见一斑！";

        //产生一个0-255的随机整数

        function s(){

            return parseInt((Math.random()*255)+1);

        };

        var j=1,i=0;

        var p="";

        //打开一个每个100毫秒执行一次的定时器

        var k=setInterval(function(){

            if(j<=str.length){

                //从第一个字开始截取，通过定时器循环遍历字符串的每一个字

                var n=str.substring(i,j);

                j++;

                i++;

                //为单个字添加样式

                var html='<span style="color:rgb('+s()+','+s()+','+s()+');font-size: 35px;">'+n+'</span>';

                //字符串累加

                p=p+html;

                //html()设置元素中的HTML内容

                $(".mybox").html(p);

            }else{//遍历完成关闭定时器

                clearInterval(k);

            }

        },100);

    });

</script>

</head>

<body>

<div class="mybox">

</div>

</body>

</html>

整个HTML源代码

@charset "utf-8";

/* CSS Document */

.mybox {

    height:200px;

    border:5px solid #ddd;

    font-size:25px;

}

需要用的CSS样式

jQuery实现颜色打字机的更多相关文章

  1. jquery ColorPicker 颜色选择器

    $(function() { $('#colorpickerField').ColorPicker({ onSubmit: function(hsb, hex, rgb, el) { $(el).va ...

  2. 推荐一款jQuery ColorPicked 颜色拾取器插件

    先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...

  3. jquery中css获取颜色属性

    Jquery获取颜色的方法为: var color = $(元素).css("color"); alert(color); 可以看到color如这样的格式; 但是; 因为rgb(0 ...

  4. 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...

  5. web前端的十种jquery特效及源码下载

    1.纯CSS3实现自定义Tooltip边框 涂鸦风格 这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可 ...

  6. jquery动画总结

    基本动画 show() //直接显示元素,没有动画 show(speed, [callback]) //有动画,有回调函数 hide() //直接隐藏元素,没有动画 hide(speed, [call ...

  7. jQuery ajax - getScript() 方法和getJSON方法

    实例 使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("demo_ajax_js ...

  8. jQuery第六章

    jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...

  9. jQuery 与 Ajax 的应用

    Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...

随机推荐

  1. [LC] 246. Strobogrammatic Number

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  2. miracle|

    N-COUNT 奇迹;出人意料的事If you say that a good event is a miracle, you mean that it is very surprising and ...

  3. First Django app(各个文件以及文件夹解析)

    mkdir mysite cd mysite django-admin.py startproject mysite 执行上面的命令,得到一下内容: mysite/ manage.py mysite/ ...

  4. python读取配置文件报keyerror-文件路径不正确导致的错误

    - 在其他模块使用反射读取配置文件报错,但是在反射模块中读取GetData.check_list又是正确的 反射模块如下: # get_data.py from API_AUTO.p2p_projec ...

  5. NopCommerce上二次开发 触发器记录

    最近要在NopCommerce上二次开发. 开发也就算了,该项目的架构设计很好,但性能不可谓不低. 扯远了,为了保持项目以后升级顺利,开次开发不允许在原项目基础上大改,只能以插件形式开发…… 因一个功 ...

  6. keepalive笔记之一:基本安装

    在安装文件中有范例说明 /usr/share/doc/keepalived-1.2.13/samples/ Keepalived:它的诞生最初是为ipvs(一些服务,内核中的一些规则)提供高可用性的, ...

  7. mysql报错2003 ，can't connect to mysql server on “localhost”

    我在安装成功后启动MySQL服务时,服务启动不了,提示:MySQL服务无法启动    服务没有报告任何错误 请键入NET HELPMSG 3534 以获得更多帮助,如下: 解决方案:安装好MySQL后 ...

  8. python 通过socket实现ssh功能

    功能:实现从客户端向服务端发送cmd指令,服务端将结果返回给客户端的功能. #coding:utf-8 '''服务端''' import socket,os server=socket.socket( ...

  9. cssy元素居中的方法有哪些？

    css的元素居中 各位小伙伴们在努力写网页的时候有没有遇到过这样的一个问题呢? 在写的时候发现他不居中,可是要分分钟逼死强迫症的啊! 别急,我来啦 哈哈哈 今天就带来三种css的元素居中的方法 第一种 ...

  10. IT从业者疫情之下出路何在

    作为一个IT行业十年经历的从业人员,在北京大公司工作过,但因衡量着北京大都市的繁华下高消费和高房价,选择到二线城市发展和组建家庭,由此逃离北上广,结束了数年的北漂生涯.很荣幸到了二线城市顺利遇见属于自 ...