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

<!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. Python菜鸟之传参

    Python菜鸟之传参 : 看上面enroll( )函数的调用传参 enroll("twiggy","M",city="上海", age=2 ...

  2. ubuntu安装goland

    安装goland 首先下载goland https://www.jetbrains.com/zh/go/specials/go/go.html?utm_source=baidu&utm_med ...

  3. 下载文件时HttpServletResponse设置响应头的Content-Disposition属性

    Content-Disposition属性有两种类型 inline :将文件内容直接显示在页面 attachment:弹出对话框让用户下载 弹出对话框下载文件 resp.setHeader(" ...

  4. 请求一个url的全过程

    最近在进行前端面试方面的一些准备,遇到了一个经典前端问题,一个url从输入到页面加载中间到底发生了什么,以前也认真想过这个问题,但是当时回答的都不全面,现在来好好总结一下: 总体来说分为以下六个步骤: ...

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

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

  6. 配置文件--spring cloud Config

    配置中心--Spring cloud Config 通过本次学习,我们应该掌握: Config Server 读取配置文 Config Server 从远程 Git 仓库读取配置文 搭建芮可用 Con ...

  7. 关于C#中Convert.ToInt32()是干什么用的

    并非每个对象都可以直接转换为int.例如,以下内容将无法编译: string Maomao = "100"; int i = (int)Maomao; 因为string无法隐式转换 ...

  8. Delphi 窗体函数GetWindowRect 取窗口矩形坐标

    GetWindowRect,用于取窗口矩形坐标.返回值类型:布尔型(LongBool).执行成功返回真(True),否则返回假(False);参数1类型:整数型(HWND),目标窗口的窗口句柄;参数2 ...

  9. upc组队赛2 Master of GCD 【线段树区间更新 || 差分】

    Master of GCD 题目描述 Hakase has n numbers in a line. At fi rst, they are all equal to 1. Besides, Haka ...

  10. Django框架（十三）—— Djang与Ajax

    目录 Djang与Ajax 一.什么是Ajax 二.Ajax的特点 1.异步 2.局部刷新 三.Ajax优点 四. 基于jquery的Ajax使用 1.基本语法 2.完整使用语法 3.利用ajax提交 ...