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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery 选择器用法基础入门示例
Jan 04 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python max内置函数详细介绍
2016/11/17 Python
Python异常处理操作实例详解
2018/08/28 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
中国梦的演讲稿
2014/01/08 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
求职信格式范文
2015/03/19 职场文书
保护动物的宣传语
2015/07/13 职场文书
施工安全责任协议书
2016/03/23 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
python多线程方法详解
2022/01/18 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python