How to achieve text flashing effect in js? (Pictures + Videos)-CSS Knowledge-php.cn

Home

Daily Programming

CSS Knowledge

How to achieve text flashing effect in js? (Pictures + Videos)

藏色散人

Oct 18, 2018 am 09:38 AM

This article mainly introduces how to use js to achieve text flashing effects.

In the process of front-end page design, adding some dynamic special effects can obviously make the website content richer, more beautiful, and attract users' attention.

For front-end novices, it may be difficult to use js to implement some special effects, but it is actually very simple.

Below we will introduce to you the special effect method of js to achieve text flashing through a simple code example. [For more js special effects, you can visit the js special effects code download column to view]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现文字闪烁特效</title>
</head>
<body>
<div id="blink">PHP中文网</div>
</body>
<script language="javascript">
    function changeColor() {
        var color = [&#39;#F96&#39;,&#39;#cc6&#39;];
        // parseInt 将字符串类型转换为整型  random 获取0-1之间的随机数   color.length color数组的长度
 document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
    }
    // 执行定义好的changeColor方法，200毫秒执行一下
 setInterval("changeColor()", 200);
</script>
<style>
    * {
        color: #CC6
 }
</style>
</html>

The final effect is as follows:

How to achieve text flashing effect in js? (Pictures + Videos)

This article is an introduction to the method of js to achieve text flashing effect. It is also very simple and easy to understand. I hope it will be helpful to friends in need!

More cool javascript special effects codes, all in: javascript special effects encyclopedia

If you want to know more about front-end related knowledge, you can follow the PHP Chinese websiteJavaScript Video tutorial, HTML video tutorial, CSS video tutorial, Bootstrap video tutorial and other related tutorials, welcome everyone to refer to and learn!

The above is the detailed content of How to achieve text flashing effect in js? (Pictures + Videos). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn