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

$(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. springboot项目实现jar包外配置文件管理

    背景 为实现快速搭建和开发,项目以Springboot框架搭建,springboot搭建的项目可以将项目直接打成jar包并运行,无需自己安装配置Tomcat或者其他服务器,是一种方便快捷的部署方式. ...

  2. 64位WIN7 配置IIS遇到问题

    App_global.asax.sr8_llzl.dll' -- '拒绝访问. 设置c:windows\temp 目录访问权限 temp--> 属性-->安全-- > 添加IIS_I ...

  3. 微软研究员Eric Horvitz解读 “人工智能百年研究”

    本文翻译自ScienceInsider"A 100-year study of artificial intelligence? Microsoft Research's Eric Horv ...

  4. 3DSMAX安装失败，如何卸载修复重新安装3dmax 2017？

    一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑已安装3dmax,你要是不留意直接安装,只会按装3dmax的附件,3dmax是不会按装上的.这种原因呢就是大家在之前卸载 ...

  5. _Random和_RandomString的使用区别

    __Random 函数介绍 作用:生成随机数 使用格式:${__Random(5,30,myResult_Random)},其中 第一个参数5,表示希望生成的数字最小的值,必填 第二个参数30,表示希 ...

  6. 微信小游戏排行榜页滚动查看排行榜（canvas指定区域溢出滚动，懒渲染）

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

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

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

  8. SpringMVC基本使用步骤

    使用Spring MVC,第一步就是使用Spring提供的前置控制器,即Servlet的实现类DispatcherServlet拦截url:org.springframework.web.servle ...

  9. 旅游机票类专业名词---PNR

    PNR: PNR是旅客订座记录,即Passenger Name Record的缩写,它反映了旅客的航程,航班座位占用的数量,及旅客信息.适用民航订座系统. 一个PNR由以下几项组成: 姓名组NM 航段 ...

  10. MicrosoftOfficeProfessionalPlus2013傻瓜式激活工具

    用微软的office系列,总是提示需要输入秘钥,直接找个破解软件破解算了. 破解软件地址:http://www.3322.cc/soft/10037.html 1.下载解压: 2.点击office系列 ...