zoukankan      html  css  js  c++  java
  • 动态文字滚动的例子

    在文本框中动态滚动文字的例子:

    代码
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3  <head>
    4 <title>这是一个动态JavaScript文字显示的例子</title>
    5 <script type="text/JavaScript">
    6 var POSITION = 50;
    7 var DELAY = 150;
    8 var MESSAGE = "这是一个动态JavaScript文字显示的例子";
    9
    10 function bannerObject(){
    11 this.msg = MESSAGE;
    12 this.out = " ";
    13 this.pos = POSITION;
    14 this.delay = DELAY;
    15 this.i = 0;
    16 this.reset = clearMessage;
    17 }
    18  
    19 function clearMessage(){
    20 this.pos = POSITION;
    21 }
    22
    23 var scroll = new bannerObject();
    24 function scroller(){
    25 scroll.out += " ";
    26 if(scroll.pos>0)
    27 for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++){
    28 scroll.out +=" " ;
    29 }
    30 if (scroll.pos>= 0)
    31 scroll.out += scroll.msg;
    32 else
    33 scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length);
    34
    35 document.noticeForm.notice.value = scroll.out;
    36 scroll.out = " ";
    37 scroll.pos--;
    38 scroll.pos--;
    39 if (scroll.pos < -(scroll.msg.length)) {
    40 scroll.reset();
    41 }
    42 window.setTimeout("scroller()", scroll.delay);
    43 }
    44  </script>
    45  </head>
    46
    47
    48  <body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0">
    49 <table border="0" cellspacing="0" cellpadding="0">
    50 <tr><td width="100%">
    51 <form name="noticeForm" action="">
    52 <p><input type="text" name="notice" size="50" style="background-color: rgb(192,192,192)"/></p>
    53 </form>
    54 </td></tr>
    55 </table>
    56  </body>
    57  </html>
    58  

    在状态栏滚动文字

    代码
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3  <head>
    4 <title>这是一个跑马灯效果的JavaScript文档-在状态栏</title>
    5 <script type="text/JavaScript">
    6
    7 var msg = "这是一个跑马灯效果的JavaScript文档";
    8
    9 var interval = 100;
    10
    11 var spacelen = 120;
    12
    13 var space10 = " ";
    14
    15 var seq = 0;
    16
    17 function Scroll() {
    18
    19 len = msg.length;
    20
    21 window.status = msg.substring(0, seq + 1);
    22
    23 seq++;
    24
    25 if (seq >= len) {
    26
    27 seq = spacelen;
    28
    29 window.setTimeout("Scroll2();", interval);
    30
    31 }
    32
    33 else
    34
    35 window.setTimeout("Scroll();", interval);
    36
    37 }
    38
    39 function Scroll2() {
    40
    41 var out = "";
    42
    43 for (i = 1; i <= spacelen / space10.length; i++)
    44 out +=space10;
    45
    46 out = out + msg;
    47
    48 len = out.length;
    49
    50 window.status = out.substring(seq, len);
    51
    52 seq++;
    53
    54 if (seq >= len) { seq = 0; };
    55
    56 window.setTimeout("Scroll2();", interval);
    57
    58 }
    59
    60 Scroll();
    61
    62 </script>
    63  </head>
    64  <body>
    65  </body>
    66  </html>
    67  
  • 相关阅读:
    springmvc与Ajax交互
    springmvc请求参数获取的几种方法
    struts2进阶篇(2)
    mysql explain用法
    struts2基础篇(1)
    struts2工作原理
    PHP 数组的拷贝是按值传递 or 按引用传递
    js中使用cookie
    Yii rules常用规则
    js倒计时发送验证码按钮
  • 原文地址:https://www.cnblogs.com/zhouxiuquan/p/1934360.html
Copyright © 2011-2022 走看看