1

要素のスタイルを設定しようとしています。ブール値を設定し、それを使用して 2 つの関数を切り替えています。ただし、実行されないため、スクリプトが正しいかどうかわかりません。

var dfault = false

function rand() {
        return~~ (Math.random() * 255);
    }

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function randFrame(){
    vid = document.getElementById("video_container");

    if(!dfault){
        vid.style.backgroundColor  = get_random_color();


    }else{
        vid.style.border = ('5px solid rgba(54,57, 62, .3)');

    }

    dfault = !dfault
}

基本的に、境界線を通常の色からランダムな色に変更して、前後に変更するのが好きです。

HTML:

<div id="sideMenu">
    <ul>
        <li onclick="wideScreen()">Wide Screen</li> <!--turn sidebar on/off-->
        <li onclick="randVidframe()">Random Border</li> <!--randomize vidcontain border-->
        <li>Control Bar</li>
    </ul>
</div>

CSS:

#video_container{
    -webkit-box-flex: 1; 
    -moz-box-flex: 1;
    border:5px solid rgba(54,57, 62, 1);
    margin: 20px;
    /*padding: 5px;*/
    height: 100%;
    position: relative;
    /*background-color:red;*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    z-index: 1;
}
4

2 に答える 2

2

スクリプトは次のようになります

var dfault = false

function rand() {
        return~~ (Math.random() * 255);
    }
function randVidframe(){

    if(!dfault){
        elem.style.border = ('5px solid rgb(' + [rand(), rand(), rand()] + ')');

    }else{
        elem.style.border = ('5px solid rgba(54,57, 62, .3)');

    }

    dfault = !dfault
}
于 2013-02-16T10:08:26.063 に答える
1

  1. ローカル変数は、関数が呼び出されるたびに再初期化されます。関数のスコープ外の変数を使用する必要がありますが、次のようになります。

  2. グローバル変数を使用しないでください、それらは悪いです-OK？

  3. DOMの準備ができるまでスクリプトが呼び出されないようにしてください。実行が早すぎると、要素をスクリプトで使用できなくなります。

すなわち：

// don't do anything until the DOM is ready
window.onload = function() {

    // local variables
    var dfault;
    var elem = document.getElementById('myelem');

    // local function, not global
    function rand() {
        return ~~(Math.random() * 255);
    }

    // despite above warning, this function has to be global
    // because you're using DOM level 0 inline event handlers :(
    window.randVidframe = function() {
        dfault = !dfault;

        if (dfault) {  // put "true" test first
            elem.style.border = ('5px solid rgba(54,57, 62, .3)');
        } else {
            elem.style.border = ('5px solid rgb(' + [rand(), rand(), rand()] + ')');
        }
    };

    window.wideScreen = function() {
        ...
    };
};
于 2013-02-16T10:34:05.143 に答える