jQuery实现颜色打字机的完整代码

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

$(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" rel="external nofollow" />
<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实现颜色打字机的完整代码的文章就介绍到这了,更多相关jquery 颜色打字机内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于jQuery实现的打字机效果

    话不多说,请看实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="

  • 基于Css3和JQuery实现打字机效果

    基于Css3和JQuery实现打字机效果

    先给大家附上效果图: 最近做项目的时候需要实现一个字符逐个出现的打字效果,用css的clip+css的动画实现的,与自己写的打字机效果相结合,整 理一起,效果很赞. 先来说说这个线条,我们会看到它是条,实际上就是个四周border有规律的显示隐藏,那么这里必定会想到after,before属性, 我们暂且先考虑after. 先建立一个box,然后after一个边框 <div class="box"></div> .box:before{ content: '';

  • 利用jQuery实现打字机字幕效果实例代码

    利用jQuery实现打字机字幕效果实例代码

    实现效果: 实现原理: 把html里的代码读进来, 然后跳过"<"和">"之间的代码, 顺便保存了内容的格式, 然后一个定时器,逐个输出. 用到的基础知识: jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuer

  • jQuery实现颜色打字机的完整代码

    效果:每个字逐个显示出来,并且每个字都有随机颜色 $(function(){ var str="早起的鸟儿有虫吃,早起的虫儿被鸟吃!由此天赋+勤奋=成功;先天不足+同等勤奋=还是失败!天赋的重要性可见一斑!"; //产生一个0-255的随机整数 function s(){ return parseInt((Math.random()*255)+1); }; var j=1,i=0; var p=""; //打开一个每个100毫秒执行一次的定时器 var k=setI

  • jquery衣服颜色选取插件效果代码分享

    jquery衣服颜色选取插件效果代码分享

    本文实例讲述了jquery衣服颜色选取插件效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现衣服颜色选取插件效果代码,有了这个插件可以为自己搭配衣服颜色,自己就是设计师,为自己设计独一无二的衣服,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery衣服颜色选取插件效果代码如下 <head> <

  • jquery的颜色选择插件实例代码

    复制代码 代码如下: (function($){ $.fn.extend({ selectColor:function(){ var _d = new Date(); var _tem = _d.getTime(); return this.each(function(){ var showColor = function(_obj){ var _left = parseInt($(_obj).offset().left); var _top = parseInt($(_obj).offset(

  • jQuery弹出窗口完整代码(居中,居左,居右)

    jQuery弹出窗口完整代码(居中,居左,居右)

    核心代码: 复制代码 代码如下: //获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(".window").height(); popWidth=$(

  • jQuery 右下角滑动弹出可关闭重现层完整代码

    jQuery 右下角滑动弹出可关闭重现层完整代码

    效果图: 完整代码如下: jquery右下角滑动弹出可关闭重现层 博客园 计划 教程 *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top

  • jQuery实现可拖动的浮动层完整代码

    以下是使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果.也可以访问以下网址体验效果:http://www.keleyi.com/keleyi/phtml/dragdiv.htm 光标移动到层上,按住鼠标就可以拖动层. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

  • jquery实现树形菜单完整代码

    jquery实现树形菜单完整代码

    本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2

    change(fn) 在每一个匹配元素的change事件中绑定一个处理函数. change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发. 豪情 p{line-height:23px;margin:0;padding:0;} $(function(){ $('#c-obj select').change(function(){ alert($(this).attr('id') + ': ' + $(this).val()); $('p').css($(this).attr('i

  • JQuery 网站换肤功能实现代码

    从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法.但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程. 我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性. 首先,代码 复制代码 代码如下: $(document).ready(function() { $('.styleswitch').click(function() { switchStylestyle(this.getAttribute("rel

  • springboot用thymeleaf模板的paginate分页完整代码

    springboot用thymeleaf模板的paginate分页完整代码

    本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正): 先看java部分 pom.xml 加入 <!--支持 Web 应用开发,包含 Tomcat 和 spring-mvc. --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web&l

随机推荐