在一天的时间将课程改为活动

时间：2014-05-14 04:37:46

标签： javascript css class datetime

我有一个时间表，可以显示按时间显示在实时Feed上的内容。我基本没有java经验，但我需要根据时间更改活动div类，以便人们知道哪个段正在显示。我还需要活动的div来集中在菜单上。

我的HTML是：

<div class="schedule-container">
<div class="schedule-header">
<div class="scheduleLogo"><img style="width: 78px;" src="http://cdn2.hubspot.net/hub/160749/file-778730016-png/InSites/insites-logo-white.png" alt="insites-logo-white" width="78"></div>
<div class="scheduleTime">time</div>
</div>
<div class="schedule-list-container">
<div class="schedule-list-header">Time slot host Interview subject topic</div>
<div class="scrollPanel">
<div class="schedule-list">
<ul>
<li><a href="#">
<div class="time">10:00am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Espen Sivertsen Type A Machines"</div>
<div class="description">Tech - culture &amp; ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">10:15</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Felix</div>
</a></li>
<li><a href="#">
<div class="time">10:30</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Cat Casut</div>
<div class="description">"Education - Hackathon Kaiser grantee&nbsp; &amp; intern @ Type A</div>
</a></li>
<li><a href="#">
<div class="time">10:45</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole open</div>
</a></li>
<li><a href="#">
<div class="time">11:00am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Sarah Kayle Robot Club"</div>
<div class="description">Education -</div>
</a></li>
<li><a href="#">
<div class="time">11:15</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
<div class="description">open</div>
</a></li>
<li><a href="#">
<div class="time">11:30</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Calvin and Noah</div>
<div class="description">Minecraft Tech - programming?</div>
</a></li>
<li><a href="#">
<div class="time">11:45</div>
<span class="divider"> </span>
<div class="eventInfo">"OmNom video Sound Fit video"</div>
</a></li>
<li><a href="#">
<div class="time">12:00noon</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
</a></li>
<li><a href="#">
<div class="time">12:15</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
</a></li>
<li><a href="#">
<div class="time">12:30</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole "Barbara Hanna CEO/Founder, Cyant"</div>
<div class="description">Tech-art-nexus</div>
</a></li>
<li><a href="#">
<div class="time">12:45</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">1:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Greg DeLaune</div>
</a></li>
<li><a href="#">
<div class="time">1:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera Derick Lee</div>
<div class="description">Tech - &nbsp;Mobile Fab Lab</div>
</a></li>
<li><a href="#">
<div class="time">1:30</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Deborah Acosta</div>
<div class="description">Innovation ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">1:45</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
<div class="description">Lazer Racing Motorcycle</div>
</a></li>
<li><a href="#">
<div class="time">2:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta Corey Mcguire</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">2:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera "Kofi and Allejandro last names?</div>
</a></li>
<li><a href="#">
<div class="time">2:30</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
<div class="description">Tech - inventing?</div>
</a></li>
<li><a href="#">
<div class="time">2:45</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
<li><a href="#">
<div class="time">3:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:30</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
</ul>
</div>
</div>
</div>
</div>

我的CCS：

/* Schedule */
.schedule-container{
    width: 100%;
    height: 100%;
    padding: 3px;
}

.schedule-header{
    background: #999;
    padding: 5px;
    height: 20px;
}

.scheduleLogo{
    float: left;
    vertical-align: top;
    text-align: left;
}

.scheduleTime{
    float: left;
    text-align: right;
}

.schedule-list-container{
    background: #666;
    padding: 5px;
    color: #fff;
    font-size: .75em;
}

.schedule-list-header{
    background: #666;
    color: #999;
    white-space: nowrap;
}

.scrollPanel{
    overflow-x: auto;
    overflow-y: scroll;
    max-height: 400px;
}

.schedule-list ul{
    padding-left: 0px;
}

.schedule-list li{
    display: block;
    list-style-type: none;
    padding-left: 0px;
    }

