滚动的文字

滚动的文字

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< TITLE > 滚动的文字效果 < / TITLE>
< META NAME = " Generator " CONTENT = " EditPlus " >
< META NAME = " Author " CONTENT = "" >
< META NAME = " Keywords " CONTENT = "" >
< META NAME = " Description " CONTENT = "" >
< / HEAD>

< script >
// 传统式编程
/*
参数说明
s:要设置的文字
obj:要操作的对象
attr:要操作对象的属性
t:执行时间
*/
function strollText(s,obj,attr,t){
s = s.split( "" );
setInterval( function (){
s.push(s.shift());
obj[attr] = s.join( "" );
},t);
}

// ###################################
// 面象对象式编程
/*
参数说明
s:要设置的文字
obj:要操作的对象
attr:要操作对象的属性
t:执行时间
*/
function strollText(s,obj,attr,t){
this .s = s.split( "" );
this .obj = obj;
this .attr = attr;
this .t = t || 300 ;
}
// prototype上添加两个方法(开始｜停止)
strollText.prototype =
{
start: function (){
var s = this .s;
var o = this .obj;
var a = this .attr;
this .interval = setInterval( function (){
s.push(s.shift());
o[a] = s.join( "" );

}, this .t);
},
stop: function (){
clearInterval( this .interval);
}
};

// 对getElementById进行封装
function $(id){
return document.getElementById(id);
}
// 页面加载完成以后执行的操作
window.onload = function (){

var startBtn = $( ' startBtn ' );
var stopBtn = $( ' stopBtn ' );
// 获取对象
var p = $( " scrollText " );
// 对象实例化
st = new strollText( " 要滚动的文字 " ,p, ' innerHTML ' , 300 );

startBtn.onclick = function (){
st.start();
}
stopBtn.onclick = function (){
st.stop();
}
}
< / script>

< BODY >
< br / >
< style >
#scrollText{
background:yellow;
height:20px;
}
< / style>
< input type = " button " id = " startBtn " value = " 开始 " >
< input type = " button " id = " stopBtn " value = " 停止 " >
< br >
< br >
< br >
< p id = " scrollText " >< / p>
< / BODY>
< / HTML>

 

转载于:https://www.cnblogs.com/xylxq1925/articles/1888011.html