JavaScript特效——让文字每秒钟进行变色

简介: JavaScript特效——让文字每秒钟进行变色

16种颜色随机变化 每一秒钟变化一次

给文字添加一个定时器让字体颜色随机切换方法:

1、先给文字一个盒子

2、然后用js获取这个盒子

<div> 温度30°</div>
var div = document.querySelector('div');

3、其次准备一个数组里面用来存放颜色(这里例举16种颜色):

var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon', 'green', 'rgb(42, 75, 165)','#009393','#bbffbb','#ceceff','purple'];

接下来就可以写定时器了:

setInterval(function(){
            var math = Math.floor(Math.random() * color.length); 
        //  var math = Math.floor(Math.random() * color.length +1)-1; 
            console.log(math);
        },1000)

4、定时器随机获得这个数组(颜色)的长度:

f53616c55fe249f2bdfd578e0dc802b4.gif

5、最后再绑定颜色的样式即可

div.style.color = color[math];

完整代码如下:

<!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>字体随机变色</title>
    <style>
        div{
            transition: all 0.5s;
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div> 温度30°</div>
    <!-- 16种颜色随机变化 每一秒钟变化一次 -->
    <script>
        var div = document.querySelector('div');
        var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon', 'green', 'rgb(42, 75, 165)','#009393','#bbffbb','#ceceff','purple']; 
        setInterval(function(){
            var math = Math.floor(Math.random() * color.length ); // 获取随机数
            console.log(math);
            //   div.style.backgroundColor = color[math]; //随机的背景颜色
            div.style.color = color[math]; //替换字体颜色
        },1000)
    </script>
</body>
</html>

看下效果:

e25014e8c43a4e8292e76c9ada960dde.gif

我么可以看到每次刷新过后的第一秒钟还是字体本身的颜色(默认黑色),并没有直接变为随机的颜色,会出现一秒延时问题,解决方法

直接把函数体进行封装,单独运行

<!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>字体随机变色</title>
    <style>
        div{
            transition: all 0.5s;
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div> 温度30°</div>
    <!-- 16种颜色随机变化 每一秒钟变化一次 -->
    <script>
        var div = document.querySelector('div');
        var color = ['#f00', '#000', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon', 'green', 'rgb(42, 75, 165)','#009393','#bbffbb','#ceceff','purple']; 
        function f1(){
            var math = Math.floor(Math.random() * color.length ); 
            console.log(math);
            // 获取随机数
            //   div.style.backgroundColor = color[math]; //随机的背景颜色
            div.style.color = color[math]; //设置随机颜色
        }
        setInterval(f1, 1000);
        f1();
    </script>
</body>
</html>

这样就可以实现了,看下图:

47e12e7573c94cf69ebb08d530ef264d.gif





相关文章
|
6月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
156 0
|
6月前
|
移动开发 JavaScript 前端开发
分享111个JS文字特效,总有一款适合您
分享111个JS文字特效,总有一款适合您
256 0
|
26天前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
47 5
|
1月前
|
JavaScript
js文字如何轮播?
js文字如何轮播?
13 1
|
3月前
|
JavaScript
js文字如何轮播?
js文字如何轮播?
27 2
|
3月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
44 3
|
5月前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
69 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
5月前
|
JavaScript
JS实现表格跨行变色
JS实现表格跨行变色
|
5月前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
38 0
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)