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

<!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. [已解决]报错:have mixed types. Specify dtype option on import or set low_memory=False

    报错代码: import pandas as pd pd1 = pd.read_csv('D:/python34/program/wx_chat_single/qq_single.csv') 报错内容 ...

  2. Linux部分常用命令详解（一）

    echo 命令详解 格式: echo string 显示普通字符: echo "it is a test" 或者 echo it is a test 显示转义字符: echo &q ...

  3. C#中的元组对象Tuple

    原文:C#中的元组对象Tuple 一.什么是元组 元组就是一些对象的集合,在我们编程时,比如一个人的信息,我们常常创建一个Person类去描述一个人,传统的做法如下: public class Per ...

  4. Linux使用yum install 安装程序时，提示“另外一个程序锁定了 yum；等待它退出……”

    Linux使用yum install 安装程序时,提示“另外一个程序锁定了 yum:等待它退出……” 原因: yum命令一次只能安装一个软件,所以当你下载安装第二个软件包时,系统进程锁会锁定yum,这 ...

  5. js数组去重练习

  6. 安装APK到android设备那些事儿

    APK是AndroidPackage的缩写,即Android系统的应用软件安装包(apk).APK是类似Symbian Sis或Sisx的文件格式.通过将APK文件直接传到Android模拟器或And ...

  7. ICPC2008哈尔滨-A-Array Without Local Maximums

    题目描述 Ivan unexpectedly saw a present from one of his previous birthdays. It is array of n numbers fr ...

  8. open source library

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

  9. PHP ftp_alloc() 函数

    定义和用法 ftp_alloc() 函数为要上传到 FTP 服务器的文件分配空间. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_alloc(ftp_connectio ...

  10. JVM典型配置和调优举例

    1. 堆设置-Xms: :初始堆大小.-Xmx: :最大堆大小.-XX:NewSize=n: :设置年轻代大小.-XX:NewRatio=n: : :设置年轻代和年老代的比值.如:为 3,表示年轻代与 ...