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手风琴的简单制作
May 12 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
如何在vue 中引入使用jquery
Nov 10 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
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
javascript按位非运算符的使用方法
2013/11/14 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python中extend和append的区别讲解
2019/01/24 Python
基于django传递数据到后端的例子
2019/08/16 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
大学生自我鉴定范文模板
2014/01/21 职场文书
学校就业推荐信范文
2014/05/19 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
街道社区活动报告
2015/02/05 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
小学班主任个人总结
2015/03/03 职场文书
人事任命通知
2015/04/20 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书