跑马灯:用JavaScript 在页面的状态栏显示跑马灯效果的文字“欢迎光临我的博客”,文字在页面的状态栏内循环滚动。
时间: 2024-03-10 18:47:33 浏览: 17
您好,我可以给您供这样一个简单的 JavaScript 代码实现跑马灯效果:
```html
<script type="text/javascript">
var msg = "欢迎光临我的博客";
var pos = 0;
function scrollMsg() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("scrollMsg()", 200); // 滚动速度,单位为毫秒
}
scrollMsg();
</script>
```
您可以将这段代码添加到您的 HTML 页面的 `<head>` 中即可。当页面加载完毕后,状态栏上将出现“欢迎光临我的博客”文字,且会不断滚动循环显示。
相关问题
用JavaScript 在页面的显示跑马灯效果的文字“欢迎光临我的博客”,文字在页面的状态栏内循环滚动。
可以使用以下JavaScript代码实现在页面状态栏内循环滚动的跑马灯效果:
```javascript
// 定义需要滚动的文字
var marqueeText = "欢迎光临我的博客";
// 定义滚动函数
function scrollMarquee() {
marqueeText = marqueeText.substring(1) + marqueeText.charAt(0); // 将第一个字符移到末尾
window.status = marqueeText; // 在状态栏中显示滚动文字
setTimeout("scrollMarquee()", 300); // 每隔300毫秒执行一次滚动函数
}
scrollMarquee(); // 启动滚动函数
```
这段代码会将“欢迎光临我的博客”作为需要滚动的文字,并且通过将第一个字符移到末尾的方式实现文字的滚动效果。滚动文字会在页面的状态栏内循环显示。可以通过修改scrollMarquee函数中的setTimeout函数的参数来控制滚动速度。
html页面的状态栏显示跑马灯效果
要在 HTML 页面的状态栏显示跑马灯效果,你可以使用 JavaScript 来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>跑马灯效果</title>
<script>
// 定义跑马灯文本
var text = "这是一个跑马灯效果示例,欢迎来学习!";
// 定义跑马灯显示位置
var pos = 0;
// 定义跑马灯滚动速度
var speed = 200;
// 定义跑马灯动画函数
function marquee() {
// 获取状态栏对象
var statusBar = window.status;
// 将跑马灯文本赋值给状态栏
statusBar = text.substring(pos, text.length) + text.substring(0, pos);
// 更新跑马灯位置
pos++;
// 如果跑马灯位置超过文本长度,则重置位置为0
if (pos > text.length) {
pos = 0;
}
// 设置跑马灯动画定时器
setTimeout("marquee()", speed);
}
</script>
</head>
<body onload="marquee()">
<h1>跑马灯效果</h1>
<p>这是一个跑马灯效果示例,欢迎来学习!</p>
</body>
</html>
```
在这个示例中,我们定义了一个 `text` 变量来存储跑马灯文本,一个 `pos` 变量来存储当前跑马灯位置,一个 `speed` 变量来存储跑马灯滚动速度。然后定义了一个 `marquee()` 函数来实现跑马灯动画效果。在 `onload` 事件中,我们调用 `marquee()` 函数来启动跑马灯动画。
请注意,由于现代浏览器的安全策略,很多浏览器都已经禁止了在状态栏中显示动态内容,因此这种方法可能不再适用于所有浏览器。