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

$(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. windows下面 apache 虚拟主机配置

    <VirtualHost > ServerAdmin www.test2.com DocumentRoot "D:/PHP/Apache/htdocs/testSite2&quo ...

  2. JavaScript学习总结（九）事件详解

    转自:http://segmentfault.com/a/1190000002174034 事件处理程序 在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序 ...

  3. sql语句查询成绩表各科前三名

    --语法形式: ROW_NUMBER() OVER(PARTITION BY COL1 ORDER BY COL2) --解释: 根据COL1分组,在分组内部根据 COL2排序,而此函数计算的值就表示 ...

  4. restful 和RPC 的区别

    https://www.cnblogs.com/Dong-Ge/articles/9577019.html

  5. <JZOJ4726>种花

    挺有意思的贪心 神奇的贪心 #include<cstdio> #include<iostream> #include<cstring> #include<al ...

  6. 题解：BZOJ 1009 HNOI2008 GT考试 KMP + 矩阵

    原题描述: 阿申准备报名参加GT考试,准考证号为N位数 X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0<=Ai&a ...

  7. 吴裕雄--天生自然 R语言开发学习：时间序列（续三）

    #-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...

  8. 吴裕雄--天生自然 R语言开发学习：分类（续一）

    #-----------------------------------------------------------------------------# # R in Action (2nd e ...

  9. python socketserver 实现 ftp功能

    需求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp server上随意切换目录 允许用户查看当前目 ...

  10. virtualenv 个人指南

    virtualenv是解决一个机器上多个应用需要的Python版本不一致的问题,virtualenv就是用来为一个应用创建一套"隔离"的Python运行环境,解决了解决了不同应用间 ...