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

<!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. 【Java】 java判断字符串是否为空的方法总结

    以下是java 判断字符串是否为空的四种方法: 方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: ...

  2. 防御 CSRF

    我还针对这个问题请教了 @c4605 , 他对防御 CSRF 提出了两种解决方案: 在每个表单中包含一个 CSRF Token.不将用于认证的 Token 或 Seesion ID 储存在 Cooki ...

  3. FastAdmin 关于列表渲染文字过长导致页面难以管理的问题

    先贴一张图片做个例子 看不清图片的朋友可以右键图片,在<新标签页中打开图片>; 可以看到,由于内容过长,导致后面操作的增删改要拉到最后才能操作. 在我们的FastAdmin中,目前我还没找 ...

  4. ionic ios上状态栏和app重叠解决方案

    干货文章 ·2018-03-22 01:33:01 官方issues: https://github.com/ionic-team/ionic/issues/13294 解决办法: 1.在 confi ...

  5. JSONObject.toJSONString(map)

    Map<Integer, List<Integer>> map = new LinkedHashMap<>(); map.put(1,ddzCard.getOneS ...

  6. JavaScript代码／ES6语法笔记一

    1. new Set()/去重一个数组 let arr = [1, 2, 2, 3, 3]; let set = new Set(arr); let newArr = Array.from(set); ...

  7. androidstudio 2.3.3 jni过程汇总（2）：2、使用so文件

    2.使用so文件 1.在java文件中System.loadLibrary加载包,并且引入native方法. 2.在app/src/main/下新建jniLibs文件夹,将so包带arm文件夹形式导入 ...

  8. day07 python列表 集合 深浅拷贝

    day07 python   一.知识点补充     1."".join() s = "".join(('1','2','3','4','5'))  #将字符串 ...

  9. vue Inline JavaScript is not enabled. Is it set in your options?

    Vue 全家桶 vue全面介绍--全家桶.项目实例 https://www.cnblogs.com/nogodie/p/9853660.html vue项目 Inline JavaScript is ...

  10. js 搞点小事情

    <script type="text/javascript"> (function(){ if(!window.console){window.console ={lo ...