修改成长方形并有“欢迎使用”字
时间: 2024-03-19 14:46:14 浏览: 17
好的,以下是修改后的 HTML 和 JavaScript 代码,创建一个长方形悬浮框,并在其中显示“欢迎使用”字样:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态悬浮框示例</title>
<style>
#floating-box {
position: fixed;
top: 50px;
left: 50px;
width: 200px;
height: 100px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="floating-box">欢迎使用</div>
<script>
setInterval(function() {
var box = document.getElementById("floating-box");
box.style.top = Math.floor(Math.random() * window.innerHeight) + "px";
box.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
box.style.backgroundColor = getRandomColor();
}, 1000);
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
```
在上面的示例中,我们将悬浮框的宽度改为 200 像素,高度改为 100 像素,并将样式中的 `border-radius` 属性设置为 10 像素,使其变成长方形。同时,在 `<div>` 元素中添加了“欢迎使用”字样。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)