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


Posted in jQuery onMarch 19, 2020

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

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 颜色打字机内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
You might like
Oracle 常见问题解答
2006/10/09 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
python迭代器的使用方法实例
2013/11/21 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
行政主管岗位职责
2013/11/18 职场文书
新学期教师寄语
2014/04/02 职场文书
教师考察材料范文
2014/06/03 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
感恩节寄语2015
2015/03/24 职场文书
离婚案件原告代理词
2015/05/23 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书