.schedule-list li a{
    display: block;
    padding: 10px;
    color:#fff; 
    text-decoration: none;
    border-top:thin solid #666;
    border-bottom:thin solid #999;
    background: -webkit-linear-gradient(#999, #666); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#999, #666); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#999, #666); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#999, #666); /* Standard syntax */
}

.schedule-list li a:hover{
    border-top:thin solid #999;
    border-bottom:thin solid #666;
    background: -webkit-linear-gradient(#666, #999); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#666, #999); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#666, #999); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#666, #999); /* Standard syntax */
}

.active{
    background: -webkit-linear-gradient(#99ff66, #999); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#99ff66, #999); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#99ff66, #999); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#99ff66, #999); /* Standard syntax */

}

.time{
    float: left;
    padding-right: 5px;
    font-weight: bold;
    height: 100%;
    width: 20%;
}

.divider{
    width: 2px;
    border-right: 1px;
    border-color: #fff;
}

.event{
    float: left;
    padding-left:5px;
    height: 100%;
    width: 80%;
}

.eventInfo{
    font-weight: bold;
}

.description{
    font-weight: normal;
}

1 个答案:

答案 0 :(得分：0)

我已经为您的代码添加了一些脚本和样式，但不确定这会对您有所帮助。如何检查..

<强> CSS 

/* Schedule */
.schedule-container{
    width: 100%;
    height: 100%;
    padding: 3px;
}

.schedule-header{
    background: #999;
    padding: 5px;
    height: 20px;
}

.scheduleLogo{
    float: left;
    vertical-align: top;
    text-align: left;
}

.scheduleTime{
    float: left;
    text-align: right;
}

.schedule-list-container{
    background: #666;
    padding: 5px;
    color: #fff;
    font-size: .75em;
}

.schedule-list-header{
    background: #666;
    color: #999;
    white-space: nowrap;
}

.scrollPanel{
    overflow-x: auto;
    overflow-y: scroll;
    max-height: 400px;
}

.schedule-list ul{
    padding-left: 0px;
}

.schedule-list li{
    display: block;
    list-style-type: none;
    padding-left: 0px;
    }

.schedule-list li a{
    display: block;
    padding: 10px;
    color:#fff; 
    text-decoration: none;
    border-top:thin solid #666;
    border-bottom:thin solid #999;
    background: -webkit-linear-gradient(#999, #666); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#999, #666); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#999, #666); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#999, #666); /* Standard syntax */
    height: auto;
    min-height: 20px;
}

.schedule-list li a:hover{
    border-top:thin solid #999;
    border-bottom:thin solid #666;
    background: -webkit-linear-gradient(#666, #999); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#666, #999); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#666, #999); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#666, #999); /* Standard syntax */
}

.active{
    background: -webkit-linear-gradient(#99ff66, #999); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#99ff66, #999); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#99ff66, #999); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#99ff66, #999); /* Standard syntax */

}

.time{
    float: left;
    padding-right: 5px;
    font-weight: bold;
    height: auto;
    width: 20%;
}

.divider{
    width: 2px;
    border-right: 1px;
    border-color: #fff;
}

.event{
    float: left;
    padding-left:5px;
    height: 100%;
    width: 80%;
}

.eventInfo{
    font-weight: bold;
    float: left;
}

.description{
    font-weight: normal;
}
.active_time {
  background: #FFF !important;
  color: #000 !important;
  margin-left: 0%;
}

<强> HTML 

 <div class="schedule-container">
<div class="schedule-header">
<div class="scheduleLogo"><img style="width: 78px;" src="http://cdn2.hubspot.net/hub/160749/file-778730016-png/InSites/insites-logo-white.png" alt="insites-logo-white" width="78"></div>
<div class="scheduleTime">time</div>
</div>
<div class="schedule-list-container">
<div class="schedule-list-header">Time slot host Interview subject topic</div>
<div class="scrollPanel">
<div class="schedule-list">
<ul>
<li><a href="#">
<div class="time">10:00 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Espen Sivertsen Type A Machines"</div>
<div class="description">Tech - culture &amp; ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">10:15 am</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Felix</div>
</a></li>
<li><a href="#">
<div class="time">10:30 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Cat Casut</div>
<div class="description">"Education - Hackathon Kaiser grantee&nbsp; &amp; intern @ Type A</div>
</a></li>
<li><a href="#">
<div class="time">10:45 am</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole open</div>
</a></li>
<li><a href="#">
<div class="time">11:00 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Sarah Kayle Robot Club"</div>
<div class="description">Education -</div>
</a></li>
<li><a href="#">
<div class="time">11:15 am</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
<div class="description">open</div>
</a></li>
<li><a href="#">
<div class="time">11:30 am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Calvin and Noah</div>
<div class="description">Minecraft Tech - programming?</div>
</a></li>
<li><a href="#">
<div class="time">11:45 am</div>
<span class="divider"> </span>
<div class="eventInfo">"OmNom video Sound Fit video"</div>
</a></li>
<li><a href="#">
<div class="time">12:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
</a></li>
<li><a href="#">
<div class="time">12:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
</a></li>
<li><a href="#">
<div class="time">12:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole "Barbara Hanna CEO/Founder, Cyant"</div>
<div class="description">Tech-art-nexus</div>
</a></li>
<li><a href="#">
<div class="time">12:45 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">1:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Greg DeLaune</div>
</a></li>
<li><a href="#">
<div class="time">1:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera Derick Lee</div>
<div class="description">Tech - &nbsp;Mobile Fab Lab</div>
</a></li>
<li><a href="#">
<div class="time">1:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Deborah Acosta</div>
<div class="description">Innovation ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">1:45 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
<div class="description">Lazer Racing Motorcycle</div>
</a></li>
<li><a href="#">
<div class="time">2:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta Corey Mcguire</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">2:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera "Kofi and Allejandro last names?</div>
</a></li>
<li><a href="#">
<div class="time">2:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
<div class="description">Tech - inventing?</div>
</a></li>
<li><a href="#">
<div class="time">2:45 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:00 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
<li><a href="#">
<div class="time">3:15 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:30 pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
</ul>
</div>
</div>
</div>
</div>

我添加了脚本和jquery库 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script>
   $(function(){
     var date = new Date();
     var formatDate =  formatAMPM(date);      
     var times   = $('.time');
     $.each(times,function(){
        if(formatDate == ($(this).html())) {
          $(this).parent().addClass('active_time');

        }
     });

   });
   function formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
  }
 </script>

因此活动时间将添加活动类，后台将更改。

相关问题
最新问题