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

<!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. [POI2010]OWC-Sheep

    题目 不难猜到或者发现的性质,如果连了一条对角线划分出了奇数个点,那么这条对角线肯定不合法:因为划分成三角形就不可能有对角线相交,于是划分成奇数的那一边怎么样也不可能划分成全是偶数 于是我们需要对每一 ...

  2. zabbix--Simple checks 基本检测

    开始      Simple checks 通常用来检查远程未安装代理或者客户端的服务. 使用 simple checks,被监控客户端无需安装 zabbixagent 客户端, zabbix ser ...

  3. springMVC的数据封装

    编写实体类: package cn.mepu.domain; /** * @User 艾康 * @create 2019-11-12 13:56 */ public class User { priv ...

  4. 解决码云未配置公钥问题——fatal: Could not read from remote repository.

    使用码云,键入“git push -u origin master” ,遇到如下问题: fatal: Could not read from remote repository.(致命:不能读远端仓库 ...

  5. postgresql like 中的转义

    select * from tb_org where char_length(xdm)>8 and xdm not like '%*_%'  ESCAPE '*' ESCAPE 后面的 * 是转 ...

  6. winform程序登陆后关闭登录窗体

    用winform做程序的时候,我们一般都是在Program先启动登录窗体,然后登录成功后才创建主窗体,结果这就导致了登录窗体无法关闭 所以如果我们不在Program的程序入口先创建登录窗体的话就能完美 ...

  7. python 对redis 键值对的操作

    我们可以将Redis中的Hashes类型看成具有String Key和String Value的键值对容器.类似python中的dict,javascript的jaon,java 的map,每一个Ha ...

  8. leetcood学习笔记-14*-最长公共前缀

    笔记: python if not   判断是否为None的情况 if not x if x is None if not x is None if x is not None`是最好的写法,清晰,不 ...

  9. 向量vector 容器浅析

    一.什么是vector? 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能 ...

  10. move_base 分层代价地图的作用（翻译）

    A. 标准层 ​ Static Map Layer:为了做全局规划,机器人需要一个超越其传感器的地图,以了解墙壁和其他静态障碍物的位置. 静态地图可以先用SLAM算法生成,也可以从架构图中创建. 当层 ...