原文链接:http://blog.csdn.net/wdkking/article/details/69663429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // 1.一个定时器,每隔0.1s修改div内的文字颜色和文字大小,开启时文字增大,6次后文字缩小 onload = function() { var Divv = document.getElementsByTagName("div")[0]; // 声明并提取div的值 var text = document.getElementsByTagName("p"); // 声明保存文字的值 var arr = ["10px", "15px", "20px", "25px", "30px", "35px", "30px", "25px", "20px", "10px"]; //声明一个数组因为是6次变大再变小的循环 var timm = 0; // 声明一个变量用来保存计时器 var n = 0; //申明一个下标的变量 timm = setInterval(function() { var a = parseInt(Math.random() * 256); var b = parseInt(Math.random() * 256); // 随机的颜色,加拼接,注:一定要写在计时器的内部 var c = parseInt(Math.random() * 256); var f = "rgb" + "(" + a + "," + b + "," + c + ")"; text[0].style.fontSize = arr[n % arr.length]; //文字中的文字由p(一个元素)在不断变换字体的大小 Divv.style.color = f; //随机字体的颜色 n++; //每运行一次自动加1 }, 100) } // 另一种优化的方法 onload = function() { var Divv = document.getElementsByTagName("div")[0]; var text = document.getElementsByTagName("P"); var timm = 0; var n = 0; var num = 0; text[0].style.fontSize = "10px"; // 初始化一个字体的大小 timm = setInterval(function() { var a = parseInt(Math.random() * 256); var b = parseInt(Math.random() * 256); var c = parseInt(Math.random() * 256); var f = "rgb" + "(" + a + "," + b + "," + c + ")"; Divv.style.color = f; // 随机字体的颜色 n++; //每运行一次自动加1 var oldsize = parseInt(text[0].style.fontSize); //定义一个变量把文字的初始值大小保存下来 text[0].style.fontSize = oldsize + num + "px"; //对应的文字下标更改为字体对应的大小, if (n % 20 == 0) { num = num * (-1); } // 当第20次变大的时候,然后缩小。所以取20余数为0的时候。num为-num。 }, 100) } </script> <style> div { text-align: center; background: black; position: fixed; margin: auto; left: 0; right: 0; bottom: 0; top: 0; } </style> </head> <body> <div> <p>变幻莫测</p> </div> </body> </html>
发表回复