创建一个矩形，默认为红色；当鼠在这个矩形内点击的时候，设置个矩形为选中状态，再次点击取消选中状态，恢复原来的边线颜色；选中状态的矩形边线闪烁；闪烁的方式是颜色红蓝交替

科学的发展-只不过是读大自然写的代码

已于 2024-09-14 15:31:28 修改

阅读量203

点赞数 1

分类专栏： # qt 拖拽文章标签：人工智能断纱检测深度学习

于 2024-09-06 19:43:25 首次发布

本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/141967793

版权

qt 拖拽专栏收录该内容

29 篇文章 1 订阅

订阅专栏

要创建这样一个矩形，你可以使用HTML、CSS和JavaScript。以下是一个简单的示例，展示了如何实现这个功能：

HTML:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Rectangle Selector</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <div id="rectangle" class="rectangle"></div>  
    <script src="script.js"></script>  
</body>  
</html>

CSS (styles.css):

.rectangle {  
    width: 200px;  
    height: 100px;  
    border: 2px solid red;  
    position: relative;  
}  
  
.rectangle.selected {  
    border-color: blue;  
}  
  
.rectangle.blink {  
    animation: blink 1s linear infinite;  
}  
  
@keyframes blink {  
    0%, 100% { border-color: red; }  
    50% { border-color: blue; }  
}

JavaScript (script.js):

document.addEventListener('DOMContentLoaded', function() {  
    var rectangle = document.getElementById('rectangle');  
    var isSelected = false;  
    var isBlinking = false;  
  
    rectangle.addEventListener('click', function() {  
        if (!isSelected) {  
            rectangle.classList.add('selected');  
            startBlinking();  
            isSelected = true;  
        } else {  
            rectangle.classList.remove('selected', 'blink');  
            stopBlinking();  
            isSelected = false;  
        }  
    });  
  
    function startBlinking() {  
        if (!isBlinking) {  
            rectangle.classList.add('blink');  
            isBlinking = true;  
        }  
    }  
  
    function stopBlinking() {  
        if (isBlinking) {  
            rectangle.classList.remove('blink');  
            isBlinking = false;  
        }  
    }  
});

这个示例中，当矩形被点击时，它会切换到选中状态，并开始闪烁（红蓝交替）。再次点击时，它会取消选中状态并停止闪烁。CSS动画用于实现边线的闪烁效果。