在页面中浮动显示一个矩形的div盒子,位置在整个页面内随机运动。矩形框内显示以下3条信息: “HTML中层的应用”、“CSS样式表的应用”和“JavaScript常用对象” ,并分别链接到对应的HTML文件。在页面中展示div盒子的属性设置,包括:页面内超链接文本的颜色,并且可以重新设置超链接的颜色,点击相应设置,设置同时生效
时间: 2024-03-27 11:40:56 浏览: 18
很高兴回答你的问题!首先,关于实现页面中浮动显示一个矩形的div盒子,可以使用CSS的position属性来实现。具体可以设置为position:fixed,并且可以使用JavaScript来控制盒子的运动。下面是一个简单的实现示例:
HTML代码:
```html
<div id="float-box">
<p>HTML中层的应用</p>
<p>CSS样式表的应用</p>
<p>JavaScript常用对象</p>
</div>
```
CSS代码:
```css
#float-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #000;
padding: 20px;
width: 200px;
height: 150px;
text-align: center;
}
```
JavaScript代码:
```javascript
var box = document.getElementById('float-box');
var x = 0, y = 0, dx = 5, dy = 5, w = window.innerWidth, h = window.innerHeight;
function animate() {
box.style.left = x + 'px';
box.style.top = y + 'px';
x += dx;
y += dy;
if (x + box.offsetWidth > w || x < 0) dx = -dx;
if (y + box.offsetHeight > h || y < 0) dy = -dy;
requestAnimationFrame(animate);
}
animate();
```
上述代码中,float-box是一个固定定位的div盒子,通过JavaScript的requestAnimationFrame()方法实现动画效果。
至于超链接的颜色修改,可以使用JavaScript来实现。首先,我们可以通过CSS设置超链接的默认颜色,例如:
```css
a {
color: #007bff;
}
```
然后,在JavaScript中获取所有超链接元素,并且为其添加点击事件,当点击时修改超链接的颜色,例如:
```javascript
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function() {
var color = prompt('请输入新的超链接颜色');
this.style.color = color;
});
}
```
上述代码中,我们使用prompt()方法获取新的颜色值,并且将其赋值给当前点击的超链接元素。
希望这些代码能够帮助你实现你的需求!