JavaScript Date and browser version function
I can't seem to get this code working. Im trying to make it so that if the browser is IE6 or lower it will use "horarios2.png" for the img src and no other. And if its any other browser that it will check the weekday(0-6) so that it will fill in the specific image for each day. From Monday(1) to Wensday(3) the image is suposed to be "quarta.png". The other day's have their own image. They work seperatly but when I try and put them together I get in trouble and it dosen't render the image.
Script
$(document).ready (function horario () {
var date = new Date();
var weekday = (date.getDay());
function (msieversion) {
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 )
return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
else
return 0
}
if ((msieversion() == 0 )&&(weekday==0)) {
document.getElementById('horarios').src = "i开发者_JS百科mg/domingo.png";}
else if ((msieversion() == 0 )&&(weekday==4)) {
document.getElementById('horarios').src = "img/quinta.png";}
else if ((msieversion() == 0 )&&(weekday==5)) {
document.getElementById('horarios').src = "img/sexta.png";}
else if ((msieversion() == 0 )&&(weekday==6)) {
document.getElementById('horarios').src = "img/sabado.png";}
else if((msieversion() <= 6 )&&(weekday>=0)) {
document.getElementById('horarios').src = "img/horarios2.png";}
else {
document.getElementById('horarios').src = "img/quarta.png";}
});
HTML
<img id="horarios" border="0" alt="" width="343" height="45" />
Here is what I think you meant DEMO HERE (mouseover the image)
function msieversion() {
var ua = window.navigator.userAgent
var msie = ua.indexOf("MSIE ");
return (msie == -1)?0:
parseInt(ua.substring (msie+5, ua.indexOf (".", msie )))
}
function getImg(idx) {
return [
"img/domingo.png",
"img/quarta.png",
"img/quarta.png",
"img/quarta.png",
"img/quinta.png",
"img/sexta.png",
"img/sabado.png"
][idx];
}
$(document).ready(function() {
var weekday = new Date().getDay();
if (msieversion() == 0 ) $("#horarios").attr("src",getImg(weekday));
else $("#horarios").attr("src",(msieversion() <= 6 )? "img/horarios2.png":"img/quinta.png");
});
Your code can be refined more.
But before that, you may want to use the "official" way of detecting the version of IE: (From Detecting Internet Explorer More Effectively)
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
Now, lets work on the logic:
- If the browser is IE6 or lower it will use "horarios2.png" for the img src and no other.
- And if its any other browser that it will check the weekday(0-6) so that it will fill in the specific image for each day.
- From Monday(1) to Wensday(3) the image is suposed to be "quarta.png".
- The other day's have their own image
:
function horario () {
var imageName = "";
if(getInternetExplorerVersion() <= 6) {
imageName = "img/horarios2.png";
return;
}
var date = new Date();
var weekday = (date.getDay());
switch(weekday)
{
case 0:
imageName = "img/domingo.png";
break;
case 1:
case 2:
case 3:
imageName = "img/quarta.png";
break;
case 4:
imageName = "img/quinta.png";
break;
case 5:
imageName = "img/sexta.png";
break;
case 6:
imageName = "img/sabado.png";
break;
default:
imageName = "img/horarios2.png";
}
document.getElementById('horarios').src = imageName;
}
You can take a page from the html5boilerplate (this example doesn't require any html5 specific parts) where you use the [if IE]
proprietary markup to detect IE version, then read from the <html>
element's className
in javascript
jsfiddle example
HTML:
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
JavaScript:
var htmlElement = document.getElementsByTagName('html')[0],
horariosImg = document.getElementById('horarios'),
imgSrc = '';
if (htmlElement.className.indexOf('ie6') > -1) {
// do ie 6 (and lower) stuff
imgSrc = 'img/horarios2.png';
} else {
// do all other browser stuff
switch ((new Date).getDay()) {
case 0: // Sun
imgSrc = 'img/domingo.png';
break;
case 1: // Mon
case 2: // Tues
case 3: // Wed
case 4: // Thurs
imgSrc = 'img/quinta.png';
break;
case 5: // Fri
imgSrc = 'img/sexta.png';
break;
case 6: // Sat
imgSrc = 'img/sabado.png';
break;
}
}
horariosImg.src = imgSrc;
精彩评论