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

$(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. Linux安装完后的调优(linux 6)

    1:关闭 SELinux 方法一:  #sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config #替换文本参数       ...

  2. java 数组的复制

    java数组的复制分为数组地址的复制和值的复制 地址的复制: int []arrA={11,22,33,44}; //创建一个数组 int [] arrB=new int[5]; System.out ...

  3. mysql数据库常用命令入门

    查询所有数据库 show databases; 创建数据库 create database mytest001 default character set utf8; 查看数据库的默认字符集 show ...

  4. MAYA安装未完成，某些产品无法安装的解决方法

    MAYA提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装MAYA失败提示MAYA安装未完成,某些产品无法安装,也有时候想重新安装MAYA的时候会出现本电脑wi ...

  5. open()操作文件

    open()函数用来读取.写文件 参数解释: r:只读 w:只写,此时进行读,会报错 a:只追加 r+:可读可写 w+:可读可写 a+:可读可写 rb\rb+\wb\wb+\ab\ab+ 针对二进制文 ...

  6. c++ 如何清除上一次的输出?

    #include <iostream.h>#include <stdlib.h>int main(){cout<<"PBY PBY PBY PBY PBY ...

  7. 吴裕雄--天生自然 R语言开发学习：基本图形（续三）

    #---------------------------------------------------------------# # R in Action (2nd ed): Chapter 6 ...

  8. jQuery 源码学习 - 02 - jQuery.fn.extend 与 jQuery.extend

    参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. extend 方法在 jQuery 中是一个很重要的方法.jQuery 内部用它来拓展静态方法或者 ...

  9. 在JavaScript里的“对象字面量”是什么意思？

    字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量.字面量分为字符串字面量(string literal ).数组字面量(array literal)和对象字面量(ob ...

  10. 为什么要用location的hash来传递参数?

    分页功能代码实现 <div> <a class="btn" href="#" style="..." @Click.pre ...