js 动态文字滚动的例子

 更新时间:2011年01月17日 23:06:49   作者:  
在文本框中动态滚动文字的例子,需要的朋友可以参考下。
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>这是一个动态JavaScript文字显示的例子</title>
<script type="text/JavaScript">
var POSITION = 50;
var DELAY = 150;
var MESSAGE = "这是一个动态JavaScript文字显示的例子";
function bannerObject(){
this.msg = MESSAGE;
this.out = " ";
this.pos = POSITION;
this.delay = DELAY;
this.i = 0;
this.reset = clearMessage;
}
 
function clearMessage(){
this.pos = POSITION;
}
var scroll = new bannerObject();
function scroller(){
scroll.out += " ";
if(scroll.pos>0)
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++){
scroll.out +=" " ;
}
if (scroll.pos>= 0)
scroll.out += scroll.msg;
else
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length);
document.noticeForm.notice.value = scroll.out;
scroll.out = " ";
scroll.pos--;
scroll.pos--;
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset();
}
window.setTimeout("scroller()", scroll.delay);
}
</script>
</head>
<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%">
<form name="noticeForm" action="">
<p><input type="text" name="notice" size="50" style="background-color: rgb(192,192,192)"/></p>
</form>
</td></tr>
</table>
</body>
</html>

在状态栏滚动文字
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>这是一个跑马灯效果的JavaScript文档-在状态栏</title>
<script type="text/JavaScript">
var msg = "这是一个跑马灯效果的JavaScript文档";
var interval = 100;
var spacelen = 120;
var space10 = " ";
var seq = 0;
function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq + 1);
seq++;
if (seq >= len) {
seq = spacelen;
window.setTimeout("Scroll2();", interval);
}
else
window.setTimeout("Scroll();", interval);
}
function Scroll2() {
var out = "";
for (i = 1; i <= spacelen / space10.length; i++)
out +=space10;
out = out + msg;
len = out.length;
window.status = out.substring(seq, len);
seq++;
if (seq >= len) { seq = 0; };
window.setTimeout("Scroll2();", interval);
}
Scroll();
</script>
</head>
<body>
</body>
</html>

相关文章

  • 利用javascript的面向对象的特性实现限制试用期

    利用javascript的面向对象的特性实现限制试用期

    Javascript是一种面向对象的脚本语言,其也具有面向对象的三大特性,但是今天我们不详细的讲解javascript的面向对象特性,今天我们简单的了解一下javascript的面向对象特性,然后学习一下怎样实现试用期的限制!
    2011-08-08
  • JavaScript数据结构之二叉树的遍历算法示例

    JavaScript数据结构之二叉树的遍历算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的遍历算法,简单介绍了javascript实现数据结构中二叉树的中序遍历、先序遍历及后序遍历方法与相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • 如何使用JS中的webWorker

    如何使用JS中的webWorker

    作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢?
    2021-05-05
  • 如何给ss bash 写一个 WEB 端查看流量的页面

    如何给ss bash 写一个 WEB 端查看流量的页面

    由于刚毕业的穷大学生,和朋友合租了一台服务器开了多个端口提供 ss 服务,懒得配置 ss-panel,就使用了 ss-bash 来监控不同端口的流量,但每次都要等上服务器才能看到流量使用情况,很麻烦,于是就写了个简单的页面来提供 WEB 访问,具体内容一起通过本文学习吧
    2017-03-03
  • 浅谈微信小程序之官方UI框架we-ui使用教程

    浅谈微信小程序之官方UI框架we-ui使用教程

    这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程,WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JavaScript如何实现组合列表框中元素移动效果

    JavaScript如何实现组合列表框中元素移动效果

    在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框,怎么实现此功能呢,下面通过本文给大家介绍JavaScript如何实现组合列表框中元素移动效果,感兴趣的朋友一起学习吧
    2016-03-03
  • innerHTML,outerHTML,innerTEXT三者之间的区别

    innerHTML,outerHTML,innerTEXT三者之间的区别

    innerHTML,outerHTML,innerTEXT三者之间的区别...
    2007-01-01
  • JS图片轮播与索引变色功能实例详解

    JS图片轮播与索引变色功能实例详解

    本文通过实例代码给大家介绍了JS图片轮播与索引变色功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-07-07
  • JS限制条件补全问题实例分析

    JS限制条件补全问题实例分析

    这篇文章主要介绍了JS限制条件补全问题,涉及javascript数组、字符串的递归、遍历、排序及正则操作相关技巧,需要的朋友可以参考下
    2016-12-12
  • BootStrap 页签切换失效的解决方法

    BootStrap 页签切换失效的解决方法

    bootstrap开发标签页时,标签页显示正常,但点击时候对应内容区域没有变化。接下来通过本文给大家分享BootStrap 页签切换失效的解决方法,感兴趣的朋友一起看看吧
    2017-08-08

最新评论