小编Isa*_*aac的帖子

我试图计算从命令行(3)开始和结束的那一刻起的时间差,但看起来我错了,因为第(7)行显示为零.我期待它显示6500(1500 + 3500 + 1500).请帮我.

sd = new Date(); 
sdm = sd.getMilliseconds();
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500);
ed = new Date(); 
edm = ed.getMilliseconds();
df = edm - sdm;
document.getElementById('df').innerHTML = df;

我抛出这个问题的原因是,我正在写一个幻灯片(非常简单),并且它没有正确显示图像,因为它从一个跳到另一个.

这是我的HTML和JS.

    $(document).ready(
      function() {

            var i=0;
            var imgs = $('#images ul').children();
            var j = imgs.length;

            setInterval(function(){ runIt(); }, 6500);

            function runIt() {
                i = i + 1;
                if (i == j) { i=0;}

                $(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500);
            }

    }); 

<div id="slider">
    <ul>
        <li><img src="images/slider/s1.jpg" /></li>
        <li><img src="images/slider/s2.jpg" /></li>
        <li><img src="images/slider/s3.jpg" /></li>
        <li><img src="images/slider/s4.jpg" /></li> …

我很好奇知道CSS文件中语句的执行顺序.我在CSS文件中有以下CSS:

/* screen width larger than 800px */
@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

/* screen width larger than 1200px */
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}


/* default setting */
.indexphototd { 
    width:500px !important;
   }
.indexphoto {
    width:500px !important;
   }

在上面的代码中,我已经在2种不同的屏幕尺寸中声明了2种类型的2种类型的设置,之后我提到了2种语句而没有屏幕尺寸的限制(即默认).

我的目标是,屏幕大小不属于上面的那两组,它必须采用下面第三组中设置的默认值.

但我想知道默认设置是否会覆盖屏幕大小特定设置,因为我已经在最后插入了默认设置.我必须把它放在一开始吗？能告诉我CSS中的执行顺序吗？我知道CSS不是一种编程语言.我是网络开发和学习所有这些小东西的新手.请帮我.谢谢.

艾萨克

我有一个问题@media screen (min-width:1200px).

我为图像和CSS设置了2种属性(类),期望它使图像和"td"在调整屏幕大小时将图像放大,但是当屏幕大于1200px时它仍然显示图像的较小尺寸.

这是HTML:

 <tr>
     <td class="indexphototd">
         <img class="indexphoto" src="../wp-content/uploads/2013/05/indexphoto300.jpg" /></td>
     <td>more stuff here</td> 
 </tr>

这是CSS:

/* for browsers larger than 1200px width */
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}


@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}