关于时间倒计时暂停然后继续开始（延伸 li轮流显示 hover移入暂停 mouseover移出继续开始）

最新推荐文章于 2024-08-23 07:30:00 发布

qq_26577163

最新推荐文章于 2024-08-23 07:30:00 发布

阅读量1k

点赞数

文章标签： html jquery 对象

本文链接：https://blog.csdn.net/qq_26577163/article/details/56676368

版权

 
 1.时间倒计时 暂停 然后继续开始 
 
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
 
 <% 
 
 String path = request.getContextPath(); 
 
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
 
 %> 

    
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
 < 
 html 
 > 
 
    
 < 
 head 
 > 
 
      
 < 
 base  
 href="<%=basePath%>"> 
 
       
 
      
 < 
 title 
 >定时器的js实现</ 
 title 
 > 
 
        
 < 
 script  
 language 
 = 
 "javascript"  
 type 
 = 
 "text/javascript" 
 > 
 
          
 var count=0; 
 
          
 var a=true; 
 
          
 function init(){ 
 
              
 setInterval(getJindu,100);//每隔1秒执行函数getJindu 
 
          
 } 
 
          
 function getJindu(){ 
 
              
 if(a){ 
 
                  
 document.getElementById("counter").innerHTML=count++; 
 
              
 }else{ 
 
                  
 document.getElementById("counter").innerHTML=count; 
 
              
 } 
 
          
 } 
 
          
 function stopTimer(){ 
 
              
 a=false; 
 
          
 } 
 
          
 function startTimer(){ 
 
              
 a=true; 
 
          
 } 
 
      
 </ 
 script 
 > 

    
 
      
 </ 
 head 
 > 
 
      
 < 
 body  
 style 
 = 
 "padding-left: 6px; padding-right: 8px;"  
 onload 
 = 
 "init();" 
 > 
 
      
 < 
 div  
 id 
 = 
 "counter" 
 ></ 
 div 
 > 
 
      
 < 
 input  
 type 
 = 
 "button"  
 value 
 = 
 "点击开始"  
 onclick 
 = 
 "startTimer();" 
 />< 
 input  
 type 
 = 
 "button"  
 value 
 = 
 "点击停止"  
 onclick 
 = 
 "stopTimer();" 
 /> 
 
    
 </ 
 body 
 > 
 
 </ 
 html 
 > 
 
 2.延伸 li轮流显示 hover移入暂停 mouseover移出继续开始 
 
 ===============css=============== 
 
 .rankpic_left0{width: 247.5px; height: 398px;overflow: hidden;/* border: 1px solid #efefef;*/}
  
 
 .rankImg ul{width: 100%; height: 100%;}
 .rankImg ul li{border-bottom: 1px solid #efefef; cursor: pointer; }
 .rankImg ul li p.oTitle,.rankImg ul .oTitle{width: 100%; height: 35px; line-height: 35px; cursor: pointer;}
 .rankImg ul li .open{width: 100%; height: 145px; overflow: hidden;}
 .open_img{width: 100%; height: 100%; position: relative;}
 .rankImg ul li:hover .open{ display: block;}
 .rankImg ul li:hover p.oTitle{ display: none;}
  
 
 
  
 
 
  
 
 ==================html============ 
 
 <div class="rankpic_left0 rankImg fl"> 
 
 <ul>
       <li>
       <div class="open dpb">
       <div class="open_img effect0">
           <img src="{$votelist.5.miniurl}">
       </div>
       </div>
       <p class="dpn oTitle">sdfdfs</p>
       </li>
       <li>
       <div class="open dpn">
       <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
       </div>
       <p class="oTitle dpb">sdfdfs</p>
       </li>
       <li>
       <div class="open dpn">
       <div class="open_img">
           <img src="{$votelist.5.miniurl}">
       </div>
       </div>
       <p class="oTitle dpb">sdfdfs</p>
       </li>
       <li>
       <div class="open dpn">
       <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
       </div>
       <p class="oTitle dpb">sdfdfs</p>
       </li>
       <li>
       <div class="open dpn">
       <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
       </div>
       <p class="oTitle dpb">sdfdfs</p>
       </li>
       <li>
       <div class="open dpn">
       <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
       </div>
       <p class="oTitle dpb">sdfdfs</p>
       </li>
       <li>
       <div class="open dpn">
       <div class="open_img"><img src="{$votelist.5.miniurl}"></div>
       </div>
       <p class="oTitle dpb">sdfdfs</p>
       </li>
       <p class="oTitle dpb">其他</p>
       </ul>
   </div>
  
 
 
  
 
 
  
 
 
  
 
 =====js代码========= 
 
 $(function () {
  
 
     open();
 $(".rankImg ul li").hover(function(){
 a=true;
 index = $(this).index();
 oLi= index;
 openShow();
 // console.log(index);
 });         
 $(".rankImg ul li").mouseover(function(){
 a=false;
 });
 })
 
 
 
 
 var a=true;
 var oLi = 0;
 var index;
 function open(){
 setInterval(addoLi,2000);
 }
 
 
 function addoLi(){
 if (a == true) {
 oLi++;
    if(oLi>= 6){
     oLi=-1;
    }
    openShow();
 }else{
 oLi= index;
 openShow();
 }
 }
 
 
 function openShow(){ 
 $(".rankImg ul li").eq(oLi).children(".open").addClass("dpb").removeClass("dpn");
 $(".rankImg ul li").eq(oLi).children("p").addClass("dpn").removeClass("dpb");
 $(".rankImg ul li").eq(oLi).siblings().children(".open").addClass("dpn").removeClass("dpb");
 $(".rankImg ul li").eq(oLi).siblings().children("p").addClass("dpb").removeClass("dpn");
 }
  
 
 
  