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

$(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. python与模块的导入方式

    今日所得 模块 import from...import... 循环导入 相对导入 绝对导入 软件开发目录规范 模块 模块:是一系列功能的集合体 模块的三种来源:1.内置模块(Python解释器自带的 ...

  2. win10安装CAD失败，怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装CAD失败或提示已安装,也有时候想重新安装CAD的时候会出现本电脑windows系统已安装CAD,你要是不留意直接安装CAD,只会安装CAD的附件或者直接提示失败 ...

  3. Docker私有仓库管理

    docker load -i registry.tar.gz docker run -d -p 5000:5000 --restart=always --name registry -v /opt/m ...

  4. 吴裕雄--天生自然 R语言开发学习：使用ggplot2进行高级绘图（续二）

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

  5. js 网页运行原理

    当我们打开一个网页的时候,浏览器会首先创建一个窗口,这个窗口就是我所知道的window对象,也就是整个Javascript运行所依附的全局变量. 为了加载网页文档,当前窗口又需要创建一个Documen ...

  6. 云服务器——之Linux下安装tomcat

    在上一篇文章中已经准备好了tomcat安装的基本环境jdk的安装,那么我们现在来记录tomcat的安装. 第一步:下载tomcat安装包 http://tomcat.apache.org/ 第二步:通 ...

  7. 关于CLOSE BY CLIENT STACK TRACE

    关于CLOSE BY CLIENT STACK TRACE 程序正常运行,数据库连接可以获取,一些列操作都可以实现,可在debug信息中总会一段时间就报如下错误: java.lang.Exceptio ...

  8. 携程酒店DevOps测试实践

    作者简介 王幸福,携程酒店研发部高级测试经理,负责无线自动化测试相关工作.在测试框架和平台研发.移动测试.DevOps等领域有着丰富的经验. 如今很多大型互联网公司.创新型企业都在积极地进行DevOp ...

  9. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

  10. 多线程的join功能

    import threading import time def thread_job(): print("T1 start\n") for i in range(30): tim ...