首页设计目标如下:在页面上实现一个色块和一个按钮。色块在初始状态下,每秒自动在两种指定颜色之间交替变换。当用户点击按钮时,色块颜色切换的定时器将被暂停。

设计目标如下:在页面上实现一个色块和一个按钮。色块在初始状态下,每秒自动在两种指定颜色之间交替变换。当用户点击按钮时,色块颜色切换的定时器将被暂停。

时间: 2024-10-25 17:08:56 浏览: 32

设计这个功能需要结合前端技术和JavaScript来实现。首先，你需要HTML结构，包括一个`<div>`元素作为色块和一个`<button>`作为触发器： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Color Block</title> <style> #color-block { width: 100px; height: 100px; display: inline-block; transition: background-color 1s ease; } </style> </head> <body> <div id="color-block"></div> <button id="pause-button">点击暂停</button> <script src="script.js"></script> </body> </html> ``` 然后，在`script.js`文件中编写JavaScript代码： ```javascript let colorBlock = document.getElementById('color-block'); let isRunning = true; let interval; // 定义两种颜色 const colors = ['red', 'blue']; function changeColor() { if (isRunning) { const randomIndex = Math.floor(Math.random() * colors.length); colorBlock.style.backgroundColor = colors[randomIndex]; } } // 每秒切换颜色 interval = setInterval(changeColor, 1000); document.getElementById('pause-button').addEventListener('click', function() { isRunning = !isRunning; if (!isRunning) { clearInterval(interval); // 按钮点击时暂停切换 } else { interval = setInterval(changeColor, 1000); // 再次开始时恢复切换 } }); ``` 在这个例子中，色块通过改变背景颜色模拟颜色变化，而按钮事件监听器用于控制定时器的开启和关闭。

阅读全文