淡入的JavaScript消息循环_Javascript_Html

淡入的JavaScript消息循环

javascript html

淡入的JavaScript消息循环,javascript,html,Javascript,Html,我被卡住了，不熟悉JavaScript。在HTML中，我可以得到一个循环来显示来自数组的连续消息。我试图让这些信息逐渐消失，而不是突然出现。我可以用下面的代码分别实现这两种效果，但我似乎无法将它们结合起来并使其工作。感谢您的评论/帮助 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="tex

我被卡住了，不熟悉JavaScript。
在HTML中，我可以得到一个循环来显示来自数组的连续消息。我试图让这些信息逐渐消失，而不是突然出现。我可以用下面的代码分别实现这两种效果，但我似乎无法将它们结合起来并使其工作。感谢您的评论/帮助

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css"> 
        #messaging{ 
            font-size: 35pt; 
        } 
    </style> 
    <script type ="text/javascript" >
        var phrases = ["message1",
            "message2",
            "message3",
            "message4"];
        var msgCycleRate = 3000;
        var text;
        function get( id0 ) {
            return document.getElementById( id0 );
        }
        function cycleMsgs( id1 ) { 
            if ('undefined' === typeof id1){
                id1 = -1;
            } 
            id1 = (id1 + 1)% phrases.length; 
            start(text = get( 'messaging' ).innerHTML = phrases[id1]); //line 37 here
            setTimeout( 'cycleMsgs(' + id1 + ');', msgCycleRate); 
        }
        function doMsgs() { 
           setTimeout( 'cycleMsgs();', 0); 
        }
        var opacity = 0.0;
        var alpha= 0;

        function start(textM) {
            textM.style.filter="alpha(opacity = " + alpha +")";
            textM.style.opacity=opacity;
            setTimeout("fadeIn(textM)",50);
        }

        function fadeIn(textM) {
            opacity= opacity +0.1;
            alpha=parseInt(opacity*100);
            textM.style.opacity=opacity;
            textM.style.filter="alpha(opacity = " + alpha +")";
            if (opacity < 1.0) {
                setTimeout("fadeIn(textM)",50);
            }
        }
        if(window.addEventListener) {
            window.addEventListener('load', doMsgs, false); // non-IE
        }
        else { 
            window.attachEvent('onload', doMsgs); // IE 
        }
    </script>
</head>
<body> 
   <p id ="messaging">/p>
</body>


#消息传递{
字号：35pt；
} 
变量短语=[“消息1”，
“信息2”，
“信息3”，
“信息4”]；
var msgCycleRate=3000；
var文本；
函数get（id0）{
返回文档.getElementById（id0）；
}
函数循环emsgs（id1）{
if（'undefined'==id1的类型）{
id1=-1；
} 
id1=（id1+1）%phrases.length；
开始（text=get（'messaging'）。innerHTML=phrases[id1]）；//此处第37行
setTimeout（'cycleMsgs（'+id1+'）；'，msgcyclRate）；
}
函数doMsgs（）{
setTimeout（'cycleMsgs（）；'，0）；
}
var不透明度=0.0；
varα=0；
功能启动（textM）{
textM.style.filter=“alpha（不透明度=“+alpha+”””；
textM.style.opacity=不透明度；
setTimeout（“fadeIn（textM）”，50；
}
函数fadeIn（textM）{
不透明度=不透明度+0.1；
alpha=parseInt（不透明度*100）；
textM.style.opacity=不透明度；
textM.style.filter=“alpha（不透明度=“+alpha+”””；
如果（不透明度<1.0）{
setTimeout（“fadeIn（textM）”，50；
}
}
if（window.addEventListener）{
window.addEventListener（'load'，doMsgs，false）；//非IE
}
否则{
window.attachEvent（'onload'，doMsgs）；//IE
}
/p>

我运行代码并获得：

SCRIPT5007:无法设置未定义或空引用的属性“filter”，第37行字符17

我在这里看不到什么？再次感谢。

您正在将HTML传递给

开始

函数，而不是

消息传递

DOM元素本身。如果将第37行拆分，问题会变得更清楚：

get( 'messaging' ).innerHTML = phrases[id1];
text = get( 'messaging' ).innerHTML;
start(text);

您可以通过将DOM元素传递给

start

来解决此问题：

start(get('messaging'));

请哦，请尝试jquery来获取这类东西完美，解决方案很好。对于其他查看此代码的人，必须在循环调用start（）之前重置不透明度和alpha变量，否则淡入将不会实现。