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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现图片切换效果
Oct 19 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安全编程之加密功能
2006/10/09 PHP
php eval函数用法总结
2012/10/31 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
使用python实现knn算法
2017/12/20 Python
Django自定义用户认证示例详解
2018/03/14 Python
Django model序列化为json的方法示例
2018/10/16 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
幼教简历自我评价
2014/01/28 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
诚实守信演讲稿
2014/09/01 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
工作时间证明
2015/06/15 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server