在现实生活中我们常常看到文字循环变色的效果，此效果不仅能让人们印象深刻，还提高了美观度，代码及注释如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>是壳哥呀！</title>

<style type="text/css">

    body{background: mediumpurple;}

</style>

<script type="text/javascript"> 
//所使用的的字符串

var message="不管你是飒飒、绒绒、卷儿、炸炸等，一剪子下去都变我壳哥！！！";

// 设置文字的最初颜色。

var baseColor="gold";

// 设置变化的颜色

var textColor="aqua";

 // 变色文字后面跟着的文字的颜色

var secondTextColor="lawngreen";

// 设置定时器的间隔时间

var speed=200;

// 设置初次变色文字的个数

var letters=6;

// 设置跟在后面要变色的文字的个数

var secondLetters=4;

// 延迟执行的时间

var pause=0;

// 声明一个变量,并赋初值为0

var count=0;

// 定时器的返回值

var timer=null;

// 遍历每一个字符串,然后给每一个字符外面嵌套一个span元素,并设置span元素的id属性值

for(m=0;m<message.length;m++){

  document.write('<span id="light'+m+'">'+message.charAt(m)+'</span>');

}

// 封装一个类似于jQuery的id选择器

function $(id){

  return document.getElementById(id);

}

// 核心

function done(){

    // 刚加载代码执行,设置所有span元素的字体颜色

  if(count==0){

    for(var m=0;m<message.length;m++){

   $("light"+m).style.color=baseColor;

    }

  }

     // 设置对应索引的span元素的字体颜色

  $("light"+count).style.color=textColor;

     // 如果count的值大于letters-1,则将变色的前一个字符的颜色设置为secondTextColor

  if(count>letters-1){

    $("light"+(count-letters)).style.color=secondTextColor;

  }

     // 判断,变蓝的个数超出secondletters,则将超出部分颜色设置为初始颜色

  if(count>(letters+secondLetters)-1){

    $("light"+(count-letters-secondLetters)).style.color=baseColor;

  }

      // count的值小于字符串字符的最大索引值,则count加1,

      // 否则count重置为0,然后停止定时器函数的执行

  if(count<message.length-1){

    count++

  }

  else{

    count=0

    clearInterval(timer)

     // 指定延迟时间之后再开始执行函数begindone()

    setTimeout("begindone()",pause)

    return

  }

}

function begindone(){

  timer=setInterval("done()",speed);

}

window.onload=function(){

  begindone();

}

</script>

</head>

<body>

<div>

</div>

</body>

</html>

JavaScript小实例-文本循环变色效果的更多相关文章

  1. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  2. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  3. javascript小实例，拖拽应用（一）

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  4. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  5. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. javascript小实例，实现99乘法表及隔行变色

    人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...

  7. javascript小实例，编写一个方法，实现从n-m个数中随机选出一个整数

    别怪我是一个闷葫芦,没那么多花哨的语言,废话不多说,先说说小实例的要求: 编写一个方法,实现从n-m个数中随机选出一个整数,要求:传递的参数不足两个或者不是有效数字,返回[0-1]之间的随机数,需要解 ...

  8. JavaScript小练习3-用循环使三个DIV变色

    题目 初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色. 分析 简单的onclick使用. button的居中可以在外套一个p元素,body中让p居中即可. 三个DIV块的居中,使用ma ...

  9. javascript小实例，多种方法实现数组去重问题

    废话不多说,直接拿干货! 先说说这个实例的要求:写一个方法实现数组的去重.(要求:执行方法,传递一个数组,返回去重后的新数组,原数组不变,实现过程中只能用一层循环,双层嵌套循环也可写,只做参考): 先 ...

随机推荐

  1. Spring Cloud配置中心高可用搭建

    本文通过config server连接git仓库来实现配置中心,除了git还可以使用svn或者系统本地目录都行. 引入依赖 <dependencies> <dependency> ...

  2. 实用的Python（2）利用Python制作gif动图

    一.简介 moviepy是一个专门用于视频剪辑制作的模块,可以自动化完成很多繁琐的视频剪辑处理工作,除了处理视频数据之外,moviepy中还内置了可以制作gif动图的功能,通过使用moviepy.ed ...

  3. 使用vue.js开发小程序

    写在前面 刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比. 话不多说,我们现在感受一下如何使用mpvue开发小程序.(以下内容参照mpvue文档完成). 开发环境 node np ...

  4. Arch安装墨刀（产品原型工具）

    Arch通过aur安装墨刀的时候报错,查看PKGBUILD发现下载地址错误("https://s3.cn-north-1.amazonaws.com.cn/modao/download&qu ...

  5. SVN版本管理与大型代码上线方案（一）

    SVN版本管理与大型代码上线方案(一) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打开百度网盘手机App,操 ...

  6. C++使用cout输出中文，打印出来是乱码

    windows下的控制台使用的是gbk编码.你输出的是unicode.在Vs中更改高级保存选项,将Unicode改为GB类型(比如GB18030)

  7. nodejs模块——fs模块 WriteFile写入文件

    WriteFile写入文件 使用fs.writeFile(filename,data,[options],callback)写入内容到文件. 参数说明: filename String 文件名 dat ...

  8. .babelrc配置例子

    { "presets":[ ["es2015",{"modlues":false}], "react", ], &quo ...

  9. 操作系统之IO管理

    IO系统结构 设备的分类 按数据组织分 块设备: 信息的存取总是以数据块为单位. 它属于有结构设备,如磁盘等. 磁盘设备的基本特征是传输速率较高,以及可寻址,即对它可随机地读/写任一块. 字符设备: ...

  10. open source library

    { https://gitee.com/tboox https://github.com/thejinchao/cyclone http://www.drchip.org/astronaut/ssl/ ...