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树插件zTree使用方法详解
May 02 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现增删改查
Dec 22 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得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JS hashMap实例详解
2016/05/26 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
vue eslint简要配置教程详解
2019/07/26 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Python格式化压缩后的JS文件的方法
2015/03/05 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
销售自荐信
2013/10/22 职场文书
岗位职责范本
2013/11/23 职场文书
表彰先进的通报
2014/01/31 职场文书
教师党员公开承诺书
2014/03/25 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
教你利用python实现企业微信发送消息
2021/05/23 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python