<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 { width: 200px; height: 100px; border: 1px solid black; margin: 0 auto; font-size: 18px; line-height: 100px; text-align: center; } </style> <script src="./js/tool.js"></script> <script> /* 设置字体初始值大小和颜色为默认值，每秒钟字体增大5个像素，颜色变换一次 增大6次后开始缩小，缩小6次后再次增大 */ window.onload = function () { // 获取元素 var div1 = document.getElementById('div1'); // 字体每次增大的像素 var speed = 5; // 计数 var count = 0; setInterval(() => { // 每秒钟颜色随机变换一次 var rgba = 'rgba(' + parseInt(Math.random() * 266) + ',' + parseInt(Math.random() * 266) + ',' + parseInt(Math.random() * 266) + ',1)'; // 获取div的字体大小 var fontSize = parseInt(getStyle(div1, 'fontSize')); // 将随机的颜色设置给字体颜色 div1.style.color = rgba; // 将字体大小加5像素以后设置回去 div1.style.fontSize = (fontSize + speed) + 'px'; // 计数加1 count++; // 每6次以后开始改变增大或减少 if (count % 6 == 0) { speed *= -1; } }, 1000); } /** * @todo 获取原始样式 兼容 ie * @param {*} node 元素 * @param {*} strStyle 样式名称 */ function getStyle(node, strStyle) { return node.currentStyle ? node.currentStyle[strStyle] : getComputedStyle(node)[strStyle]; } </script> </head> <body> <div id="div1"> 测试文字 </div> </body> </html>