简单的js特效代码

以下是一个简单的JavaScript特效代码示例，实现点击按钮时让一个元素闪烁的效果：

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单JS特效</title>
    <style>
        #blinkElement {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            line - height: 100px;
            text - align: center;
            margin - bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="blinkElement">闪烁的元素</div>
    <button onclick="startBlink()">开始闪烁</button>
    <button onclick="stopBlink()">停止闪烁</button>

    <script>
        let blinkInterval;
        const element = document.getElementById('blinkElement');

        function startBlink() {
            // 如果已经有闪烁间隔在运行，先清除
            if (blinkInterval) {
                clearInterval(blinkInterval);
            }
            // 每500毫秒切换一次显示和隐藏状态
            blinkInterval = setInterval(() => {
                if (element.style.display === 'none') {
                    element.style.display = 'block';
                } else {
                    element.style.display = 'none';
                }
            }, 500);
        }

        function stopBlink() {
            clearInterval(blinkInterval);
            element.style.display = 'block';
        }
    </script>
</body>

</html>

基础概念解释

DOM操作：JavaScript可以通过document.getElementById等方式获取HTML页面中的元素，然后对元素的属性（如style属性）进行修改来改变元素的显示状态等。
定时器：这里使用了setInterval函数，它按照指定的时间间隔（这里是500毫秒）不断执行一个函数，在这个例子中就是切换元素的显示和隐藏状态。

优势