关于时间倒计时 暂停 然后继续开始（延伸 li轮流显示 hover移入暂停 mouseover移出继续开始）
来源：互联网 发布：php租房管理源码 编辑：程序博客网 时间：2024/05/22 16:54
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");
}
0 0
- 关于时间倒计时 暂停 然后继续开始（延伸 li轮流显示 hover移入暂停 mouseover移出继续开始）
- 简单开始，暂停，继续的倒计时实现
- CountDownTimer 倒计时封装（可 暂停 继续 重新开始）
- Quartz 中的任务开始、暂停和继续
- 使用Handler控制进度条，完成开始、暂停、继续、停止操作
- 关于一个程序的“开始——暂停——继续”的一个问题
- 关于js 时间的暂停和开始
- JS倒计时效果带暂停和继续
- c++设计一个计时器（能够暂停，重新开始，继续）的功能。写的不好，仅供参考！
- android开发——分秒计时器（可 开始/暂停/继续/停止）
- Java/Android倒计时（开始，暂停，恢复，停止）
- LINUX 暂停、继续进程
- NSTimer 怎么暂停继续
- NSTimer 怎么暂停继续
- CAanimation动画 暂停，继续
- 动画暂停和继续
- 动画暂停与继续
- NSTimer 怎么暂停继续
- 1097. Deduplication on a Linked List
- PAT 乙级 1022. D进制的A+B (20) Java版
- 事务（一）
- java并发编程（十九）----(JUC集合)总体框架介绍
- eclipse安装和使用GitHub
- 关于时间倒计时 暂停 然后继续开始（延伸 li轮流显示 hover移入暂停 mouseover移出继续开始）
- 5-1 最大子列和问题 (20分)
- 使用vue遇到的问题
- Mysql常用命令
- nimg在Windows下部署
- 19-20 xshell/quagga开发流程案例
- Java中的private、protected、public和default的区别
- Java动态代理模式理解和实现
- DMIS Vector variable values / DMIS语言中向量变量用法介绍
