如何使用JavaScript显示/隐藏Flash对象

Question

I want to embed this timer in a website. Basically I generated a timer from this website . Then I would use this code and inject it to an html page. The code works great, however I only want to use this timer for some specific case (ie, using if-else) as followed:

<script> 

flash = '<object type=&quot;application/x-shockwave-flash&quot; data=&quot;http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=000000&bgcolor=ffffff&date_month=10&date_day=26&date_year=0&un=DEAL ENDS&size=normal&mo=10&da=26&yr=2014&quot; width=&quot;250&quot; height=&quot;100&quot;><param name=&quot;movie&quot; value=&quot;http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=000000&bgcolor=ffffff&date_month=10&date_day=26&date_year=0&un=DEAL ENDS&size=normal&mo=10&da=26&yr=2014&quot; /><param name=&quot;bgcolor&quot; value=&quot;#ffffff&quot; /></object>';`

    if (new Date().getHours() < 20) {
        document.write(flash);
    }

</script>

But then I'll get this error no plugin available to display this content

So how would I built something like this another way, or maybe there's a fix for this

THanks

Answer 1

I'll propose 2 options and I'm sure there is bunch more out there. First one should work with your flash option....

OPTION 1 First put your flash object on the page with style display:none . Then in your javascript you evaluate if it's time to show it.

HTML EXAMPLE 1:

<object id="myCountdown" style="display:none;" width="400" height="50" data="path-to-your-flash.swf"></object>

HTML EXAMPLE 2 with classes and css - prefered:

<object id="myCountdown" class="hidden" width="400" height="50" data="path-to-your-flash.swf"></object>

CSS:

.hidden{display:none;}

JS:

if(new Date().getHours() < 20){
   $('#myCountdown').css('display', 'block'); //using jQuery for first example

//OR

   $('#myCountdown').removeClass('hidden'); //using jQuery exmaple 2
}

OPTION 2:

Talking about building it another way I would use a plugin: COUNTDOWN.JS