【问题标题】:Javascript Opacity ChangeJavascript 不透明度更改
【发布时间】:2013-09-26 03:09:46
【问题描述】:

好的,我做了一些更改,修复了一些问题,但是现在它并没有通过所有的字母,一些字母变得可见,然后脚本停止了。另外,我如何让字母淡入?我以为我必须这样做,但脚本由于某种原因没有暂停,而且你看不到渐变。

<script type="text/javascript" >

        //alert("Script Loaded");

        var $TotalLetters = 16,
        $SwappedLets = 0,
        $L1 = false,
        $L2 = false,
        $L3 = false,
        $L4 = false,
        $L5 = false,
        $L6 = false,
        $L7 = false,
        $L8 = false,
        $L9 = false,
        $L10 = false,
        $L11 = false,
        $L12 = false,
        $L13 = false,
        $L14 = false,
        $L15 = false,
        $L16 = false,
        $RanNum = 0,
        $Holderval = 0;

        window.onload = function DOL() {
            DoOnLoad()
        }

        function DoOnLoad() { 
            //alert("DoOnLoad");
            /* Change the opacity of every letter randomly,
            CAN CHANGE IN SMALL TAG */

            if ($SwappedLets <= $TotalLetters + 1) {
                $RanNum = Math.floor(Math.random()*17); 
                //alert(window["$L" + $RanNum]);
                 if (window["$L" + $RanNum] == false) {
                    window["$L" + $RanNum] = true;
                    OPIncre($RanNum);
                }
            }

        } 

        function OPIncre(RN) {
            if (document.getElementById("tL" + RN).style.opacity <= 1) {
                document.getElementById("tL" + RN).style.opacity = $Holderval + 0.001;
                $Holderval = $Holderval + 0.001;
                window.setTimeout(OPIncre(RN),600);
            }
            else {
                $SwappedLets = $SwappedLets + 1;
                $Holderval = 0;
                window.setTimeout(DoOnLoad,500);    
            }
        } 

    </script>

----老:

我是 Javascript 新手,我无法让脚本随机更改 html 元素的不透明度。默认情况下,元素的不透明度在 css 中设置为 0。我试过环顾四周,还没有找到解决办法。我在 Firefox 的 Javascript 错误控制台中没有收到任何错误。有什么明显的错误吗?

<script type="text/javascript" >
        /*alert("Script Loaded");*/
        var $TotalLetters = 16,
        $SwappedLets = 0,
        $L1 = false,
        $L2 = false,
        $L3 = false,
        $L4 = false,
        $L5 = false,
        $L6 = false,
        $L7 = false,
        $L8 = false,
        $L9 = false,
        $L10 = false,
        $L11 = false,
        $L12 = false,
        $L13 = false,
        $L14 = false,
        $L15 = false,
        $L16 = false,
        $RanNum = 0;

        window.onload = function DOL() {
            DoOnLoad()
        }

        function DoOnLoad() {
            /*alert("DoOnLoad");*/
            /* Change the opacity of every letter randomly,
            CAN CHANGE IN SMALL TAG */

            if ($SwappedLets <= $TotalLetters + 1) {
                $RanNum = Math.floor(Math.random()*17);
                /*alert(window["$L" + $RanNum]);*/
                if (window["$L" + $RanNum] == false) {
                    window["$L" + $RanNum] = true;
                    OPIncre($RanNum);
                }
            }

        }

        function OPIncre(RN) {
            while (document.getElementById("tL" + RN).style.Opacity <= 1) {
                document.getElementById("tL" + RN).style.Opacity = document.getElementById("tL" + RN).style.Opacity + 0.1;
            }
            $SwappedLets = $SwappedLets + 1;
            window.setTimeout(DoOnLoad,500);
        }
    </script>

【问题讨论】:

  • 哇。考虑使用数组,而不是所有这些布尔值列表,您的代码会更简洁。
  • 我会使用数组,但我仍在学习如何在 Javascript 中执行这些操作。
  • Javascript 区分大小写。不要使用Opacity
  • 顺便问一下,这个函数应该做什么?我所看到的只是它将随机元素的不透明度设置为 1。那么为什么不简单地写 (element).style.opacity = 1 而不是使用循环呢?
  • 我希望它们淡入,而不是直接进入 1。

标签: javascript html random opacity


【解决方案1】:

不确定“tL”是什么类型的元素,但假设它们是&lt;p&gt; 类型,下面的脚本应该可以解决问题:

var $elements;
window.onload = function DOL() {
    // Get all elements
    $elements = $("p[id^='tL']");

    // Loop through all of them
    $elements.each(function(i, e) {
        e.style.opacity = Math.random() + 0.17;
    });
}

请注意,我在这里使用的是 jQuery。由于您对变量使用dollor 表示法,我假设您也在使用它。

【讨论】:

  • 即使没有 jQuery,Javascript 中的变量也可以包含美元符号。只是有些人喜欢这样。
  • 我知道,所以我说我只是假设。
  • 李斯特先生的假设是正确的。我喜欢使用美元符号来使变量更容易被发现。非常感谢您的贡献!我还没有完全理解 jQuery 和 Javascript 之间的区别,你介意解释一下吗?
  • jQuery 是一个库,它既简化了 JavaScript 函数的编写,又使它们与不同/较旧的浏览器兼容。您可以用更少的代码(冗长)完成更多工作,并且它们具有出色的 API。另外,这里有很多关于它的问题,所以你可能会找到解决所有问题的方法。
猜你喜欢
  • 2012-09-20
  • 2013-03-04
  • 2012-01-20
  • 1970-01-01
  • 2010-12-05
  • 2012-12-09
  • 1970-01-01
  • 2016-12-02
  • 2012-07-18
相关资源
最近更新 更多