开发者

How to convert PHP simple if statement to Javascript?

开发者 https://www.devze.com 2023-04-06 03:34 出处:网络
I would like to set a random field like in PHP e.g. 1-3 and do the code for each state, however I do not know ho to do the same using javasccript. Is it possible, how to do such thing? Thanks in advan

I would like to set a random field like in PHP e.g. 1-3 and do the code for each state, however I do not know ho to do the same using javasccript. Is it possible, how to do such thing? Thanks in advance.

            <?php $random = rand(1,3); ?>

            <?php if ($random == 1) : ?> 
                <div id="myContent">
                </div>
            <?php endif; ?>

            <?php if ($random == 2) : ?> 
                <div id="myContent2">
                </div>
            <?php endif; ?>

            <?php if ($random == 3) : ?> 
                <div id="myContent3">
                </div>
         开发者_JAVA百科   <?php endif; ?>


// generate a random number between 1 and 3 (inclusive)
var rand=Math.floor(Math.random()*3)+1

if (rand==1) {
  document.write("first content");
}

if (rand==2) {
  document.write("second content");
}

if (rand==3) {
  document.write("third content");
}


I suggest jQuery and the following combination:

HTML:

<div id="myContent1">
    <p>Alternative content 1</p>
</div>

<div id="myContent2">
    <p>Alternative content 2</p>
</div>

<div id="myContent3">
    <p>Alternative content 3</p>
</div>

CSS:

#myContent1, #myContent2, #myContent3 {
    display: none;
}

JS:

1) add jQuery

2)

<script type="text/javascript">
    function randint(min, max) {
        var res;
        do {
           res = Math.floor(Math.random() * (max - min + 1)) + min;
        } while (res > max);
        return res;
    }
    var rnd = randint(1, 3);
    $('#myContent' + rnd).show();
</script>

Sample fiddle: http://jsfiddle.net/uXfcx/. Press Ctrl+Enter to run / re-run


var num = Math.floor(Math.random()*3) + 1;
switch(num) {
    case 1: // refactor me
        var div = document.createElement("div");
        div.setAttribute("id", "myContent" + num);
        document.body.appendChild(div);
        break;
    // etc
}

Pretty simple stuff and no jQuery :-)


Trivial answer with some jQuery

$(document).ready(function(){
    switch(Math.floor(Math.random()*3)+1){
         case 1: $('body').append('<div id="myContent1">Content 1</div>'); break;
         case 2: $('body').append('<div id="myContent2">Content 2</div>'); break;   
         case 3: $('body').append('<div id="myContent3">Content 3</div>'); break;
    }
 });


One solution would be to create a function like:

function showRandomContent() {
    var randomNo=Math.floor(Math.random()*3)+1; //generates random number between 1 and 3

    switch (randomNo) {
        case 1:
            document.getElementById("MyContent").innerHTML = Content1;
            break;
        case 2:
            document.getElementById("MyContent").innerHTML = Content2;
            break;
        case 3:
            document.getElementById("MyContent").innerHTML = Content3;
            break;
    }
}

Now all you have to do is to include a div with id MyContent in your HTML

<div id="MyContent"></div>

The above function showRandomContent() will include the content based on the random number.

0

精彩评论

暂无评论...
验证码 换一张
取 消